Просунуті CSS фільтри

Я не зміг коротко перекласти на українську backdrop і background, зберігши смислову різницю між ними, тому поясню зараз: backdrop — те, що знаходиться за елементом, і може бути видно через нього, обрізане по його рамці; background - теж фон, але є частиною елемента, до нього і належить властивість background.

Повернімося до 2011 року, браузери почали вводити CSS фільтри зі специфікацій. У цей час підтримувалися переважно SVG фільтри, а Firefox був єдиним браузером, який міг застосувати їх до HTML контенту (в основному, нічого не змінилося).

CSS фільтри такі як blur(), contrast() або grayscale() — чудовий додаток до CSS, незважаючи на те, що SVG може дозволити зробити чудові речі. Більше дізнатися про них можна на безлічі ресурсів.

Сьогодні я хочу піти трохи далі, показавши нові можливості CSS.

backdrop-filter

У першу чергу - це backdrop-filter властивість, визначена в Filter Effect Level 2. Воно дозволяє застосовувати фільтри до фону (backdrop) елемента, а не до фону (background).

З цією властивістю ви можете отримати ефекти, яких досягти було важко. Найбанальне — розмиття як у iOS:

Кожен елемент за header`ом розмитий на 5px. Це так просто.

background

Живий приклад на JSBin (лише Safari 9).

У демо, я використав для того, щоб застосувати backdrop-filter разом з невеликими коригуваннями (background-color та позиціонування), щоб зберегти читання header`а в браузерах, що не підтримуються.

backdrop-filter може підвищити читаність тексту, накладеного поверх зображення:

Safari

Живий приклад на JSBin (лише Safari 9).

Комбінуючи кілька фільтрів, ви можете зробити прості графічні ефекти, близькі дотим, що пропонує CSS blend-modes:

Safari

Живий приклад на JSBin (лише Safari 9).

Декілька речей, які треба знати:

  • фон елемента, до якого застосований backdrop-filter, має бути напівпрозорим. Якщо ні, то ви ніколи не побачите ефекту
  • є баг при комбінуванні backdrop-filter із будь-якою властивістю, що обрізає елемент (border-radius, mask, clip-path, etc). Це означає, що просунуті ефекти поки що неможливі
  • backdrop-filter створює новий контекст накладання, як opacity
  • backdrop-filter можна анімувати
  • ця властивість вимагає префікс: -webkit-backdrop-filter
  • CanIUse

Іноді треба накласти фільтр ні на елемент, ні на фон (backdrop). Ви просто хочете застосувати його до тла (background), але властивості background-filter немає. Ось тут може стати в нагоді функція filter(), не слід плутати з властивістю filter. Функція приймає два параметри: зображення та фільтр, повертає нове зображення. Це зображення можна використовувати з будь-якою властивістю CSS, що підтримує зображення. Якось так:

В результаті, тепер можна застосовувати фільтри для зображень, перед використанням як фон. Ви можете подумати, що вона варіація background-filter (або background-opacity, background-blur), але вона набагато потужніша.

фільтри

Живий приклад на JSBin (лише Safari 9).

Хороша новина в тому, що навіть без згадки Apple вона доступна в Safari 9.

Safari

Я з нетерпінням чекаю, коли в браузерах запровадять ці фічі. SVG теж може це робити, але такі ж круті ефекти можна легко зробити з CSS. З минулого року багато суперечок навколо CSS були сфокусовані на архітектурі, методології, інструментах. Добре пам'ятати про те, що CSS так само і прографічний дизайн (разом з SVG).

OK, зараз підтримка мінімальна, але це стане можливим на мільйонах iPhone`ів та iPad`ів до кінця року.

Хардкорна конфа за С++. Ми запрошуємо лише профі.