Ефект «матового скла» за допомогою фільтрів CSS

2

Від автора: Цей пост написаний Беаром Тревісом (BearTravis), інженером веб-стандартів Adobe. Мені дуже подобається, як Adobe розвиває Мережу за допомогою нових дизайнерських можливостей, і робить це дуже відповідально. Відмінний приклад цього– фільтри CSS. Adobe розуміють їх важливість з-за того, що зробив цю доріжку Photoshop. Їх впровадили в Веб з нормальним синтаксисом і допомогли реалізувати як специфікацію, так і браузер. Тепер ми бачимо ці фільтри в стабільних браузерах, і вони рекомендовані до використання в адаптивному прогресивному поліпшення. Алілуя. Пропонуємо вашій увазі Беарас підручник на цю тему.

Так як в редакторах зображень вже деякий час існували фільтри начебто контрастності (contrast), насиченості (saturate) иразмытия (blur), то для їх перенесення в Веб історично була потрібна доставка зображень з вже використовуваними фільтрами. По мірі включення цих фільтрів браузерами як частини веб-платформи ми змогли почати розбирати складні візуальні ефекти на складові частини і реалізувати їх в Мережі. У цій статті вивчається один з таких ефектів — «матового скла» — і те, як фільтри CSS забезпечують більш чисте і гнучке рішення, ніж статичні зображення.

Стара школа: ефект «матового скла» з допомогою зображень

Ефект «матовогостекла» деякий час вже вживається в Інтернеті; ми навіть спостерігали його тут, на CSS-Tricks, році так в 2008. Головна ідея цього ефекту досить проста: потрібно розмити і підсвітити область за перекривають вмістом. Вміст стає більш контрастним по відношенню до фону, але все одно приблизно зрозуміло, що за ним відбувається. Встатьена CSS-Tricks використовуються два зображення: стандартна версія і матова версія (розмита з допомогою білого відтінку). У нашому прикладі картка зсувається вгору і відкриває вміст, матируя при цьому фон.

HTML

Розмітка порівняно проста. Унасвсегоодин article, що містить контент.

Pelican

additional content…

CSS

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

html, body, .glass {
width: 100%;
height: 100%;
overflow: hidden;
}
body{
background-image:url(‘pelican.jpg’);
background-size: cover;
}
.glass::before{
display: block;
width: 100%;
height: 100%;
background-image:url(‘pelican-blurry.jpg’);
background-size: cover;
content:’ ‘;
opacity: 0.4;
}
.glass {
background-color: white;

Вищенаведений CSS створить розмите і підсвічене накладення. Так само нам знадобиться зрушити його до низу сторінки, залишивши рівно стільки місця, щоб був видний текст заголовка. Так як розмите зображення є дочірнім елементом оверлея, то, крім того, доведеться змістити його назад вгору до протилежної величиною для того, щоб воно залишалося вирівняним по фону body. Так як в демо прикладі вживаються переходи, я вирішив скористатися перетвореннями CSS, а не властивість background-attachment, тому що перетворення CSS можуть прискорюватися апаратними засобами.

.glass.down{
transform:translateY(100%) translateY(-7rem);
}
.glass.down::before{
transform:translateY(-100%) translateY(7rem);
}
.glass.up .glass.up::before{
transform:translateY(0);
}

Примітки

Якщо хочете ще краще розібратися в даній схемі, то я побудував детальну версію ефекту. Вищенаведена техніка досить прямолінійна і підкріплена потужної браузерною підтримкою. Хоча я трохи пожвавив демо приклад переходами, у всіх інших потрібних властивостей – генерованого контенту, непрозорості, перетворень і background-size – є солідна браузерна підтримка аж до IE 9 (за винятком OperaMini).

Нова школа: «матове скло» за допомогою фільтрів

Методика дублювання зображень потребує підтримки розмитого зображення поряд з вихідним оригіналом, що може виявитися проблемним, якщо вам потрібно заново застосовувати цей ефект до безлічі зображень. Наприклад, адаптивного дизайну при різних розмірах екрану потрібно підкачка різних зображень. Або ж шаблонні розмітки можуть постачати їх динамічно (наприклад, різні зображення заголовка для окремих постів блогу). У подібних випадках слід генерувати цей ефект, використовуючи тільки початкове зображення. Зрештою, ми ж лише розмиваємо його.

Ось тут найзручніше скористатися фільтрами CSS. Вони дають можливість застосовувати розмиття вже у браузері за допомогою властивості CSS filter.

CSS

До накладенню «матового скла» можна модифікувати CSS так, щоб це виявилося вихідне зображення з застосованим до нього фільтр blur.

.glass::before{
background-image:url(‘pelican-blurry.jpg’);
}
.glass::before{
background-image:url(‘pelican.jpg’);
filter:blur(5px);
}

Підводні камені

Раз плюнути, правда? На жаль, фільтри CSS занадто новомодний винахід. Це означає, що їм можуть знадобитися вендорные префікси, а їх браузерна підтримка не виявиться загальної. Однак у фільтрів більш довга історія взаємин з SVG і застосування фільтрів SVG на HTML-вмісту за допомогою CSS підтримується браузерами набагато краще. Їх можна легко додавати в якості альтернативного варіанту там, де фільтри CSS не підтримуються. Насправді вищенаведений демопример працює саме так.

Щоб додати фільтр SVG, ми включимо в розмітку трохи вбудованого SVG і звернемося до фільтру за допомогою url(). Професійний натяк: альтернатива цього варіанту – закодувати фільтр SVG і звернутися як до dataurl, але такий формат трохи складніше читається в статті.

.glass::before{
background-image:url(‘pelican.jpg’);
/* Альтернатива фільтрів SVG */
filter:url(‘#blur’);
filter: blur(5px);
}

Може виявитися, що браузером не підтримуються ні фільтри CSS, ні SVG. В такому випадку користувач побачить текст на підсвіченому (подкрашенном, але не розмитому) тлі, що теж виглядає не надто убого.

Висновок

Фільтри дозволяють застосовувати у браузері такі ефекти, які до того були можливі тільки в редакторі зображень. Як стилю елемента, а не відображуваного зображення, їх простіше редагувати і повторно використовувати. Фільтри CSS застосовуються у поточних версіях Chrome, Safari і Opera, і активно розробляються в Firefox (про Internet Explore поки що помовчимо). Трохи подбавши про альтернативний поведінці, можна почати застосовувати їх вже зараз.