И снова здравствуйте. Сегодня будем изменять переключатели страниц для uCoz, а именно делать их вид приятным для глаза. Прежде чем начать смотрим демо.
Как видно на демо, я подготовил 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 установлены. До скорых встреч!
06:06
