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

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

02015-10-1931794Денис Абдуллин

Вашему вниманию мы предоставляем 4 цветовых варианта переключателей страниц в силе Flat. Наши переключатели не используют никаких картинок, они целиком и полностью построены на CSS.

Для установки переключателей выберите подходящий вариант, и скопируйте код в таблицы стилей вашего сайта.


Зеленый

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

Код
.catPages1,  
.catPages2,  
.pagesBlock1,  
.pagesBlock2,  
.pagesBlockuz1,  
.pagesBlockuz2 {padding:35px 0px 10px 0px;}  
span.catPages1,  
span.catPages2,  
span.pagesBlock1,  
span.pagesBlock2,  
span.pagesBlockuz1,  
span.pagesBlockuz2 {  
  display: inline-block;  
}  
.catPages1 a,  
.catPages2 a,  
.pagesBlock1 a,  
.pagesBlock2 a,  
.pagesBlockuz1 a,  
.pagesBlockuz2 a,  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  margin: 0px 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#777;  
  background:#ececec;  
}  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  margin: 0px 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#f2f2f2;  
  background:#7cb29b;  
}  
.catPages1 a:hover,  
.catPages2 a:hover,  
.pagesBlock1 a:hover,  
.pagesBlock2 a:hover,  
.pagesBlockuz1 a:hover,  
.pagesBlockuz2 a:hover {  
  margin: 0px 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#fff;  
  background:#649491;  
}

Синий

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

Код
.catPages1,  
.catPages2,  
.pagesBlock1,  
.pagesBlock2,  
.pagesBlockuz1,  
.pagesBlockuz2 {padding:35px 0px 10px 0px;}  
span.catPages1,  
span.catPages2,  
span.pagesBlock1,  
span.pagesBlock2,  
span.pagesBlockuz1,  
span.pagesBlockuz2 {  
  display: inline-block;  
}  
.catPages1 a,  
.catPages2 a,  
.pagesBlock1 a,  
.pagesBlock2 a,  
.pagesBlockuz1 a,  
.pagesBlockuz2 a,  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  margin: 0px 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#777;  
  background:#ececec;  
}  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  margin: 0px 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#f2f2f2;  
  background:#3498db;  
}  
.catPages1 a:hover,  
.catPages2 a:hover,  
.pagesBlock1 a:hover,  
.pagesBlock2 a:hover,  
.pagesBlockuz1 a:hover,  
.pagesBlockuz2 a:hover {  
  margin: 0px 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#fff;  
  background:#2980b9;  
}

Красный

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

Код
.catPages1,  
.catPages2,  
.pagesBlock1,  
.pagesBlock2,  
.pagesBlockuz1,  
.pagesBlockuz2 {padding:35px 0px 10px 0px;}  
span.catPages1,  
span.catPages2,  
span.pagesBlock1,  
span.pagesBlock2,  
span.pagesBlockuz1,  
span.pagesBlockuz2 {  
  display: inline-block;  
}  
.catPages1 a,  
.catPages2 a,  
.pagesBlock1 a,  
.pagesBlock2 a,  
.pagesBlockuz1 a,  
.pagesBlockuz2 a,  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  margin: 0px 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#777;  
  background:#ececec;  
}  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  margin: 0px 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#f2f2f2;  
  background:#e74c3c;  
}  
.catPages1 a:hover,  
.catPages2 a:hover,  
.pagesBlock1 a:hover,  
.pagesBlock2 a:hover,  
.pagesBlockuz1 a:hover,  
.pagesBlockuz2 a:hover {  
  margin: 0px 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#fff;  
  background:#c0392b;  
}

Жёлтый

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

Код
.catPages1,  
.catPages2,  
.pagesBlock1,  
.pagesBlock2,  
.pagesBlockuz1,  
.pagesBlockuz2 {padding:35px 0px 10px 0px;}  
span.catPages1,  
span.catPages2,  
span.pagesBlock1,  
span.pagesBlock2,  
span.pagesBlockuz1,  
span.pagesBlockuz2 {  
  display: inline-block;  
}  
.catPages1 a,  
.catPages2 a,  
.pagesBlock1 a,  
.pagesBlock2 a,  
.pagesBlockuz1 a,  
.pagesBlockuz2 a,  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  margin: 0px 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#777;  
  background:#ececec;  
}  
.catPages1 b,  
.catPages2 b,  
.pagesBlock1 b,  
.pagesBlock2 b,  
.pagesBlockuz1 b,  
.pagesBlockuz2 b {  
  margin: 0px 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#fff;  
  background:#f1c40f;  
}  
.catPages1 a:hover,  
.catPages2 a:hover,  
.pagesBlock1 a:hover,  
.pagesBlock2 a:hover,  
.pagesBlockuz1 a:hover,  
.pagesBlockuz2 a:hover {  
  margin: 0px 2px;  
  padding:6px 12px;  
  border-radius:3px;  
  color:#fff;  
  background:#f39c12;  
}

Также вы можете настроить цвета под себя, но советуем не использовать не слишком яркие, т.к. это сильно давит на глаза.

По хорошему нужно отметить, что это наиболее простой вид переключателей. Подойдет такое оформление практически для любого сайта на uCoz.


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (4)
Deniss Lvov 2015-11-04 в 20:51Спам
А чего такой код большой?
0
Евгений Мартынов 2016-05-06 в 22:34Спам
Для всех стилей! Т.е для разных модулей в 1-ом, наверно!
1
WooDoo 2015-11-26 в 18:23Спам
Красивые!Спасибо)
1
Евгений Мартынов 2016-05-06 в 22:33Спам
Забрал:)
1
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.