Кроссбраузерное размытие фона CSS

По своему действию blur CSS очень похож на фильтр «Размытие по Гауссу». Теперь мы можем достичь такого же эффекта на веб-страницах.

При неправильном использовании размытие может создать у пользователей чувство, будто они посетили ваш сайт после недельного загула, потому что это вызовет у них головную боль. Чтобы это исправить, эффект размытия часто сочетают с переходом, который я также продемонстрирую в этой статье.

Содержание
Кроссбраузерное выравнивание по центру

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

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

Код HTML:

<img src="pakistani-woman.jpg" alt=" Three-quarter profile photograph of Pakistani woman in black dupatta" class="blur">
Размытие отдельных областей изображения в CSS

Затем эффект размытия, примененный через класс:

img.blur {
	width:367;
	height:459px;
	-webkit-filter: blur(3px);
	filter: blur(3px);
}

SVG фильтр размытия

На данный момент CSS blur background работает в Google Chrome, Safari (мобильной и настольной версиях) и Firefox 35+. Для получения поддержки более ранних версий Firefox, нужно применить фильтр SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
	<filter id="blur">
		<feGaussianBlur stdDeviation="3" />
	</filter>
</svg>

Сохраните файл под названием blur.svg, а CSS замените на:

img.blur {
	width:367; height:459px;
	filter: url(blur.svg#blur);
	-webkit-filter: blur(3px);
	filter: blur(3px);
}

Поддержка старых версий IE

Для получения такого же эффекта в IE 4 - 9, нужно использовать старый фильтр DX от Microsoft. Наш класс будет выглядеть следующим образом:

img.blur {
	width:367;
	height:459px;
	filter: url(blur.svg#blur);
	-webkit-filter: blur(3px);
	filter: blur(3px);
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}
Кроссбраузерное выравнивание по центру (table height=100%)

Выключение эффекта

Если хотите сфокусировать изображение, нужно при следующем вызове CSS filter blur установить для него значение none. В данном случае я изменяю поведение фильтра при наведении курсора мыши через :hover:

img.blur:focus, img.blur:hover {
	-webkit-filter: blur(0px);
	filter: blur(0px);
	filter: none;
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
}

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

Обрезка краев изображения

В отличие от других фильтров, которые мы пока что успели рассмотреть, CSS blur effect действует и за пределами границ элемента, размывая края изображения с его окружением. Если нужно, чтобы изображение было размыто только внутри, для этого есть несколько возможных методов:

  1. Если у вас изображение, у которого все края одного цвета, можно установить цвет фона (background-color) в <body> или элемент-контейнер такого же цвета;
  2. Используйте свойство clip, чтобы обрезать края изображения. Clip всегда указывается в следующем порядке.
clip: rect( top, offset of right clip from left side, offset of bottom from top, left)

Для изображения, размером 367 пикселей в ширину, 459 пикселей в высоту и эффект blur CSS 2 пикселя, Clip будет «сформулирован» так:

clip: rect(2px,365px,457px,2px);

Обратите внимание, что Clip применяется только к элементам, имеющим position: absolute. Если нужно получить поддержку в IE8 и более ранних версиях, не забудьте убрать px на конце значений.

Оберните изображение в элемент-контейнер (например <DIV>), который немного меньше, чем изображение, примените overflow: hidden для внешнего элемента и переместите изображение влево и немного вверх, чтобы устранить видимое размытие на тех краях.

Размытый текст

Этот фильтр можете пока использовать и для размытия текста.

Пожалуйста, оставьте ваши мнения по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, отклики, лайки, дизлайки, подписки!