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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

Автор: Creative Punch

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: ,

Похожие статьи:

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

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

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

  1. Иван

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree