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

21

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

Демо-приклад наведено нижче.

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

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

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

HTML нашої «скляної» панелі буде дуже схожий на будь-яке інше меню. Ми помістимо тег nav, яка містить список u з посиланнями.

  • Home
  • Blog

  • About
  • Contact

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);
}

Так при проведенні мишею над пунктом меню додається додаткове «накладення скла». Ось, загалом-то, і все! Сподіваюся, ця ідея надихне вас на створення красивих «скляних» меню.