ZorNet.Ru — сайт для вебмастера » Меню для сайта » Полупрозрачное серое меню сайта на CSS

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

Простое по функциям горизонтальное меню, которое идет в темно прозрачном оттенке, где применение его обширное по тематике площадки. Эффект при наведение присутствует, также в полном объеме он построен на CSS, где веб мастер может отредактировать, так как он видит на своем ресурсе. Не скажу, что его можно поставить главным, но разве если у вас по фиксированной ширине не большой блог. Или больше всего подойдет под такую тема как портфолио или различные услуги.

HTML

Код

<ul>
  <li><a href="http://zornet.ru/">Скрипты</a></li>
  <li><a href="http://zornet.ru/">Шаблон</a></li>
  <li><a href="http://zornet.ru/">ZORNET.RU</a></li>
  <li><a href="http://zornet.ru/">Дизайн</a></li>
  </ul>

CSS

Код

li {
  display: inline-block; /* Строчно-блочные элементы */
  background: rgba(27, 25, 25, 0.7); /* Цвет фона */
  margin-right: -5px; /* Расстояние между пунктами меню */
  -webkit-transform: skewX(-29deg); /* Для Safari и Chrome */
  -moz-transform: skewX(-29deg); /* Для Firefox */
  -o-transform: skewX(-29deg); /* Для Opera */
  -ms-transform: skewX(-29deg); /* Для IE */
  transform: skewX(-29deg); /* 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; /* Цвет фона при наведении курсора мыши */
  }

Демонстрация

27 Ноября 2017 Просмотров: 1534 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0