Домой / Рецепты CSS / Кроссбраузерный эффект размытия(blur) изображения в css
Кроссбраузерный эффект размытия(blur) изображения в css

Кроссбраузерный эффект размытия(blur) изображения в css

В данном примере реализован кроссбраузерный эффект размытия(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);
} 


В данном примере реализован кроссбраузерный эффект размытия(blur) изображения. Эффект достигается благодаря фильтру blur, который устанавливает размытие элемента, словно он находится не в фокусе. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.49 ( 24 голосов )
100

7 комментариев

  1. Аватар

    Естественно первым делом кинулся проверять кроссбраузерность метода в 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
        Я не вредничаю, а только лишь хочу добиться кроссбраузерности, так как эффект достоен внимания и хочется его использовать.

  2. Аватар

    🙂 Действительно работает. Данная картинка, я так понял, обернута в svg. Вот только как теперь к данным элементам можно променять эффект hover?

  3. Аватар

    Спасибо за статью,

Оставить комментарий

Ваш email не будет опубликован.

*