Розмиття меню за допомогою CSS3 переходів

19

Від автора: Зараз ми можемо робити так багато класних речей завдяки додатковим властивостям і можливостям, які надає нам CSS3. І сьогодні я покажу вам, як можна поекспериментувати з текстовими тінями і переходами для досягнення ефекту розмиття, який ми застосуємо до елементів меню при наведенні. Основна ідея полягає в тому, щоб розмити всі елементи меню, за винятком того, на який наведено курсор миші.

Розмиття меню за допомогою CSS3 переходівРозмиття меню за допомогою CSS3 переходів

Зображення в демо-прикладах, зроблені чудовим фотографом Марком Себастьяном (Mark Sebastian) і можуть бути використані за ліцензією «Атрибуція на тих же умовах» (Attribution-ShareAlike 2.0 Generic (CC BY-SA 2.0) License). Відвідайте сайт Flickr або персональний сайт Марка, щоб побачити чудові фотографії.

Будь ласка, зверніть увагу на те, що розглянуті приклади будуть працювати тільки в сучасних браузерах, і, на жаль, Internet Explorer досі не відноситься до даної категорії, т. к. не підтримує переходи (а також багато інших запропоновані специфікації CSS3 властивості, які підтримуються в інших браузерах). Він також не підтримує текстові тіні, тому я додала додаткову таблицю стилів для IE, яка дозволить, принаймні, відобразити елементи меню.

Розмітка

Давайте для початку створимо HTML структуру для нашого меню. Ми додамо її в контейнер з фіксованою шириною. Меню буде виглядати наступним чином:

  • About
  • Illustrations
  • Photography
  • Web Design
  • Personal Projects
  • Contact

А тепер ми додамо трохи стилів!

CSS

У більшості наших прикладів будуть використовуватися однакові стилі для елемента ul і для самих елементів списку. Змінюватися будуть тільки посилання. Отже, ось як виглядають звичайні стилі для неупорядкованого списку:

.bmenu{
padding: 0px;
margin: 0 0 10px 0;
position: relative;
}
.bmenu li{
font-size: 50px;
display: block;
}

А зараз давайте подивимося на кожен з семи прикладів окремо.

Приклад № 1

Розмиття меню за допомогою CSS3 переходів

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

.bmenu li a{
color: transparent;
display: block;
text-transform: uppercase;
text-shadow: 0px 0px 5px #fff;
letter-spacing: 1px;
-webkit-transition: all 0.3 s ease-in-out;
-moz-transition: all 0.3 s ease-in-out;
-o-transition: all 0.3 s ease-in-out;
-ms-transition: all 0.3 s ease-in-out;
transition: all 0.3 s ease-in-out;
}

Нам потрібно, щоб певна посилання при наведенні ставала «чіткою», а решта — розмитими. Зараз ми не можемо в CSS прописати правило «при наведенні на конкретний елемент потрібно робити те-то для всіх інших споріднених елементів», тому що споріднений селектор — це не зовсім споріднений селектор. Цей селектор просто вибирає всі прилеглі елементи, що мають спільного батька в HTML.

У будь-якому випадку ми можемо трохи схитрувати. Оскільки всі пункти меню у нас є блочними елементами, ми можемо просто вказати, що потрібно зробити все розмитим при наведенні на все меню (ненумерованний список), а потім при наведенні на конкретний елемент зробити його чітким:

.bmenu:hover li a{
text-shadow: 0px 0px 5px #0d1a3a;
}
.bmenu li a:hover{
color: #fff;
text-shadow: 0px 0px 1px #fff;
padding-left: 10px;
}

Додаючи лівий відступ, ми тим самим створюємо невелику анімацію для поточного елемента, який буде зрушуватися вправо при наведенні на нього курсором миші.

Приклад № 2

Розмиття меню за допомогою CSS3 переходів

У другому прикладі ми спочатку зробимо елементи меню трохи скошеними. А допоможе нам у цьому властивість 2D трансформацій під назвою skew. Значенням буде -12 градусів, яке змінює кут скосу (нахилу) по осі X. В посилань буде напівпрозорий фон, який ми отримаємо завдяки використанню значення в rgba. А також ми додамо трохи прозору текстову тінь, теж використовуючи rgba:

.bmenu li a{
display: block;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(89,22,20,0.3);
color: #581514;
padding: 5px 20px;
margin: 2px;
background: rgba(255,255,255,0.2);
letter-spacing: 1px;
-webkit-transform: skew(-12deg);
-moz-transform: skew(-12deg);
-o-transform: skew(-12deg);
-ms-transform: skew(-12deg);
transform: skew(-12deg);
-webkit-transition: all 0.4 s ease-in-out;
-moz-transition: all 0.4 s ease-in-out;
-o-transition: all 0.4 s ease-in-out;
-ms-transition: all 0.4 s ease-in-out;
transition: all 0.4 s ease-in-out;
}

При наведенні на меню ми змінимо кут скосу у елементів на 0 і зробимо так, щоб вони стали розмитими на напівпрозорому тлі. А поточний елемент не буде мати ніякого фону при наведенні:

.bmenu:hover li a{
color: transparent;
text-shadow: 0px 0px 10px #fff;
background: rgba(88,22,22,0.2);
-webkit-transform: skew(0deg);
-moz-transform: skew(0deg);
-o-transform: skew(0deg);
-ms-transform: skew(0deg);
transform: skew(0deg);
}
.bmenu li a:hover{
background: transparent;
text-shadow: 1px 1px 10px rgba(89,22,20,0.6);
color: #581514;
}

Приклад № 3

Розмиття меню за допомогою CSS3 переходів

У третьому прикладі ми трохи пограємо з розмірами елементів. Спочатку ми їх зменшимо і розмиємо. Ми будемо використовувати досить повільний лінійний перехід:

.bmenu li a{
white-space: nowrap;
color: transparent;
display: block;
text-transform: uppercase;
text-align: center;
text-shadow: 6px 0px 0px #fff;
letter-spacing: 1px;
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.6 s linear;
-moz-transition: all 0.6 s linear;
-o-transition: all 0.6 s linear;
-ms-transition: all 0.6 s linear;
transition: all 0.6 s linear;
}

При наведенні на меню ми розмиємо елементи ще більше, а поточний елемент буде при наведенні стає чітким і відновлюватися до вихідного розміру:

.bmenu:hover li a{
text-shadow: 0px 0px 15px #fff;
}
.bmenu li a:hover{
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}

Приклад № 4

Розмиття меню за допомогою CSS3 переходів

У даному варіанті ми задамо для посилань напівпрозорий чорний фон і контрастний помаранчевий колір для тексту. Тут ми будемо використовувати для переходу лінійну тимчасову функцію:

.bmenu li a{
display: block;
text-transform: uppercase;
text-shadow: 0px 0px 2px #eeb213;
color: #eeb213;
padding: 5px 20px;
margin: 2px;
background: rgba(0,0,0,0.7);
letter-spacing: 1px;
-webkit-transition: all 0.2 s linear;
-moz-transition: all 0.2 s linear;
-o-transition: all 0.2 s linear;
-ms-transition: all 0.2 s linear;
transition: all 0.2 s linear;
}

При наведенні нам потрібно, щоб пункти меню ставали розмитими, а їх фони — більш прозорими. Лише один елемент, на який наведено курсор миші, буде стає більш непрозорим:

.bmenu:hover li a{
text-shadow: 0px 0px 10px #eeb213;
color: transparent;
background: rgba(0,0,0,0.2);
}
.bmenu li a:hover{
background: rgba(0,0,0,1.0);
text-shadow: 0px 0px 1px #eeb213;
}

Приклад № 5

Розмиття меню за допомогою CSS3 переходів

У п’ятому прикладі будуть застосовані витончені ефекти: ми будемо використовувати тільки білий колір для текстових тіней і самого тексту і трохи розмиємо елементи:

.bmenu li a{
color: transparent;
display: block;
text-transform: uppercase;
text-shadow: 4px 0px 0px #fff;
letter-spacing: 1px;
-webkit-transition: all 0.2 s ease-in-out;
-moz-transition: all 0.2 s ease-in-out;
-o-transition: all 0.2 s ease-in-out;
-ms-transition: all 0.2 s ease-in-out;
transition: all 0.2 s ease-in-out;
}

При наведенні ми трохи посилимо розмиття і зробимо більш чітким поточний елемент, зсунувши його злегка убік при наведенні на нього курсором миші:

.bmenu:hover li a{
text-shadow: 6px 0px 0px #fff;
}
.bmenu li a:hover{
color: #fff;
text-shadow: 0px 0px 1px #fff;
padding-left: 10px;
}

Приклад № 6

Розмиття меню за допомогою CSS3 переходів

У цьому прикладі ми задамо для елементів напівпрозорий білий фон і спочатку залишимо їх чіткими:

.bmenu li a{
white-space: nowrap;
display: block;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(71,80,23,0.3);
color: #fff;
padding: 5px 20px;
margin: 2px;
background: rgba(255,255,255,0.2);
letter-spacing: 1px;
-webkit-transition: all 0.4 s ease-in-out;
-moz-transition: all 0.4 s ease-in-out;
-o-transition: all 0.4 s ease-in-out;
-ms-transition: all 0.4 s ease-in-out;
transition: all 0.4 s ease-in-out;
}

Ми хочемо додати округлені кути для першого і останнього елемента, щоб все меню виглядало лаконічніше, як єдине ціле. Для цього ми будемо використовувати селектори псевдо-елементів first-child і last-child:

.bmenu li:first-child a{
-webkit-border-radius: 15px 15px 0px 0px;
-moz-border-radius: 15px 15px 0px 0px;
border-radius: 15px 15px 0px 0px;
}
.bmenu li:last-child a{
-webkit-border-radius: 0px 0px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
border-radius: 0px 0px 15px 15px;
}

При наведенні нам потрібно, щоб елементи були розмиті, а у поточного елемента змінювався б при наведенні колір і фон ставав би прозорим:

.bmenu:hover li a{
text-shadow: 0px 0px 10px #fff;
color: transparent;
}
.bmenu li a:hover{
background: transparent;
text-shadow: 1px 1px 10px rgba(71,80,23,0.6);
color: #c4d85a;
}

Приклад № 7

Розмиття меню за допомогою CSS3 переходів

І в заключному прикладі я хотіла зробити так, щоб все меню виглядало, як коло, шляхом додавання властивості border-radius зі значенням рівним половині ширини/висоти меню:

.bmenu{
padding: 50px 0px;
margin: 0 auto;
position: relative;
background: rgba(0,0,0,0.7);
width: 500px;
height: 400px;
-webkit-border-radius: 250px;
-moz-border-radius: 250px;
border-radius: 250px;
-webkit-transition: background-color 0.5 s ease-in-out;
-moz-transition: background-color 0.5 s ease-in-out;
-o-transition: background-color 0.5 s ease-in-out;
-ms-transition: background-color 0.5 s ease-in-out;
transition: background-color 0.5 s ease-in-out;
}

Ми додамо тут переходи, т. к. нам потрібно створити анімацію для фону при входженні курсору миші на область меню. Ми зробимо фон більш прозорим, використовуючи rgba:

.bmenu:hover{
background: rgba(0,0,0,0.2);
}

Ми також трохи підкоригуємо розмір шрифту і висоту рядка елемента списку:

.bmenu li{
font-size: 40px;
display: block;
line-height: 66px;
}

Елементи будуть зменшені в розмірах і розмиті:

.bmenu li a{
white-space: nowrap;
color: transparent;
display: block;
text-align: center;
text-transform: uppercase;
text-shadow: 0px 0px 3px #fff;
letter-spacing: 1px;
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: all 0.4 s linear;
-moz-transition: all 0.4 s linear;
-o-transition: all 0.4 s linear;
-ms-transition: all 0.4 s linear;
transition: all 0.4 s linear;
}

При наведенні на меню елементи будуть ставати більш розмитими, а для поточного пункту меню, який стає при наведенні чітким і збільшуватися до початкового розміру, ми також поставимо красивий колір фону:

.bmenu:hover li a{
text-shadow: 0px 0px 10px #fff;
}
.bmenu li a:hover{
text-shadow: none;
color: #fff;
background: rgba(129,6,29,0.8);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}

Пам’ятайте про те, що IE псує нам весело, але якщо ви хочете спробувати свою удачу в використанні власних тіней браузера IE, то ознайомтеся з наступними матеріалами і починайте експериментувати:

Розмита текстова тінь з допомогою CSS в IE — Частина I

Довідкова інформація за візуальним фільтрів і переходів в IE: Статичні фільтри

От і все! Який з прикладів вам сподобався найбільше? Я сподіваюся, що вам сподобались наші експерименти, це надихне вас на створення чого-небудь свого!