Стеклянное меню на CSS3

Стеклянное меню на CSS3

От автора: Благодаря CSS3 сильно улучшился дизайн наших проектов и возросли возможности разработки. В этом учебнике я покажу, как сделать прозрачную «стеклянную» панель меню с помощью CSS3.

Демо-пример приведен ниже.

See the Pen Colorful glass menu concept by Creative Punch (@CreativePunch) on CodePen.

Для него мне нужен был фон с некоторыми вариациями. Я взял цветной градиент, но вы можете применить какое-нибудь красивое изображение. В таком «стеклянном» меню однородный цвет фона не будет хорошо смотреться. Я воспользовался сбросом настроек CSS и prefix-free

HTML «стеклянного» меню

HTML нашей «стеклянной» панели будет очень похож на любое другое меню. Мы поместим тэг nav, содержащий список u с ссылками.

<nav>
  <ul>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Blog</a>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

CSS «стеклянного» меню

CSS «стеклянного» меню реально прост, но при этом пользуется некоторыми классными свойствами CSS3!

nav {
  max-width: 960px;
  mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
  margin: 0 auto;
  padding: 50px 0;
}

nav ul {
  text-align: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
  width: 100%;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  padding: 20px;
  font-family: "Roboto";
  color: rgba(0, 0, 0, 0.5);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
  font-size: 25px;
  text-decoration: none;
  display: block;
}

nav ul li a:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(0, 0, 0, 0.7);
}

Давайте немного подробнее рассмотрим код.

nav ul {
  text-align: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
  width: 100%;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}

Я назначил стили тэгу ul с помощью белого прозрачного фонового градиента. Также добавил два значения тени блока – одно для внешней, более темной тени, и второе – для внутреннего светлого края. К сожалению, тени блока не растворяются в фоне, как это делает градиент. К счастью, эту проблему можно решить, воспользовавшись свойством mask-image. Мы применяем его к родительскому элементу (в данном случае nav). Делаем так, чтобы к верху и низу можно было применить отступ. Если этого не сделать, наши тени будут обрезаны маской.

nav {
  max-width: 960px;
  /* Изображение-маска создает дополнительное "затухание" тени. Не является необходимостью, но без него нельзя приняться за тени блока. Оно ограничивает наше меню */
  mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
  margin: 0 auto;
  /* Применение для верха и низа padding вместо margin поддерживает видимость тени блока и не поддается влиянию mask-image */
  padding: 50px 0;
}

Также воспользуемся градиентом при событии проведения мышью, только повернем его на 90 градусов, как здесь:

nav ul li a:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(0, 0, 0, 0.7);
}

Так при проведении мышью над пунктом меню добавляется дополнительное «наложение стекла». Вот, в общем-то, и все! Надеюсь, эта идея вдохновит вас на создание красивых «стеклянных» меню.

Автор: Creative Punch

Источник: http://creative-punch.net/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

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

Комментарии (1)

  1. Иван

    Обалденный и простой пример, всегда было интересно как реализовать прозрачное меню.
    Я прикрепил его сверху и задал атрибут fixed.
    Получилось эффектное, стильное меню.
    Позже перекину на сайт, сможете «заценить».
    Как говорится: Спасибо в горле не буль-булькает, тем не менее спасибо!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree