Эффект размытия blur средствами CSS

В интернете много решений, я попробовал, наверное, все :) Основная проблема — не удаётся достичь кросс-браузерности. Как всегда, отличился IE.

Для всех новых браузеров, кроме IE, для включения эффекта размытия достаточно подключить такой стиль :

В данном примере мы размываем изображение фона, используя 5 соседних точек.

Чтобы задействовать эффект в IE, мы начинаем танцы с бубном и хороводы с медведями. Вот такая комбинация работает для нормальных браузеров и IE версий ниже 10:

Как известно, в поздних версиях они (парни из майкрософт) отказались от поддержки собственных извращений. Было бы логично, что они включили поддержку того, что описывает спецификация CSS3, но нет.

А звуки бубна влекут нас дальше. Попробуем задействовать фильтры, используя svg формат. Для этого мы создаём файл filters.svg следующего содержания:

А дальше используем вот такой CSS стиль:

Т.е. мы ссылаемся на svg-файл, уточная id, используемого фильтра. Такой вариант сработал только для FF. Я полагаю, что в IE какая то проблема с определением местоположения файла, так как с SVG форматом он должен дружить очень хорошо. Чтобы убедиться в этом, разместим svg внутри html кода, а картинку внутри svg (яйцо в утке, утка в сундуке….).

Для конкретики, я использовал вот такую картинку с красивым видом на закат над озером.

lakeview-gory-i-pomostok

И конкретно для этой картинки получим следующий кусочек HTML:

Обратите внимание, что контейнер SVG имеет размеры, а картинка использует свойство filter, чтобы сослаться на описанный внутри контейнера эффект blur.

Этот пример у меня сработал под всем набором браузеров (FF, Chrome, Opera и IE 10, IE Edge).

Написать комментарий

Мало букафф? Читайте есчо !

Эффект исчезновения/появления цветности CCS3

Апрель 7, 2017 г.

Среди простых, но эффектных способов оживить картинки на сайте есть следующий визуальный эффект, для которого нужны лишь CSS3 стили. Назовем его - "игра ...

Читать

Делаем эффект параллакса для заднего фона на сайте

Октябрь 19, 2015 г.

Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса. Этот кусочек скрипта привязывает нас к событию onscroll окна. ...

Читать

 

Комментарии к «Эффект размытия blur средствами CSS»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: