Главная » 2013 » Сентябрь » 30 » Полу-прозрачное серое меню на CSS (Скрипты для ucoz)
30.09.2013, 14:07

Полу-прозрачное серое меню на CSS



Демо? Пожалуйста:) Демка менюшки

Понравилось? Значит приступаем к установочке:)

В то место где Будет Меню:

Код
<ul>  
  <li><a href="Ссылочка">Название пунктика</a></li>  
  <li><a href="Ссылочка">Название пунктика</a></li>  
  <li><a href="Ссылочка">Название пунктика</a></li>  
  <li><a href="Ссылочка">Название пунктика</a></li>  
  </ul>


А терь в CSS:

Код
li {  
  display: inline-block; /* Строчно-блочные элементы */  
  background:rgba(118,118,118,0.7); /* Цвет фона */  
  margin-right: -5px; /* Расстояние между пунктами меню */  
  -webkit-transform: skewX(-30deg); /* Для Safari и Chrome */  
  -moz-transform: skewX(-30deg); /* Для Firefox */  
  -o-transform: skewX(-30deg); /* Для Opera */  
  -ms-transform: skewX(-30deg); /* Для IE */  
  transform: skewX(-30deg); /* CSS3 */  
  }  
  a {  
  color: #fff; /* Цвет ссылок */  
  display: block; /* Блочный элемент */  
  padding: 5px 15px; /* Поля вокруг текста */  
  text-decoration: none; /* Убираем подчёркивание */  
  -webkit-transform: skewX(30deg); /* Для Safari и Chrome */  
  -moz-transform: skewX(30deg); /* Для Firefox */  
  -o-transform: skewX(30deg); /* Для Opera */  
  -ms-transform: skewX(30deg); /* Для IE */  
  transform: skewX(30deg); /* CSS3 */  
  }  
  li:hover {  
  background: #333; /* Цвет фона при наведении курсора мыши */  
  }
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: SLAVICK
Категория: Скрипты uCoz | Просмотров: 1339 | Добавил: hoster-saitov | Рейтинг: 0.0/0 |
Теги: css, на, Полу-прозрачное, серое, меню
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]