Главная » Статьи » Меню

ПолуПрозрачное Меню На чистом CSS by slavick


Посмотрите ДЕМО

В то место где Будет Меню
Код
<ul>
  <li><a href="1.html">Джокер</a></li>
  <li><a href="2.html">Пазузу</a></li>
  <li><a href="3.html">Палпатин</a></li>
  <li><a href="4.html">Доктор Дум</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; /* Цвет фона при наведении курсора мыши */
  }
Категория: Меню | Добавил: slavick (22.08.2013)
Просмотров: 191 | Теги: на, By, меню, чистом, Полу, Прозрачное, slavick, css | Рейтинг: 1.0/3
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]