ак видно на демо, я подготовил 5 разных расцветок. Если вы уже определились с цветом переключателей, то преступаем к установке. Установка до ужаса проста - нужно лишь скопировать стили и вставить их в таблицу стилей css или в файл со своими стилями.
Оранжевый:
CSS:
Код
.swchItemA{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding:10px;
background:#e6c230;
border-bottom: 3px solid #ccaa23;
color:#fff;
}
.swchItem{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding:10px;
background: #363d43;
border-bottom: 3px solid #171c1f;
color:#fff;
margin-left:10px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
}
.swchItem:hover{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding:10px;
background:#e6c230;
border-bottom: 3px solid #ccaa23;
color:#fff;
}
Фиолетовый:
CSS:
Код
.swchItemA{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding:10px;
background:#9623cc;
border-bottom: 3px solid #7e18ae;
color:#fff;
}
.swchItem{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding:10px;
background: #363d43;
border-bottom: 3px solid #171c1f;
color:#fff;
margin-left:10px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
}
.swchItem:hover{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding:10px;
background:#9623cc;
border-bottom: 3px solid #7e18ae;
color:#fff;
}
Зеленый:
CSS:
Код
.swchItemA{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding:10px;
background:#24c44a;
border-bottom: 3px solid #1ab03d;
color:#fff;
}
.swchItem{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding:10px;
background: #363d43;
border-bottom: 3px solid #171c1f;
color:#fff;
margin-left:10px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
}
.swchItem:hover{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding:10px;
background:#24c44a;
border-bottom: 3px solid #1ab03d;
color:#fff;
}
Красный:
CSS:
Код
.swchItemA{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding:10px;
background:#bf2323;
border-bottom: 3px solid #a81616;
color:#fff;
}
.swchItem{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding:10px;
background: #363d43;
border-bottom: 3px solid #171c1f;
color:#fff;
margin-left:10px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
}
.swchItem:hover{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding:10px;
background:#bf2323;
border-bottom: 3px solid #a81616;
color:#fff;
}
Синий:
CSS:
Код
.swchItemA{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding:10px;
background:#1c71b3;
border-bottom: 3px solid #12609c;
color:#fff;
}
.swchItem{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding:10px;
background: #363d43;
border-bottom: 3px solid #171c1f;
color:#fff;
margin-left:10px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
}
.swchItem:hover{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding:10px;
background:#1c71b3;
border-bottom: 3px solid #12609c;
color:#fff;
}
ИЕ8 не поддерживает свойство transition и закругление углов, а как обстоят дела в следующих версиях этого браузера сказать не могу.
Вот и все, приятные для глаза переключатели страниц для uCoz установлены. До скорых встреч!
 Переключатели, страниц, для, uCoz, от, Fahrieva
|
Переключатели, страниц, для, uCoz, от, Fahrieva
