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-5.png

Recent Features

  • CSS&nbsp;Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

  • Send Text Messages with&nbsp;PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • Checkbox Filtering Using MooTools&nbsp;ElementFilter

    When I first wrote MooTools ElementFilter, I didn't think much of it. Fast forward eight months later and I've realized I've used the plugin a billion times. Hell, even one of the "big 3" search engines is using it for their maps application....

  • Digg-Style Dynamic Share Widget Using&nbsp;MooTools

    I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...

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!