CSS Image Reflection With Webkit

Image reflection is a great new feature from CSS which allows you to spice up your web image by adding a reflection underneath.

Before CSS this had to be done by adding the reflection in the images, by using an image editor such as photoshop or gimp, and then there was javascript alternatives to add an image reflection.

But now the people at webkit have put this feature into CSS by just using one line.

Demo

Image Reflection CSS

Webkit CSS Property

-webkit-box-reflect: <direction> <offset> <mask-box-image>;

Direction

This defines the position of the reflection.

  • Above - The reflection appears above the border box.
  • Below - The reflection appears below the border box.
  • Left - The reflection appears to the left of the border box.
  • Right - The reflection appears to the right of the border box.

Offset

Defines the distance of the reflection from the border of the box.

Default value is 0.

Mask Box Image

Used to overlay the box image reflection.

Example CSS Webkit Box Reflect

An example code snippet for the CSS Webkit Box Reflect.

.image_reflection{
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.5)));
}

This creates a reflection of the image_reflection box that will appear below the images. The reflection has been masked with a gradient clear colour so the image will fade out towards the end of the reflection.

View the demo to see how this looks.

Demo

Keep updated with the latest tutorials and snippets.

Join me on Twitter | G+ | Facebook

Comment