[compositing?] Blurring an element’s backdrop

One of the most common use cases of blurring I have encountered (both in 
my own work and of others) is blurring an element’s backdrop. Not only 
does it make designs more visually appealing, but also helps to make 
text more legible over complex backdrops. This is exactly the reason why 
it's widely used on native interfaces that include semi transparent 
containers, such as the Windows 7 Aero enviromment [1].

Currently, authors are relying on inflexible hacks that require multiple 
images for simulating this effect [2]. Even with the current CSS Filters 
proposal [3], this is not possible in the general case, since filters 
operate on an element without taking its backdrop into account. Perhaps 
it could be added as a blending mode [4], but I think it might be 
outside the scope of that spec, since blending modes seem to only 
operate on pixel colors (operations of the sort result pixel color = 
f(element's pixel color, backdrop pixel color) for every pixel), without 
taking surrounding pixels into account.

I'm not sure I have a concrete proposal, as my knowledge is very limited 
on what’s possible (efficiently) in this area. However, it's a very 
common use case that needs to be addressed somehow.

[1]: 
http://www.elmajdal.net/Win7/Windows_7_Aero_Peek_Feature/3-before-peek.png
[2]: http://css-tricks.com/blurry-background-effect/
[3]: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
[4]: https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html

-- 
Lea Verou (http://lea.verou.me | @LeaVerou)

Received on Monday, 16 April 2012 03:38:32 UTC