Ефект на замъгляване на изображения в различни браузъри с css, css

Ефектът на CSS размазване е много подобен на филтъра Gaussian Blur. Сега можем да постигнем същия ефект върху уеб страниците.

Обърнете внимание на IE 9+

Когато Microsoft реши да приведе Internet Explorer до съвременните уеб стандарти, това доведе до загуба на много собствени CSS стойности, включително DX филтри, които се поддържаха в този браузър от IE 5.5. За съжаление, те не можаха да бъдат заменени с алтернативи на CSS3, което остави IE9, 10 и 11 в задънена улица. Към момента на писане на тази статия разработчиците, които търсят изображения с точно същите ефекти на размазване, използват скрипта stackblur canvas като решение за различни браузъри.

След това ефектът на размазване, приложен чрез класа:

SVG филтър за размазване

CSS замъгляването на фона в момента работи в Google Chrome, Safari (мобилен и десктоп) и Firefox 35+. За да получите поддръжка за по-стари версии на Firefox, трябва да приложите SVG филтър:

Запазете файла като blur.svg и заменете CSS с:

Поддръжка за по-стари версии на IE

За да получите същия ефект в IE 4 - 9, трябва да използвате стария DX филтър от Microsoft. Нашият клас ще изглежда така:

Изключете ефекта

Ако искате да фокусирате изображението, трябва да зададете стойността му на none следващия път, когато извикате CSS filter blur. В този случай променям поведението при задържане на филтъра чрез :hover :

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

Изрязване на краищата на изображение

За разлика от други филтри,което видяхме досега, CSS ефектът на замъгляване работи и извън границите на елемента, замъглявайки краищата на изображението със заобикалящата го среда. Ако искате изображението да е размазано само отвътре, има няколко възможни метода за това:

1. Ако имате изображение, което има всички ръбове от един и същи цвят, можете да зададете цвета на фона ( background-color ) на или контейнерния елемент от същия цвят;
2. Използвайте свойството клип, за да изрежете краищата на изображение. Клипът винаги се определя в следния ред.

За изображение, което е 367 пиксела широко, 459 пиксела високо и има CSS ефект на размазване от 2 пиксела, клипът ще бъде формулиран така:

Обърнете внимание, че Clip се прилага само за елементи, които имат position: absolute. Ако имате нужда от поддръжка в IE8 и по-стари версии, не забравяйте да премахнете px от края на стойностите.

Опаковайте изображението в контейнерен елемент (напр

Размазан текст

Засега можете също да използвате този филтър за замъгляване на текст.

Тази публикация е превод на статията „Размазване на изображения в различни браузъри с CSS“, изготвена от приятелския екип на проекта Internet technologies.ru

---