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

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

Читать

Виджетик для сравнения двух картинок

Ноябрь 1, 2015 г.

Этот виджет может найти применение для сайта дизайнера или фотографа, которые занимаются реставрацией или обработкой изображений. Наверное, приложений ...

Читать

 

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

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



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