» »

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


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

Думаю многому большинству не нравятся просто цифровые переключатели. Но во первых они не очень всегда вписываются в ваш дизайн сайта и всегда как то смотрятся особо отдалено. И когда заказывают макет, но не прерывно с ним идут переключатели страниц под сайт. Но и в этом случай некоторым не нравятся они и начинается поиск которые бы отлично подошли на ваш сайт.

Вот хочу предложить подборку которую создал Fahrieva, сразу оговорюсь, коды все качественные и в архиве есть файл на Demo где вы сможете воочию посмотреть их в работе. Лично мне понравились как по своему дизайну и их работоспособности. При нажатие они меняются в оттенке цвета, что очень красиво смотрится.
И так начнем:

Оранжевый:
Прописываем стиль в 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;  
}

Источник: www.center-dm.ru
22.08.2013 Загрузок: 2 Просмотров: 717 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar