Например:
Суббота, 25.05.2024, 17:55 Регистрация Карта сайта RSS Лента
Игровые новости Топ Сайтов Статьи Загрузить изображение Игровой форум Картинки
  • Страница 1 из 1
  • 1
Переключатели страниц для uCoz от Fahrieva
Dimas777
Дата: Вторник, 15.04.2014, 03:20 | Сообщение № 1
ICQ пользователя:
Skype пользователя:
Сайт пользователя:

Оффлайн
Сообщений: 300
Награды: 2
 


ак видно на демо, я подготовил 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

    
Game-Portals.3dn.ru - The Best.
  • Страница 1 из 1
  • 1
Поиск: