От автора: Благодаря CSS3 сильно улучшился дизайн наших проектов и возросли возможности разработки. В этом учебнике я покажу, как сделать прозрачную «стеклянную» панель меню с помощью CSS3.
Демо-пример приведен ниже.
See the Pen Colorful glass menu concept by Creative Punch (@CreativePunch) on CodePen.
Для него мне нужен был фон с некоторыми вариациями. Я взял цветной градиент, но вы можете применить какое-нибудь красивое изображение. В таком «стеклянном» меню однородный цвет фона не будет хорошо смотреться. Я воспользовался сбросом настроек CSS и prefix-free
HTML «стеклянного» меню
HTML нашей «стеклянной» панели будет очень похож на любое другое меню. Мы поместим тэг nav, содержащий список u с ссылками.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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); } |
Давайте немного подробнее рассмотрим код.
1 2 3 4 5 6 |
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). Делаем так, чтобы к верху и низу можно было применить отступ. Если этого не сделать, наши тени будут обрезаны маской.
1 2 3 4 5 6 7 8 |
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 градусов, как здесь:
1 2 3 4 5 |
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
Источник: //creative-punch.net/
Редакция: Команда webformyself.
Комментарии (1)