CSS Reflection Experiment
Blog » CSS/XHTML » CSS Reflection ExperimentCSS Reflection Experiment
January 8th, 2009
Just a simple experiment with webkit-transform property. All I did was use the “Frame” technique for the black to transparent gradient and used the transform property to flip one end of the image 180 degrees. Again, since flipping an image 180 does not really create a reflection, you can only pull this off on certain kinds of images (mostly images with not too much detail). As you all know this property is only supported by Safari and Chrome~
I noticed WebKit now supports reflections in CSS (since last april) but their article did not go too much in depth with it and I was not able to see any live demos 
. If anyone can school me on that it would be great!
Similar Posts:
Subscribe via RSS ,by email, or by twitter to get all upcoming
tutorials and articles delivered straight to you.
Bookmark or Share this Post!
Tags: CSS Image Tricks, Experiment
This entry was posted on Thursday, January 8th, 2009 at 8:44 am and is filed under CSS/XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Popular Posts
Recent Comments
THX"
Great technique…I am hoping there will be no browser disasters…
Thanks. This will be really handy when all browsers support CSS 3
Nice, though technically it’s I’d say it’s not “CSS 3″ – it’s just a proprietary extension of the W3C spec. One day maybe W3C will accept it into the CSS 3 spec, but as far as I know it’s not in there at the moment:
http://www.w3.org/Style/CSS/current-work#transform
FYI: It works on FF3.5 as well.
Thanks guys for the heads up on the CSS3 tip and the FF3.5!
awesome
Actually, transform works on Firefox but it has a different property, which is -moz-transform. It’ll work if you add -moz-transform: rotate(180deg) to the .reflection img `s properties though
Tested it btw. Nice idea though! 