Tilt-Shift Using CSS

[mikecane]

http://lab.simurai.com/css/tilt-shift/

[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 → JonLim]

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 → JonLim]

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 → simurai]

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 → simurai]

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 → jacobr]

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 → jacobr]

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

[timerickson → mindhunter]

Anybody that works with Photoshop Layer Styles heavily is going to be pissed off at how inaccurate that is.

[kilian → jacobr]

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

[sp332 → kilian]

The effect is somewhat different in Chrome. It's smoother.

[sepent → sp332]

Yes, and the red highlight when you select the text doesn't work in Firefox 7.

[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?