Tilt-Shift Using CSS | Hacker News Reader

Tilt-Shift Using CSS

lab.simurai.com

125 pointsmikecane16 comments

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.

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. ;-)

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

I really like this guy.

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

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...

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

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

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.

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

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

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

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!

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

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

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.

So, CSS3 is flash?

Reply on news.ycombinator.com