Treehouse

Image Reflections with CSS

By on  
CSS Image Reflection

Image reflection is a great way to subtly spice up an image.  The first method of creating these reflections was baking them right into the images themselves.  Within the past few years, we've introduced JavaScript strategies and CANVAS alternatives to achieve image reflections without having to modify original images.  The minds behind WebKit have their own idea behind image reflection:  pure CSS.

The Webkit CSS

The -webkit-box-reflect property accepts a value in the following format:

-webkit-box-reflect: 
	<direction> /* above|below|left|right */ 	
	<offset>    /* pixel value start offset from image */
	<mask-box-image> /* http://webkit.org/blog/181/css-masks/ */

A sample usage of -webkit-box-reflect looks like:

.reflectBelow	{ 
	-webkit-box-reflect: below 0
    -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); 
}

An involved CSS value but well worth the work. The gradient is linear from left top to left bottom from transparent to white, showing half (0.5 the image).

WebKit first implemented CSS reflections in 2008 and, to my knowledge, no other browsers have implemented a similar API. I find that frustrating but image reflection isn't a priority so I can't complain too much.  I am glad, however, that this is just one of several CSS enhancements given to us by the developers of WebKit!

ydkjs-4.png

Recent Features

  • Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

Discussion

  1. very good post thanks a lot

  2. Is it possible to have reflections for non-linear gradient as well? If so plz advice :). Thanks.

  3. Hopefully Firefox will catch on soon (and IE in a couple of years).

  4. It also works on any HTML element, not just images. Check it out: http://tomconlon.com/test/reflect.html

    I haven’t had time to play around with it too much, but I did notice it kind of choked when I wrapped an h1 and ul in a div with the reflectBelow class.

    Very cool, though.

  5. thats great but sad that it doesn’t work in other browsers.

  6. dj

    Is it possible to apply this on a html digital clock or date in a website? If so, how to code it?

  7. PM

    Thanks for sharing it.

    It is not working even in Firefox and obviously in IE.

    Thanks,

  8. Good post, bring on the day when browers are all on the same page with css & html interpretation

  9. This is really buggy in Chrome (20.0.1132.47 Mac). Had to opt for a JS version sadly.

  10. why do we use the old format for creating a ‘linear gradient color mask”, i checked the new format doesn’t work, why is that ?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!