Tilt-Shift Using CSS(lab.simurai.com)
lab.simurai.com
Tilt-Shift Using CSS
http://lab.simurai.com/css/tilt-shift/
17 comments
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
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.
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.
[deleted]
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?
I understand that that may have been a stupid thing to think, but I still feel a bit disappointed.
Still cool though.