CSS3 Image Reflections

  • follow us in feedly
Published February 26, 2013 by Brad Knutson
image-reflection

CSS3 is capable of doing some very cool things. CSS3 is growing and improving everyday, and at an incredible pace. CSS3 is growing so fast, that a lot of browsers are struggling to keep up. A prime example of this is the CSS3 box-reflect property. Currently, the only browser that supports this are webkit browsers…so if you aren’t viewing this page in one of the below browsers, you won’t see how cool it is!

Browser Support

Simple Image Reflection

The below example will reflect the entire image below itself. There are four possible choices, below, above, left and right.

.img-reflect {
	-webkit-box-reflect: below;
}

You’ll notice that the reflected image acts more like a background image than anything, meaning that text would flow over it if not positioned properly. Because of this, I put the image in a div with a set height of double the height of the image.

Offset Image Reflection

The above example can make it difficult to determine where the image stops, and where the reflection starts. To make this easier on the eyes, you may want to input a height offset, like the below example.

.img-reflect-offset {
	-webkit-box-reflect: below 20px;
}

Image Reflection with Gradient Mask

Reflecting the entire image, in my opinion, really isn’t that useful. If you really want that effect, it could be easily generated in Photoshop or another image editing tool. What about adding a gradient to the image, so that it fades out?

.img-reflect-gradient {
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left bottom, left top, from(white), to(transparent));
}

Shortening the Reflection

OK, now we’re onto something. Still though, the image is obnoxiously tall and doesn’t add any wow factor to the page. Can we shrink the size of the reflection?

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

Image Reflection Onto a Shape

Alright, now we’re getting somewhere. What about changing the shape of the reflection? Easy! Create a shape that you want the image to be reflected onto, and save it somewhere on your server.

Note: When creating the image or shape, make sure you create it upside down. This is because just like the reflection, the shape will also be shown upside down.

.img-reflect-shape {
	-webkit-box-reflect: below 0px url('http://bradsknutson.com/wp-content/uploads/2013/02/shape.png');
}

Reflection with Other CSS Properties

The nice thing about the -webkit-box-reflect property is that it plays nice with (most*) other CSS properties.

*Unfortunately, box-shadow doesn’t play nicely.

.img-reflect-css {
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(75%, transparent), to(white));
	border: 1px solid #000;
	border-radius: 40px;
}
The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">