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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Creative Punch

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

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

Метки: ,

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

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

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