N
N
NewTypes2013-11-24 20:14:11
css
NewTypes, 2013-11-24 20:14:11

How to make IOS7 frosted glass effect with pure CSS3?

I know about canvas, I know about blur.js, but these methods do not suit me - they are, to put it mildly, too heavy for solving such a task.
How can I create a translucent ios7 like panel, let's say above a part of the image, which in turn would be distorted below it. If I apply styles to the panel (opacity and filter), then they only change the current layer, that is, the panel itself, but not the underlying image layer. Unfortunately, nothing comes to my mind.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Artem Marinov, 2013-11-24
@onexdrk

If the size of the panel is small, then you can overtake a piece of html into the canvas and blur it, more details on how to do this are described here - http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript

R
rakeev, 2013-11-24
@rakeev

css+svg will work?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question