background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20width%3D%221920%22%20height%3D%221120%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22blur%22%3E%3CfeGaussianBlur%20stdDeviation%3D%225%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cimage%20xlink%3Ahref%3D%22http%3A%2F%2Fplacekitten.com%2F1920%2F1120%22%20width%3D%221920%22%20height%3D%221120%22%20filter%3D%22url%28%23blur%29%22%2F%3E%3C%2Fsvg%3E"), url("http://placekitten.com/1920/1120");
(figured that, after I decoded it, might as well post it for everyone, couldn't make heads or tails of that side-scrolling oneliner :) it's not very complex an sich but it nicely shows how simple it is to wrap an image in a SVG for filtering/other purposes)
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1920" height="1120">
<image xlink:href="http://placekitten.com/1920/1120" width="1920" height="1120" filter="url(#blur)"/>
Would be cool if we could do it for translucent toolbar etc.
I may be possible with SVG filters or WebGL, but that also has security implications. It's possible to read cross-origin content using timing attacks and filters. http://www.contextis.com/files/Browser_Timing_Attacks.pdf
It looks better when you see it moving.
1. Blur filter is only available on WebKit
2. I know for sure how much texture memory is on an iPhone 5
3. The touch event latency on android is too damn high.
The funny thing being that I only saw that because I browsed the source, because the page was so broken for me that I only saw a black screen.
In any case, I see
Message(null, " This demo is only available for iPhone 5 and iOS 7. Sorry! " )
It's easy with React :)
I'm still thinking in actually making this thing as a physical object with a handle you put in front of the screen.
I also recently made a page with frosted glass effect, but opted for pre-rendered images because of those performance issues: https://eggerapps.at/pgcommander/fancy-index.html
(But I decided the effect was too playful for my website and so it's not public)
In fact, retrieving an image from Placekitten took the longest on the network, followed by the overhead of loading a Google font. The only real CPU time spent on this page is the overhead of codepen.
Are you mistaking network latency for performance issues with the example?
Opacity can be animated very cheaply, entirely on the GPU (source: http://www.html5rocks.com/en/tutorials/speed/high-performanc...), so if you animate this property from 1 to 0, you should a good materialization effect, without ever asking the CPU to recalculate the blur.
I'm going to fork the codepen and try this, will report back...
EDIT: see http://codepen.io/callumlocke/pen/EKuvs
[EDITED to fix a stupid mistake: I wrote 0.5Hz but meant once per 0.5s, or 2Hz.]
EDIT: ha, IE10/Win7 (in a VM) is super smooth for me. Still no idea what's going on with Firefox.
As you increase the blur the edges shrink inwards. This makes it difficult to get a frosted glass effect with more blur. Try setting a higher blur, eg:
In the future, I wonder if something like this could be done with the -filter attributes, though those may only work on images. I know those have been used to do blurring before, though possibly not in the same way.
Of course, there are security implications, but those are fairly trivial given the infrastructure already in place.
Tip: you can copy the whole data URI into your browser's location bar it will load the SVG. Then you can open devtools and inspect it to see what's going on.
<?xml version="1.0" encoding="UTF-8"?>
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1920"
<image xlink:href="http://placekitten.com/1920/1120" width="1920"