Tilt-Shift Using CSS

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

by mikecane • 15 years ago

125 16 15 years ago

lab.simurai.com

jacobr• 15 years ago

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.

kilian• 15 years ago

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

sp332• 15 years ago

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

matthiasb• 15 years ago

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• 15 years ago

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

timerickson• 15 years ago

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

JonLim• 15 years ago

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.

simurai2• 15 years ago

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• 15 years ago

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

simurai2• 15 years ago

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• 15 years ago

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• 15 years ago

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

ya3r• 15 years ago

I really like this guy.

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

rhplus• 15 years ago

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• 15 years ago

So, CSS3 is flash?

Tilt-Shift Using CSS

Related Stories