Кросбраузерний ефект розмиття зображення за допомогою CSS, CSS

За своєю дією blur CSS дуже схожий на фільтр "Розмиття по Гаусс". Тепер ми можемо досягти такого ж ефекту на веб-сторінках.

Зверніть увагу на IE 9+

Коли Microsoft вирішили довести Internet Explorer до сучасних веб-стандартів, це призвело до втрати багатьох власних CSS значень , включаючи фільтри DX , які підтримувалися в цьому браузері, починаючи з IE 5.5 . На жаль, їх не можна було замінити альтернативними з CSS3, що поставило IE9, 10 і 11 у безвихідь. На момент написання цієї статті розробники, яким потрібні зображення з таким самим ефектом розмиттям, використовують як кросбраузерне рішення скрипт StackBlur , що працює на основі canvas .

Потім ефект розмиття, застосований через клас:

SVG фільтр розмиття

На даний момент CSS blur background працює в Google Chrome, Safari (мобільній та настільній версіях) та Firefox 35+. Для отримання більш ранніх версій Firefox потрібно застосувати фільтр SVG :

Збережіть файл під назвою blur.svg , а CSS замініть на:

Підтримка старих версій IE

Для отримання такого ж ефекту в IE 4 - 9 потрібно використовувати старий фільтр DX від Microsoft . Наш клас буде виглядати так:

Вимкнення ефекту

Якщо хочете сфокусувати зображення, потрібно під час наступного виклику CSS filter blur встановити для нього значення none. У цьому випадку я зміню поведінку фільтра при наведенні курсору миші через :hover :

При наведенні курсору в браузері (крім IE) ви побачите, що розмите зображення поступово стає різкіше завдяки CSS-переходу.

Обрізання країв зображення

На відміну від інших фільтрів,які ми поки що встигли розглянути, CSS blur effect діє і поза межами елемента, розмиваючи краю зображення з його оточенням. Якщо потрібно, щоб зображення було розмито лише всередині, для цього є кілька можливих методів:

Якщо у вас зображення, у якого всі краї одного кольору, можна встановити колір фону (background-color) або елемент-контейнер такого ж кольору;
Використовуйте clip , щоб обрізати краї зображення. Clip завжди вказується у такому порядку.

Для зображення, розміром 367 пікселів завширшки, 459 пікселів у висоту та ефект blur CSS 2 пікселя, Clip буде «сформульований» так:

Зверніть увагу, що Clip застосовується лише до елементів, що мають position: absolute . Якщо потрібно отримати підтримку в IE8 і раніше версіях, не забудьте прибрати px на кінці значень.

Поверніть зображення в елемент-контейнер (наприклад

Розмитий текст

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

Дана публікація є перекладом статті « Cross-browser Image Blur with CSS » , підготовленої дружньою командою проекту Інтернет-технології.