Gaussian Blur onHover Использование jQuery

Question

Мне интересно, есть ли способ применить gaussian blur к div с помощью jQuery (или CSS, который jQuery может изменить). Я заглянул в blur(), но, по крайней мере, с Safari, похоже, что он не выполняет то, что я ищу. Если возможно, я хочу использовать fadeIn для эффекта, поэтому он постепенно размывается.

Спасибо за помощь!

Answer 1

Помните, что Blur - это когда DOM-элемент, такой как текстовые поля (входы и т. Д.), Теряет фокус и не должен смешиваться с размытием, о котором вы говорите (гауссовское/motion blur).

Для этого нет подходящего кросс-браузерного решения. Вы можете, однако, размыть изображения, используя API, например, тот, который предлагает Бена. Или по using this one.

Возможно, если вы узнаете способ нарисовать содержимое div в холсте HTML5, вы можете применить фильтр Blur с помощью Pixastic?

Answer 2

Здесь не было упомянуто, что мы можем создать реалистичный эффект размытия excellent для текста с использованием CSS3 text-shadow. И (да, конечно!), Мы можем размыть сплошные фоны и границы, используя box-shadow (вы знаете, что вставляются тени и несколько теней).

Так что я надеюсь, что в большинстве случаев вы можете добиться реалистичного эффекта размытия объединения:

1) размытости изображения с помощью холста

2) текста размытость с помощьюtext-shadow

3) сплошной фон и размытость границ с использованиемbox-shadow

4) я забыл что-нибудь еще ....

---

PS: Я считаю, что это не возможно, чтобы написать магический класс, который размывает любой HTML.

ограничения, которые не могут быть преодолены: размыть границы изображения, размытие, встроенные средства массовой

Answer 3

Отъезд blur.js плагин для JQuery: http://blurjs.com, он использует свой алгоритм Stack Blur, который я считаю, в настоящее время самый быстрый способ JavaScript на основе стираться элементы холста: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

Answer 4

filter: blur(10px); 
-webkit-filter: blur(10px); 
-moz-filter: blur(10px); 
-o-filter: blur(10px); 
-ms-filter: blur(10px); 
filter: url(blur.svg#blur); 
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10'); 

содержание blur.svg

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

Подробнее: http://demosthenes.info/blog/534/Crossbrowser-Image-Blur