Filter blur css кроссбраузерно

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

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

Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже.

HTML

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

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

Обзор

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

Оценка

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

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

Естественно первым делом кинулся проверять кроссбраузерность метода в 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?

Источник

Filter blur css кроссбраузерно

In this post I will show a technique that we use to make cross-browser blur-effect. You can use this solution with any framework as it’s completely library-independent and it actually uses 1 line of JS code.

With the latest versions of top notch browsers like Google Chrome, Firefox and Safari, you can always achieve blur-effect using CSS3 “filter”-property:

.cover-image < filter: blur(12px); > 

IE10+

For previous versions of IE we were able to use DX Filters (alternative to CSS3 filter-property), but starting from IE10 Microsoft removed their support and didn’t present anything instead. That’s why for now the only way to make blur-effect in IE10+ is to use SVG. Here is an example of how it could look like:

svg width="300" height="180"> defs> filter id="blur"> feGaussianBlur stdDeviation="12" /> filter> defs> image xlink:href="" width="300" height="180" filter="url(#blur)"> image> svg> 

Making a demo

The idea here is to render markup for both solutions: CSS3 and SVG, but show only one that actually works in user’s browser.

 div class="cover blur" style="background-image: url()"> div> svg class="blur-ie"> defs> filter id="blur"> feGaussianBlur stdDeviation="12" /> filter> defs> image xlink:href="" width="300" height="180" filter="url(#blur)"> image> svg> 

In order to reduce complexity I used browser-detection in CSS, which is possible because with JS we can store browser’s userAgent as an attribute of html tag and in CSS we can actually use stored information to perform a detection. With this solution you don’t need to change anything in CSS or JS in order to add few more places with blur-filter. Here is an example of what I mean:

document.documentElement.setAttribute("data-agent", navigator.userAgent) 

/* IE10+ detection */ html[data-agent*="Trident"] .blur-wrapper .blur < display: none; > /* IE10+ detection */ html[data-agent*="Trident"] .blur-wrapper .blur-ie < display: block; > 

Advices and warnings

1. If you’re developing a single page application, it might be a good idea to store that HTML somewhere as a template and use it every time when you need it.
2. Be careful using blur on iOS with native scroll, as seems it seriously reduces scrolling FPS.

Hope this post was useful for you. Thanks for reading!

Источник

Кроссбраузерные отражения, свечения и размытия CSS

От автора: отражения способны добавить объектам интересную размерность, ссужая их оттенком реализма и наделяя внутри окружающей среды некоторым контекстом. Давайте рассмотрим достижение эффекта отражения с помощью CSS, а также для сравнения исследуем свечение и кроссбраузерное размытие..

Предпосылки

Изучение данного материала предполагает, что:

— Вы знакомы с селекторами CSS и CSS2;

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

— Если хотите в точности воспроизвести образец, то должны знать, как работает тень блока box-shadow. Она в этом учебнике не является ключевой, так что вам придется постигать ее самим. Если понадобится объяснение, предлагаю вам взглянуть на статью CSS3 vs. Photoshop : закругленные углы и тени блока.

Box-reflect vs. «Свой метод»

Box-reflect — свойство CSS, как раз предназначенное для этой цели: создания отражений. Мы не станем применять box-reflect и mask-image, потому что:

— На момент написания этой статьи оба свойства поддерживаются только webkit (Chrome и Safari).

— Реализация кишит ошибками, если не сказать более.

Когда Microsoft представил свои эффекты фильтра (вспомните эпоху IE 4, вложенные таблицы для разметки и изображения для отражений), устаревшие фильтры не применялись ко всему данному элементу. Думаю, они использовали некий вид граничного блока из верхнего левого к нижнему правому углу элемента, что имело смысл, так как, насколько я знаю, не было способа выйти за пределы этого блока. Однако, так и не исправили это.

Сейчас, в век Chrome 17, webkit сделал ту же ошибку. Рисунки маски, ключ к -webkit-box-reflect, делают некий вид динамического снэпшота внутри граничного блока, вставляют его снизу и меняют непрозрачность. Я постарался восстановить демо-образец с помощью -webkit-box-reflect:

Я его не закончил, но проблема ясна. У отображаемого элемента (будем называть его ETBR — Element to be Reflected) есть border-radius и box-shadow. Тень блока видна внутри, а не снаружи граничного блока.

В моем собственном методе матрица видоизменяется, вставленная тень блока и непрозрачность заменят box-reflect и mask-image. Ограничения:

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

— Встроенная тень блока не влияет на текст отображаемого элемента (ETBR). Это происходит, если цвет текста не такой же, как фоновый цвет поверхности.

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

Выбор…

Кстати говоря, о матрицах и отражениях…

«Выбираете синюю таблетку – я показываю, как воссоздать демо-образец шаг за шагом. Выбираете красную – покажу, как сделать отражения чего угодно и расскажу, где можно купить отражающие тени по очень привлекательной цене»

Проще говоря, некоторые из следующих этапов дополнительные, в зависимости от того, желаете ли вы восстановить демо-образец пиксель за пикселем.

Дополнительно: подготовка

Демо-образец начинается с шаблона HTML5…

Источник

CSS filter Property

Tip: More «Try it Yourself» examples below.

Definition and Usage

The filter property defines visual effects (like blur and saturation) to an element (often ).

Default value:	none
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS3
JavaScript syntax:	object.style.filter=»grayscale(100%)» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- specify the first version that worked with a prefix.

CSS Syntax

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Tip: To use multiple filters, separate each filter with a space (See «More Examples» below).

Filter Functions

Note: The filters that use percentage values (i.e. 75%), also accept the value as decimal (i.e. 0.75).

Filter	Description	Demo
none	Default value. Specifies no effects	Demo ❯
blur(px)	Applies a blur effect to the image. A larger value will create more blur.

Possible values:
h-shadow — Required. Specifies a pixel value for the horizontal shadow. Negative values place the shadow to the left of the image.

v-shadow — Required. Specifies a pixel value for the vertical shadow. Negative values place the shadow above the image.

blur — Optional. This is the third value, and must be in pixels. Adds a blur effect to the shadow. A larger value will create more blur (the shadow becomes bigger and lighter). Negative values are not allowed. If no value is specified, 0 is used (the shadow’s edge is sharp).

spread — Optional. This is the fourth value, and must be in pixels. Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
Note: Chrome, Safari and Opera, and maybe other browsers, do not support this 4th length; it will not render if added.

color — Optional. Adds a color to the shadow. If not specified, the color depends on the browser (often black).

An example of creating a red shadow, which is 8px big both horizontally and vertically, with a blur effect of 10px:

filter: drop-shadow(8px 8px 10px red);

0% (0) is default and represents the original image.
100% will make the image completely gray (used for black and white images).

0% (0) is default and represents the original image.
100% will make the image completely inverted.

0% is completely transparent.
100% (1) is default and represents the original image (no transparency).

0% (0) will make the image completely un-saturated.
100% is default and represents the original image.
Values over 100% provides super-saturated results.

0% (0) is default and represents the original image.
100% will make the image completely sepia.

More Examples

Blur Example

Apply a blur effect to the image:

Источник