Эффект HTML5 GaussianBlur (также известный как «аэровокно»)

Question

есть кто-то, кто знает, как воспроизвести эффект размытия по Гауссу на всем, что находится за тегом div?
Я много гуглил в течение нескольких месяцев, и обнаружил только эффект, который воспроизводится на изображениях с утилитами canvas .. но это не то, что я ищу.
Кроме того, плагин AeroWindow для jQuery - не тот ответ, который я хотел бы получить, потому что это просто эффект непрозрачности с фоном.

Спасибо, ребята.

Answer 1

Насколько я понимаю, есть некоторые грохоты, что будущая спецификация CSS будет включать в себя эффект размытия. Тем не менее, это еще нигде не доступно, даже разработчики версий основных браузеров; в настоящий момент это действительно просто фаза открытого обсуждения.

В настоящее время единственный способ получить эффект размытия в CSS - это использовать box-shadow или text-shadow. Они не направлены на то, что вы пытаетесь сделать. Однако я могу представить, что можно было бы использовать box-shadow для достижения чего-то похожего на то, что вам нужно.

Я попробовал это; вот JSFiddle из того, что мне удалось сделать: http://jsfiddle.net/Vkuks/

Для справки, код в этой скрипке выглядит так:

<div class='shadowed'></div>
<div class='background'></div>

.shadowed {
    position:absolute;
    box-shadow: 0 0 40px 10px #888888 inset;
    width: 100px;
    height: 100px;
    opacity:.75;
}

.background {
    background-image: url("http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4");
    height:61px;
    width:250px;
}

Не знаю, достаточно ли это близко к тому, что вы ищете? Я не думаю, что тень от коробки на самом деле размывает изображение позади нее; просто размытый эффект затемнения? Но это так близко, как я могу получить с нынешним CSS. Надеюсь, вы сможете изменить его, чтобы получить что-то, что достаточно для ваших нужд.