CSS

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

Back to top ^

Join Paulund

  • Get access to 100s of premium tutorials and downloadable content
  • Members content consists of Premium WordPress plugins, CSS packages, jQuery packages, tutorial demo files and templates for 100s of web development tutorials
  • In-depth development tutorials
  • Priority tutorial requests
  • Priority email development support
  • No ads

Here at Paulund you'll find Web Development tutorials and snippets focusing mainly on PHP, WordPress and CSS. Members will get access to premium tutorials that go into more detail about development with these languages. You will also get access to downloadable premium content based on the tutorial.

Join Paulund

Leave a Reply

Your email address will not be published. Required fields are marked *