« 5 разных, цветных переключателей страниц для uCoz »

Описание материала:

5 разных, цветных переключателей страниц для сайтов системы uCoz. Переключатели красивые и тоже время простые, цвета - желтый, фиолетовый, зеленый, красный и синий. Переключатели сделан только из кода CSS и не требует особых знаний в установке.

Установка:

  • Заходим в ПУ >>> Управление дизайном >>> Таблица стилей (CSS) и ставим в самый низ один из понравившийся кодов:
  • Желтый переключатель:
    Код
    /* Желтый переключатель для uCoz */
    .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;  
      }
    /* ------------------------- */

  • Фиолетовый переключатель:
    Код
    /* Фиолетовый переключатель для uCoz */
    .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;  
      }
    /* ------------------------- */

  • Зеленый переключатель:
    Код
    /* Зеленый переключатель для uCoz */
    .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;  
      }
    /* ------------------------- */

  • Красный переключатель:
    Код
    /* Красный переключатель для uCoz */
    .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;  
      }
    /* ------------------------- */

  • Синий переключатель:
    Код
    /* Синий переключатель для uCoz */
    .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;  
      }
    /* ------------------------- */


    Установка материала

    Мы поможем установить данный материал к Вам на сайт

    Источник

    Материал взят со стороннего ресурса и был проверен нами


    Добавил: YaVi | Категория: Скрипты для uCoz | Просмотров: 701


    Поделиться в соц. сетях:

    К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

    Комментариев к материалу: 0
    avatar