6 ms·

Tilt-Shift Using CSS

125 points by mikecane 15y ago

jacobr 15y ago
I'd recommend using something like http://css3please.com 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 15y ago
  it works properly for me on Firefox 7 too, actually.
  - sp332 15y ago
    The effect is somewhat different in Chrome. It's smoother.
    - sepent 15y ago
      Yes, and the red highlight when you select the text doesn't work in Firefox 7.
- deleted 15y ago
  [deleted]
- matthiasb 15y 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 15y ago
  a more visual alternative to css3please: http://www.layerstyles.org http://www.layerstyles.org
  - timerickson 15y ago
    Anybody that works with Photoshop Layer Styles heavily is going to be pissed off at how inaccurate that is.
JonLim 15y 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.
- simurai 15y 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 15y 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 http://www.adobe.com/devnet/html5/articles/css-shaders.html
simurai 15y 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/Filters.html#feGaussianBlurElement https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/publish/Fil...
- bgarbiak 15y 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 https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html
- alanh 15y ago
  In some browsers, notably Firefox, you can place a "blur layer" over anything using an SVG background featuring an SVG blur filter.
ya3r 15y ago
I really like this guy. He has all sort of great CSS related hacks on his site http://simurai.com/tagged/lab http://simurai.com/tagged/lab
rhplus 15y 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 15y ago
So, CSS3 is flash?

125 points by mikecane 15y ago

I'd recommend using something like http://css3please.com 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 15y ago
it works properly for me on Firefox 7 too, actually.
- sp332 15y ago
  The effect is somewhat different in Chrome. It's smoother.
  - sepent 15y ago
    Yes, and the red highlight when you select the text doesn't work in Firefox 7.
deleted 15y ago
[deleted]
matthiasb 15y 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 15y ago
a more visual alternative to css3please: http://www.layerstyles.org http://www.layerstyles.org
- timerickson 15y ago
  Anybody that works with Photoshop Layer Styles heavily is going to be pissed off at how inaccurate that is.

JonLim 15y 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.

simurai 15y 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 15y 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 http://www.adobe.com/devnet/html5/articles/css-shaders.html

simurai 15y 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/Filters.html#feGaussianBlurElement https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/publish/Fil...

bgarbiak 15y 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 https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html
alanh 15y ago
In some browsers, notably Firefox, you can place a "blur layer" over anything using an SVG background featuring an SVG blur filter.

ya3r 15y ago

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

rhplus 15y 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 15y ago

So, CSS3 is flash?