В данном примере реализован кроссбраузерный эффект размытия(blur) изображения. Эффект достигается благодаря фильтру blur, который устанавливает размытие элемента, словно он находится не в фокусе.
Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже.
Демо СкачатьHTML
<img src=http://farm1.staticflickr.com/114/271078402_ad78f9dc4b.jpg alt="Pakistani Woman"><img src=http://farm1.staticflickr.com/114/271078402_ad78f9dc4b.jpg alt="Pakistani Woman" class=blur> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <feGaussianBlur stdDeviation="3" /> </filter> </svg>
CSS
body { background: #000; } img { width:367; height:459px; } img.blur { -webkit-filter: url(#blur); filter: url(#blur); -webkit-filter: blur(3px); filter: blur(3px); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3'); -webkit-transition: 1s -webkit-filter linear; transition: 1s filter linear; } img.blur:hover { filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); -webkit-filter: blur(0px); filter: blur(0px); }
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
Естественно первым делом кинулся проверять кроссбраузерность метода в IE, и, как всегда, облом. Не работает метод в Эксплорере, почему? А так хотелось….
В IE9 фильтр работает, за более ранние версии ничего сказать не могу… В IE отвечающий за размытие параметр — filter: progid:DXImageTransform.Microsoft.Blur(parameters);
Тут можно более подробно почитать за Blur Filter в Internet Explorer.
Да, в статье все красиво написано, у Вас в примере все правильно написано, но в IE 10 (Win 8 x64) пример, однако, не работает.
Вот скриншот
http://i072.radikal.ru/1411/82/d9cd02cc5e98.jpg
Я не вредничаю, а только лишь хочу добиться кроссбраузерности, так как эффект достоен внимания и хочется его использовать.
И точно, в IE9 работало лишь потому, что в IE10 уже фильтры DX больше не поддерживаются.
Пришлось чуток поморочить голову, но не зря. Решение для достижения эффекта размытия в IE10 нашел в использовании SVG фильтров.
Демо пример (скрин не прилагаю) — http://jsfiddle.net/s9ek8bf6/
Возможно Вам будет интересно глянуть и на такое решение, ну и возможно поможет в дальнейшем еще и такой пример.
Спасибо за комментарии и замечания, этот момент действительно достоин внимания.
🙂 Действительно работает. Данная картинка, я так понял, обернута в svg. Вот только как теперь к данным элементам можно променять эффект hover?
Blur-эффект для IE 10 с hover-эффектом — http://jsfiddle.net/s9ek8bf6/3/.
С этого хоть отдельную статью уже писать можно 🙂
Спасибо за статью,