вРазные полезности

Черное горизонтальное меню FRENYR для ucoz

 
Здесь вам хочется все по полочкам разложить как из Черное горизонтальное меню FRENYR для ucoz сделать тот оттенок цвета, который вам нужен. А этот скрипт возьмем за основу, с которым и будем разбираться. Вообщем у него по умолчанию совершенно другой дизайн был, но почему то я посчитал, что так красивей будет и работать на нем нужно. И другое, не нужно все скрипты на эти стили заливать, так как всего поменять нужно две строки и будет совершенна другая гамма, та которая вам нужна.

Сам каркас:

Код
<ul class=»gradient-menu black»>
  <li><a href=»http://zornet.ru/»>Главная</a></li>
  <li><a href=»http://zornet.ru/»>Скрипты для сайта</a></li>
  <li><a href=»http://zornet.ru/»>Коды для сайта</a></li>
  <li><a href=»http://zornet.ru/»>Шаблоны для сайта</a></li>
  <li><a href=»http://zornet.ru/»>Обратная связь</a></li>
  <li><a href=»http://zornet.ru/»>Связь с Амином</a></li>
  <li><a href=»http://zornet.ru/»>Форум ресурса</a></li>
</ul>

Теперь CSS:

Код
ul.gradient-menu
  padding: 0;
  margin: 0 auto;
  list-style: none;
  display: inline-block;
  font-family: arial, sans-serif;
  font-size: 13px;
  height: 54px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
  -o-box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
  box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);

ul.gradient-menu
*display:inline;

ul.gradient-menu li
  display: inline;

ul.black li a
  background-color: #181818;
  border: 1px solid #474747;

ul.gradient-menu li a
  display: block;
  padding: 0 25px;
  height: 52px;
  line-height: 50px;
  text-decoration: none;
  color: #fff;
  float: left;
  margin-right: -1px;
  text-align: center;
  height: 52px;
  font-weight: normal;
   
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
  background-image: linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
  -webkit-box-shadow: inset -1px 0 1px rgba(255, 255, 255, 0.4), inset 1px 0 1px rgba(255, 255, 255, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.4);
  -moz-box-shadow: inset -1px 0 1px rgba(255, 255, 255, 0.4), inset 1px 0 1px rgba(255, 255, 255, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.4);
  box-shadow: inset -1px 0 1px rgba(255, 255, 255, 0.4), inset 1px 0 1px rgba(255, 255, 255, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.4);
  text-shadow: 1px -1px 1px #000;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;

ul.gradient-menu li:first-child a
  -moz-border-radius: 10px 0 0 10px;
  border-radius: 10px 0 0 10px;

ul.gradient-menu li:last-child a
  -moz-border-radius: 0 10px 10px 0;
  border-radius: 0 10px 10px 0;

ul.gradient-menu li a:hover
  line-height: 52px;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.2)), color-stop(0.5, rgba(255, 255, 255, 0)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.2)));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0) 50%, transparent 50%, rgba(255, 255, 255, 0.2) 100%);
  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0) 50%, transparent 50%, rgba(255, 255, 255, 0.2) 100%);
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0) 50%, transparent 50%, rgba(255, 255, 255, 0.2) 100%);
  background-image: linear-gradient(top, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0) 50%, transparent 50%, rgba(255, 255, 255, 0.2) 100%);
  -webkit-box-shadow: inset -1px 0 1px rgba(0, 0, 0, 0.4), inset 1px 0 1px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset -1px 0 1px rgba(0, 0, 0, 0.4), inset 1px 0 1px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(0, 0, 0, 0.4);
  box-shadow: inset -1px 0 1px rgba(0, 0, 0, 0.4), inset 1px 0 1px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(0, 0, 0, 0.4);

ul.black li a:active
  background-color: #111;

ul.gradient-menu li a:active
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.8);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.8);

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

Код
ul.black li a
  background-color: #181818;
  border: 1px solid #474747;

Также можете поменять, светлые оттенки, которые разделяют категорий, но они стоят по умолчанию и по мне очень здорово.

источник: zornet.ru

Похожие посты