Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 Gaussian blur effect

Tags:

webkit

How is apple able to achieve the (apparent) Gaussian blur effect for the photos in the background in this demo:

http://www.apple.com/html5/showcase/gallery/

like image 593
ʞɔıu Avatar asked Jun 04 '10 14:06

ʞɔıu


3 Answers

Now we are in 2012, look a this:

http://css-plus.com/2012/03/gaussian-blur/

and this:

http://blurjs.com/

like image 132
Pedro L. Avatar answered Dec 18 '22 19:12

Pedro L.


In case you want to do something similar with Canvas, check out StackBlur. Works great! I know it's not Gaussian blur but it should be close enough. :)

like image 38
Juho Vepsäläinen Avatar answered Dec 18 '22 18:12

Juho Vepsäläinen


Looking at the source, those are prerendered. No HTML5 trickery for that part, unfortunately.

Example: http://images.apple.com/html5/showcase/gallery/images/polo9b-small.png

like image 29
ceejayoz Avatar answered Dec 18 '22 19:12

ceejayoz