Переключатели страниц для uCoz от Fahrieva
827материалов
228тем на форуме
3004комментария
6160пользователей

Переключатели страниц для uCoz от Fahrieva


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

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 24.08.2013 в 01:17
Материал просмотрен: 643 раза
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта