Как сделать IOS7 frosted glass эффект на чистом CSS3?

Question

[NewTypes]

Я знаю про канвас, знаю про blur.js, но меня не устраивают эти методы - они мягко говоря слишком тяжелы для решения подобной задачи.

Как я могу создать полупрозрачную ios7 like панельку, допустим над частью изображения, которое в свою очередь бы искажалось под ней. Если я накидаю стилей на панель (opacity и filter), то они изменять лишь текущий слой, то есть саму панель, но никак не нижележащий слой-изображение. В мою голову, к сожалению толком ничего не приходит.

Comments

[NewTypes]

Может эта возможность рассматривалась в w3? Никто не в курсе?

Кстати, я про изображение как пример писал (конкретно изображение я знаю как заблюрить частично)

Answer 1

[Артем Маринов]

Если размер панельки небольшой то можно перегнать кусок html в canvas и заблурить его, подробнее как это делается - описано тут - http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript

Comments

[NewTypes]

Спасибо за ответ. Но к сожалению вариант не устраивает - уже несколько раз рассматривал.

Answer 2

[rakeev]

css+svg подойдет?