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

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

В последнее время как то кучно пошло у меня использование CCS3 анимации. Продолжаю делиться шаблонами. Сегодня рассмотрим анимацию, которая, запускаясь при наведении, имитирует дрожание элемента. Её можно подключать и в других случаях (не только при наведении). ...

Читать

Делаем треугольник на CSS с помощью border

Апрель 19, 2016 г.

Мы не будем углубляться в CSS3, где есть такое свойство как shape-outside, т.к. с его помощью легко можно сделать из обычного слоя любой многоугольник: ...

Читать

 

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

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



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