Гостевой вход

Вы не залогинились
22:42

7 цветовых схем для переключателей страниц на сайтах uCoz

Категория: Разное

Метки: переключатели страниц
Предлагаю вашему вниманию, на выбор, семь цветовых вариантов для переключателей страниц. Тестировал в модулях Новости сайта, Блог, Каталог файлов, Каталог статей. Если такого рода переключатели понадобятся для других модулей системы, переделать их, как мне кажется, не составит труда.

Вариант 1

Смотрим демо

CSS:

Код

/* Переключатели */  

.pagesBlockuz2 a,.pagesBlockuz2 b,.catPages1 a,.catPages1 b,.catPages2 a,.catPages2 b,.pagesBlockuz1 a,.pagesBlockuz1 b{text-decoration:none;}  

.catPages1 {float:right;}  
.catPages2 {margin-left: .3em;}  

.swchItemA1,.swchItem1,.swchItemA,.swchItem {  
  display: inline-block;  
  *display: inline;  
  padding: 4px 10px;  
  margin-bottom: 0;  
  *margin-left: .3em;  
  font-size: 13px;  
  line-height: 18px;  
  *line-height: 20px;  
  color: #333333;  
  text-align: center;  
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);  
  vertical-align: middle;  
  cursor: pointer;  
  background-color: #f5f5f5;  
  *background-color: #e6e6e6;  
  background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);  
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));  
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);  
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);  
  background-image: linear-gradient(top, #ffffff, #e6e6e6);  
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);  
  background-repeat: repeat-x;  
  border: 1px solid #cccccc;  
  *border: 0;  
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);  
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;  
  border-bottom-color: #b3b3b3;  
  -webkit-border-radius: 4px;  
  -moz-border-radius: 4px;  
  border-radius: 4px;  
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);  
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);  
  *zoom: 1;  
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);  
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);  
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);  
}  

.swchItemA1:hover,  
.swchItemA1:active,  
.swchItemA1.active,  
.swchItem1:hover,  
.swchItem1:active,  
.swchItem1.active,  
.swchItemA:hover,  
.swchItemA:active,  
.swchItemA.active,  
.swchItem:hover,  
.swchItem:active,  
.swchItem.active {  
  background-color: #e6e6e6;  
  *background-color: #d9d9d9;  
}  

.swchItemA1:active,  
.swchItemA1.active,  
.swchItem1:active,  
.swchItem1.active,  
.swchItemA:active,  
.swchItemA.active,  
.swchItem:active,  
.swchItem.active {  
  background-color: #cccccc \9;  
}  

.swchItemA1:first-child,  
.swchItem1:first-child,  
.swchItemA:first-child,  
.swchItem:first-child {  
  *margin-left: 0;  
}  

.swchItemA1:hover,  
.swchItem1:hover,  
.swchItemA:hover,  
.swchItem:hover {  
  color: #333333;  
  text-decoration: none;  
  background-color: #e6e6e6;  
  *background-color: #d9d9d9;  
  /* Buttons in IE7 don't get borders, so darken on hover */  

  background-position: 0 -5px;  
  -webkit-transition: background-position 0.1s linear;  
  -moz-transition: background-position 0.1s linear;  
  -ms-transition: background-position 0.1s linear;  
  -o-transition: background-position 0.1s linear;  
  transition: background-position 0.1s linear;  
}  

.swchItemA1:focus,  
.swchItem1:focus,  
.swchItemA:focus,  
.swchItem:focus {  
  outline: thin dotted #333;  
  outline: 5px auto -webkit-focus-ring-color;  
  outline-offset: -2px;  
}  

.swchItemA1:active,  
.swchItem1:active,  
.swchItemA:active,  
.swchItem:active {  
  background-color: #e6e6e6;  
  background-color: #d9d9d9 \9;  
  background-image: none;  
  outline: 0;  
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);  
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);  
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);  
}  

.pagesBlockuz2:before,  
.pagesBlockuz2:after,  
.pagesBlockuz1:before,  
.pagesBlockuz1:after,  
.catPages1:before,  
.catPages1:after,  
.catPages2:before,  
.catPages2:after {  
  display: table;  
  content: "";  
}  

.pagesBlockuz2 a:first-child,  
.pagesBlockuz2 b:first-child,  
.pagesBlockuz1 a:first-child,  
.pagesBlockuz1 b:first-child,  
.catPages1 a:first-child,  
.catPages1 b:first-child,  
.catPages2 a:first-child,  
.catPages2 b:first-child {-webkit-border-top-left-radius: 4px;  
-webkit-border-bottom-left-radius: 4px;  
-moz-border-radius-topleft: 4px;  
-moz-border-radius-bottomleft: 4px;  
border-top-left-radius: 4px;  
border-bottom-left-radius: 4px;}  

.pagesBlockuz2 a:last-child,  
.pagesBlockuz2 b:last-child,  
.pagesBlockuz1 a:last-child,  
.pagesBlockuz1 b:last-child,  
.catPages1 a:last-child,  
.catPages1 b:last-child,  
.catPages2 a:last-child,  
.catPages2 b:last-child {-webkit-border-top-right-radius: 4px;  
-webkit-border-bottom-right-radius: 4px;  
-moz-border-radius-topright: 4px;  
-moz-border-radius-bottomright: 4px;  
border-top-right-radius: 4px;  
border-bottom-right-radius: 4px;}  

.pagesBlockuz2:after,  
.pagesBlockuz1:after,  
.catPages1:after,  
.catPages2:after {  
  clear: both;  
}  
.pagesBlockuz2:first-child,  
.pagesBlockuz1:first-child,  
.catPages1:first-child,  
.catPages2:first-child{  
  *margin-left: 0;  
}  
.pagesBlockuz2,  
.pagesBlockuz1,  
.catPages1,  
.catPages2{  
  display: inline-block;  
  *display: inline;  
  /* IE7 inline-block hack */  
  *zoom: 1;  
}  

.pagesBlockuz2 > .swchItemA1,.pagesBlockuz1 > .swchItemA,.catPages1 > .swchItemA,.catPages2 > .swchItemA1 {  
  position: relative;  
  float: left;  
  margin-left: -1px;  
  -webkit-border-radius: 0;  
  -moz-border-radius: 0;  
  border-radius: 0;  
}  
.pagesBlockuz2 > .swchItem1,.pagesBlockuz1 > .swchItem,.catPages1 > .swchItem,.catPages2 > .swchItem1 {  
  position: relative;  
  float: left;  
  margin-left: -1px;  
  -webkit-border-radius: 0;  
  -moz-border-radius: 0;  
  border-radius: 0;  
}  

.pagesBlockuz2:first-child,.pagesBlockuz1:first-child,.catPages1:first-child,.catPages2:first-child {  
  margin-left: 0;  
  -webkit-border-bottom-left-radius: 4px;  
  border-bottom-left-radius: 4px;  
  -webkit-border-top-left-radius: 4px;  
  border-top-left-radius: 4px;  
  -moz-border-radius-bottomleft: 4px;  
  -moz-border-radius-topleft: 4px;  
}  

.pagesBlockuz2:last-child,.pagesBlockuz1:last-child,.catPages1:last-child,.catPages2:last-child {  
  -webkit-border-top-right-radius: 4px;  
  border-top-right-radius: 4px;  
  -webkit-border-bottom-right-radius: 4px;  
  border-bottom-right-radius: 4px;  
  -moz-border-radius-topright: 4px;  
  -moz-border-radius-bottomright: 4px;  
}  


Вариант 2

Смотрим демо

CSS:

Код

.pagesBlockuz2 a,.pagesBlockuz2 b,.catPages1 a,.catPages1 b,.catPages2 a,.catPages2 b,.pagesBlockuz1 a,.pagesBlockuz1 b{text-decoration:none;color:#FFFFFF!important;}  

.catPages2 {margin-left: .3em;}  
.catPages1 {float:right;}  

.swchItemA1,.swchItem1,.swchItemA,.swchItem {  
  display: inline-block;  
  *display: inline;  
  padding: 4px 10px;  
  margin-bottom: 0;  
  *margin-left: .3em;  
  font-size: 13px;  
  line-height: 18px;  
  *line-height: 20px;  
  color: #ffffff;  
  text-align: center;  
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);  
  vertical-align: middle;  
  cursor: pointer;  
  background-color: #0074cc;  
  *background-color: #0055cc;  
  background-image: -ms-linear-gradient(top, #0074cc, #0055cc);  
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0074cc), to(#0055cc));  
  background-image: -webkit-linear-gradient(top, #0074cc, #0055cc);  
  background-image: -o-linear-gradient(top, #0074cc, #0055cc);  
  background-image: linear-gradient(top, #0074cc, #0055cc);  
  background-image: -moz-linear-gradient(top, #0074cc, #0055cc);  
  background-repeat: repeat-x;  
  border: 1px solid #0055cc;  
  *border: 0;  
  border-color: rgba(0, 85, 204, 0.1) rgba(0, 85, 204, 0.1) rgba(0, 85, 204, 0.25);  
  border-color: #0074cc #0074cc #0055cc;  
  border-bottom-color: #003399;  
  -webkit-border-radius: 4px;  
  -moz-border-radius: 4px;  
  border-radius: 4px;  
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0074cc', endColorstr='#0055cc', GradientType=0);  
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);  
  *zoom: 1;  
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);  
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);  
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);  
}  

b.swchItemA,b.swchItemA1 {color: #ffffff;  
  text-decoration: none;  
  background-color: #0074cc;  
  *background-color: #0055cc;  
  /* Buttons in IE7 don't get borders, so darken on hover */  

  background-position: 0 -25px;  
  -webkit-transition: background-position 0.1s linear;  
  -moz-transition: background-position 0.1s linear;  
  -ms-transition: background-position 0.1s linear;  
  -o-transition: background-position 0.1s linear;  
  transition: background-position 0.1s linear;  
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);  
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);  
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);}  

.swchItemA1:hover,  
.swchItemA1:active,  
.swchItem1:hover,  
.swchItem1:active,  
.swchItemA:hover,  
.swchItemA:active,  
.swchItem:hover,  
.swchItem:active {  
  color: #ffffff;  
  text-decoration: none;  
  background-color: #0074cc;  
  *background-color: #0055cc;  
  /* Buttons in IE7 don't get borders, so darken on hover */  

  background-position: 0 -25px;  
  -webkit-transition: background-position 0.1s linear;  
  -moz-transition: background-position 0.1s linear;  
  -ms-transition: background-position 0.1s linear;  
  -o-transition: background-position 0.1s linear;  
  transition: background-position 0.1s linear;  
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);  
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);  
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);}  

.pagesBlockuz2:before,  
.pagesBlockuz2:after,  
.pagesBlockuz1:before,  
.pagesBlockuz1:after,  
.catPages1:before,  
.catPages1:after,  
.catPages2:before,  
.catPages2:after {  
  display: table;  
  content: "";  
}  

.pagesBlockuz2 a:first-child,  
.pagesBlockuz2 b:first-child,  
.pagesBlockuz1 a:first-child,  
.pagesBlockuz1 b:first-child,  
.catPages1 a:first-child,  
.catPages1 b:first-child,  
.catPages2 a:first-child,  
.catPages2 b:first-child {-webkit-border-top-left-radius: 4px;  
-webkit-border-bottom-left-radius: 4px;  
-moz-border-radius-topleft: 4px;  
-moz-border-radius-bottomleft: 4px;  
border-top-left-radius: 4px;  
border-bottom-left-radius: 4px;}  

.pagesBlockuz2 a:last-child,  
.pagesBlockuz2 b:last-child,  
.pagesBlockuz1 a:last-child,  
.pagesBlockuz1 b:last-child,  
.catPages1 a:last-child,  
.catPages1 b:last-child,  
.catPages2 a:last-child,  
.catPages2 b:last-child {-webkit-border-top-right-radius: 4px;  
-webkit-border-bottom-right-radius: 4px;  
-moz-border-radius-topright: 4px;  
-moz-border-radius-bottomright: 4px;  
border-top-right-radius: 4px;  
border-bottom-right-radius: 4px;}  

.pagesBlockuz2:after,  
.pagesBlockuz1:after,  
.catPages1:after,  
.catPages2:after {  
  clear: both;  
}  
.pagesBlockuz2:first-child,  
.pagesBlockuz1:first-child,  
.catPages1:first-child,  
.catPages2:first-child{  
  *margin-left: 0;  
}  
.pagesBlockuz2,  
.pagesBlockuz1,  
.catPages1,  
.catPages2{  
  display: inline-block;  
  *display: inline;  
  /* IE7 inline-block hack */  
  *zoom: 1;  
}  

.pagesBlockuz2 > .swchItemA1,.pagesBlockuz1 > .swchItemA,.catPages1 > .swchItemA,.catPages2 > .swchItemA1 {  
  position: relative;  
  float: left;  
  margin-left: -1px;  
  -webkit-border-radius: 0;  
  -moz-border-radius: 0;  
  border-radius: 0;  
}  
.pagesBlockuz2 > .swchItem1,.pagesBlockuz1 > .swchItem,.catPages1 > .swchItem,.catPages2 > .swchItem1 {  
  position: relative;  
  float: left;  
  margin-left: -1px;  
  -webkit-border-radius: 0;  
  -moz-border-radius: 0;  
  border-radius: 0;  
}  

.pagesBlockuz2:first-child,.pagesBlockuz1:first-child,.catPages1:first-child,.catPages2:first-child {  
  margin-left: 0;  
  -webkit-border-bottom-left-radius: 4px;  
  border-bottom-left-radius: 4px;  
  -webkit-border-top-left-radius: 4px;  
  border-top-left-radius: 4px;  
  -moz-border-radius-bottomleft: 4px;  
  -moz-border-radius-topleft: 4px;  
}  

.pagesBlockuz2:last-child,.pagesBlockuz1:last-child,.catPages1:last-child,.catPages2:last-child {  
  -webkit-border-top-right-radius: 4px;  
  border-top-right-radius: 4px;  
  -webkit-border-bottom-right-radius: 4px;  
  border-bottom-right-radius: 4px;  
  -moz-border-radius-topright: 4px;  
  -moz-border-radius-bottomright: 4px;  
}  


Вариант 3

Смотрим демо

CSS:

Код

.pagesBlockuz2 a,.pagesBlockuz2 b,.catPages1 a,.catPages1 b,.catPages2 a,.catPages2 b,.pagesBlockuz1 a,.pagesBlockuz1 b{text-decoration:none;color:#ffffff!important;}  

.catPages1 {float:right;}  
.catPages2 {margin-left: .3em;}  

.swchItemA1,.swchItem1,.swchItemA,.swchItem {  
  display: inline-block;  
  *display: inline;  
  padding: 4px 10px;  
  margin-bottom: 0;  
  *margin-left: .3em;  
  font-size: 13px;  
  line-height: 18px;  
  *line-height: 20px;  
  color: #ffffff;  
  text-align: center;  
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);  
  vertical-align: middle;  
  cursor: pointer;  
  background-color: #49afcd;  
  *background-color: #2f96b4;  
  background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);  
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));  
  background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);  
  background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);  
  background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);  
  background-image: linear-gradient(top, #5bc0de, #2f96b4);  
  background-repeat: repeat-x;  
  border-color: #2f96b4 #2f96b4 #1f6377;  
   
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);  
  border-bottom-color: #134857;  
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);  
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);  
  *zoom: 1;  
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);  
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);  
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);  
}  

b.swchItemA,b.swchItemA1 {color: #ffffff;  
  text-decoration: none;  
background-color: #49afcd;  
  *background-color: #2f96b4;  
  /* Buttons in IE7 don't get borders, so darken on hover */  

  background-position: 0 -25px;  
  -webkit-transition: background-position 0.1s linear;  
  -moz-transition: background-position 0.1s linear;  
  -ms-transition: background-position 0.1s linear;  
  -o-transition: background-position 0.1s linear;  
  transition: background-position 0.1s linear;  
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.15);  
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.15);  
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.15);}  

.swchItemA1:hover,  
.swchItemA1:active,  
.swchItem1:hover,  
.swchItem1:active,  
.swchItemA:hover,  
.swchItemA:active,  
.swchItem:hover,  
.swchItem:active {  
color: #ffffff;  
  text-decoration: none;  
background-color: #49afcd;  
  *background-color: #2f96b4;  
  /* Buttons in IE7 don't get borders, so darken on hover */  

  background-position: 0 -25px;  
  -webkit-transition: background-position 0.1s linear;  
  -moz-transition: background-position 0.1s linear;  
  -ms-transition: background-position 0.1s linear;  
  -o-transition: background-position 0.1s linear;  
  transition: background-position 0.1s linear;  
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);  
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);  
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);}  

.pagesBlockuz2:before,  
.pagesBlockuz2:after,  
.pagesBlockuz1:before,  
.pagesBlockuz1:after,  
.catPages1:before,  
.catPages1:after,  
.catPages2:before,  
.catPages2:after {  
  display: table;  
  content: "";  
}  

.pagesBlockuz2 a:first-child,  
.pagesBlockuz2 b:first-child,  
.pagesBlockuz1 a:first-child,  
.pagesBlockuz1 b:first-child,  
.catPages1 a:first-child,  
.catPages1 b:first-child,  
.catPages2 a:first-child,  
.catPages2 b:first-child {-webkit-border-top-left-radius: 4px;  
-webkit-border-bottom-left-radius: 4px;  
-moz-border-radius-topleft: 4px;  
-moz-border-radius-bottomleft: 4px;  
border-top-left-radius: 4px;  
border-bottom-left-radius: 4px;}  

.pagesBlockuz2 a:last-child,  
.pagesBlockuz2 b:last-child,  
.pagesBlockuz1 a:last-child,  
.pagesBlockuz1 b:last-child,  
.catPages1 a:last-child,  
.catPages1 b:last-child,  
.catPages2 a:last-child,  
.catPages2 b:last-child {-webkit-border-top-right-radius: 4px;  
-webkit-border-bottom-right-radius: 4px;  
-moz-border-radius-topright: 4px;  
-moz-border-radius-bottomright: 4px;  
border-top-right-radius: 4px;  
border-bottom-right-radius: 4px;}  

.pagesBlockuz2:after,  
.pagesBlockuz1:after,  
.catPages1:after,  
.catPages2:after {  
  clear: both;  
}  
.pagesBlockuz2:first-child,  
.pagesBlockuz1:first-child,  
.catPages1:first-child,  
.catPages2:first-child{  
  *margin-left: 0;  
}  
.pagesBlockuz2,  
.pagesBlockuz1,  
.catPages1,  
.catPages2{  
  display: inline-block;  
  *display: inline;  
  /* IE7 inline-block hack */  
  *zoom: 1;  
}  

.pagesBlockuz2 > .swchItemA1,.pagesBlockuz1 > .swchItemA,.catPages1 > .swchItemA,.catPages2 > .swchItemA1 {  
  position: relative;  
  float: left;  
  margin-left: -1px;  
  -webkit-border-radius: 0;  
  -moz-border-radius: 0;  
  border-radius: 0;  
}  
.pagesBlockuz2 > .swchItem1,.pagesBlockuz1 > .swchItem,.catPages1 > .swchItem,.catPages2 > .swchItem1 {  
  position: relative;  
  float: left;  
  margin-left: -1px;  
  -webkit-border-radius: 0;  
  -moz-border-radius: 0;  
  border-radius: 0;  
}  

.pagesBlockuz2:first-child,.pagesBlockuz1:first-child,.catPages1:first-child,.catPages2:first-child {  
  margin-left: 0;  
  -webkit-border-bottom-left-radius: 4px;  
  border-bottom-left-radius: 4px;  
  -webkit-border-top-left-radius: 4px;  
  border-top-left-radius: 4px;  
  -moz-border-radius-bottomleft: 4px;  
  -moz-border-radius-topleft: 4px;  
}  

.pagesBlockuz2:last-child,.pagesBlockuz1:last-child,.catPages1:last-child,.catPages2:last-child {  
  -webkit-border-top-right-radius: 4px;  
  border-top-right-radius: 4px;  
  -webkit-border-bottom-right-radius: 4px;  
  border-bottom-right-radius: 4px;  
  -moz-border-radius-topright: 4px;  
  -moz-border-radius-bottomright: 4px;  
}  


Вариант 4

Смотрим демо

CSS:

Код

.pagesBlockuz2 a,.pagesBlockuz2 b,.catPages1 a,.catPages1 b,.catPages2 a,.catPages2 b,.pagesBlockuz1 a,.pagesBlockuz1 b{text-decoration:none;color:#ffffff!important;}  

.catPages1 {float:right;}  
.catPages2 {margin-left: .3em;}  

.swchItemA1,.swchItem1,.swchItemA,.swchItem {  
  display: inline-block;  
  *display: inline;  
  padding: 4px 10px;  
  margin-bottom: 0;  
  *margin-left: .3em;  
  font-size: 13px;  
  line-height: 18px;  
  *line-height: 20px;  
  color: #ffffff;  
  text-align: center;  
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);  
  vertical-align: middle;  
  cursor: pointer;  
  background-color: #5bb75b;  
  *background-color: #51a351;  
  background-image: -ms-linear-gradient(top, #62c462, #51a351);  
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));  
  background-image: -webkit-linear-gradient(top, #62c462, #51a351);  
  background-image: -o-linear-gradient(top, #62c462, #51a351);  
  background-image: -moz-linear-gradient(top, #62c462, #51a351);  
  background-image: linear-gradient(top, #62c462, #51a351);  
  background-repeat: repeat-x;  
  border-color: #4a914a #4a914a #387038;  
  border-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.35);  
  border-bottom-color:#4a914a;  
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0);  
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);  
  *zoom: 1;  
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);  
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);  
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);  
}  

b.swchItemA,b.swchItemA1 {color: #ffffff;  
  text-decoration: none;  
  background-color: #5bb75b;  
  *background-color: #51a351;  
  /* Buttons in IE7 don't get borders, so darken on hover */  

  background-position: 0 -25px;  
  -webkit-transition: background-position 0.1s linear;  
  -moz-transition: background-position 0.1s linear;  
  -ms-transition: background-position 0.1s linear;  
  -o-transition: background-position 0.1s linear;  
  transition: background-position 0.1s linear;  
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);  
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);  
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);}  

.swchItemA1:hover,  
.swchItemA1:active,  
.swchItem1:hover,  
.swchItem1:active,  
.swchItemA:hover,  
.swchItemA:active,  
.swchItem:hover,  
.swchItem:active {  
color: #ffffff;  
  text-decoration: none;  
  background-color: #5bb75b;  
  *background-color: #51a351;  
  /* Buttons in IE7 don't get borders, so darken on hover */  

  background-position: 0 -25px;  
  -webkit-transition: background-position 0.1s linear;  
  -moz-transition: background-position 0.1s linear;  
  -ms-transition: background-position 0.1s linear;  
  -o-transition: background-position 0.1s linear;  
  transition: background-position 0.1s linear;  
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);  
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);  
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);}  

.pagesBlockuz2:before,  
.pagesBlockuz2:after,  
.pagesBlockuz1:before,  
.pagesBlockuz1:after,  
.catPages1:before,  
.catPages1:after,  
.catPages2:before,  
.catPages2:after {  
  display: table;  
  content: "";  
}  

.pagesBlockuz2 a:first-child,  
.pagesBlockuz2 b:first-child,  
.pagesBlockuz1 a:first-child,  
.pagesBlockuz1 b:first-child,  
.catPages1 a:first-child,  
.catPages1 b:first-child,  
.catPages2 a:first-child,  
.catPages2 b:first-child {-webkit-border-top-left-radius: 4px;  
-webkit-border-bottom-left-radius: 4px;  
-moz-border-radius-topleft: 4px;  
-moz-border-radius-bottomleft: 4px;  
border-top-left-radius: 4px;  
border-bottom-left-radius: 4px;}  

.pagesBlockuz2 a:last-child,  
.pagesBlockuz2 b:last-child,  
.pagesBlockuz1 a:last-child,  
.pagesBlockuz1 b:last-child,  
.catPages1 a:last-child,  
.catPages1 b:last-child,  
.catPages2 a:last-child,  
.catPages2 b:last-child {-webkit-border-top-right-radius: 4px;  
-webkit-border-bottom-right-radius: 4px;  
-moz-border-radius-topright: 4px;  
-moz-border-radius-bottomright: 4px;  
border-top-right-radius: 4px;  
border-bottom-right-radius: 4px;}  

.pagesBlockuz2:after,  
.pagesBlockuz1:after,  
.catPages1:after,  
.catPages2:after {  
  clear: both;  
}  
.pagesBlockuz2:first-child,  
.pagesBlockuz1:first-child,  
.catPages1:first-child,  
.catPages2:first-child{  
  *margin-left: 0;  
}  
.pagesBlockuz2,  
.pagesBlockuz1,  
.catPages1,  
.catPages2{  
  display: inline-block;  
  *display: inline;  
  /* IE7 inline-block hack */  
  *zoom: 1;  
}  

.pagesBlockuz2 > .swchItemA1,.pagesBlockuz1 > .swchItemA,.catPages1 > .swchItemA,.catPages2 > .swchItemA1 {  
  position: relative;  
  float: left;  
  margin-left: -1px;  
  -webkit-border-radius: 0;  
  -moz-border-radius: 0;  
  border-radius: 0;  
}  
.pagesBlockuz2 > .swchItem1,.pagesBlockuz1 > .swchItem,.catPages1 > .swchItem,.catPages2 > .swchItem1 {  
  position: relative;  
  float: left;  
  margin-left: -1px;  
  -webkit-border-radius: 0;  
  -moz-border-radius: 0;  
  border-radius: 0;  
}  

.pagesBlockuz2:first-child,.pagesBlockuz1:first-child,.catPages1:first-child,.catPages2:first-child {  
  margin-left: 0;  
  -webkit-border-bottom-left-radius: 4px;  
  border-bottom-left-radius: 4px;  
  -webkit-border-top-left-radius: 4px;  
  border-top-left-radius: 4px;  
  -moz-border-radius-bottomleft: 4px;  
  -moz-border-radius-topleft: 4px;  
}  

.pagesBlockuz2:last-child,.pagesBlockuz1:last-child,.catPages1:last-child,.catPages2:last-child {  
  -webkit-border-top-right-radius: 4px;  
  border-top-right-radius: 4px;  
  -webkit-border-bottom-right-radius: 4px;  
  border-bottom-right-radius: 4px;  
  -moz-border-radius-topright: 4px;  
  -moz-border-radius-bottomright: 4px;  
}  


Продолжение во второй части материала.

Просмотров: 290 | Комментариев: 1 | Рейтинг: 0.0/Оценок: 0

Материалы схожей тематики

Онлайн статистика

18.11.2017

Суббота

Онлайн всего: 1
Гостей: 1
Пользователей: 0

На сайте сейчас: