Эффект размытия 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).

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

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

Анимация ожидания загрузки/обновления, используя CSS3

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

Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...

Читать

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

Апрель 7, 2017 г.

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

Читать

 

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

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



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