Tilt-Shift Using CSS

[JonLim]

A bit misleading - I figured that it was going to somehow achieve the tilt-shift effect on images using CSS.

I understand that that may have been a stupid thing to think, but I still feel a bit disappointed.

Still cool though.

[simurai]

The tilt-shift effect is only applied to the text. So yeah, I cheated a little by adding a background image that is already tilt-shifted. ;-)

[franksalim]

That's what I expected, too. It could be possible in the future with CSS shaders or filters. http://www.adobe.com/devnet/html5/articles/css-shaders.html

[ya3r]

I really like this guy.

He has all sort of great CSS related hacks on his site http://simurai.com/tagged/lab

[simurai]

For those interested in adding blur effects.. CSS filters are coming so that you can blur any DOM element, also images: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/publish/Fil...

[bgarbiak]

Also worth mentioning: the latest proposal from Adobe, Apple and Opera, a complement to CSS filters - CSS shaders https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html

[alanh]

In some browsers, notably Firefox, you can place a "blur layer" over anything using an SVG background featuring an SVG blur filter.

[jacobr]

I'd recommend using something like http://css3please.com to generate the CSS for all browsers. Currently it's not really Tilt-Shift Using CSS, but rather Tilt-Shift in WebKit, due to the prefixes used, even though most or all of the properties you use are supported in other browsers as well.

[matthiasb]

I don't know how it looks in Safari, but it looks good in Chrome! css3please.com seems to be a neat tool! Thanks for sharing!

[mindhunter]

a more visual alternative to css3please: http://www.layerstyles.org

[kilian]

it works properly for me on Firefox 7 too, actually.

[rhplus]

I tried multiple browsers before realizing that you need to mouse over the text for the effect to appear. I didn't see that mentioned anywhere else.

[dbbo]

So, CSS3 is flash?