Hi,

in my first post I am going to talk about a short but nice webkit css feature. You’ve probably seen all sorts of image mirror FX out there, created by obscure javascripts of some sort. But now you can do it with just one extra line of CSS!

What we want to achieve is this:

As you can see in the picture there is a nice half reflection of letters. The reflection should be completely generated by CSS, like the same Rooster that you find in the logo on top of the page. You can save some bytes and other effort with this. Go check it with your developer tools!*

Here is how it goes:

Let’s say you have an image that is displayed as the background of a div.

<!DOCTYPE html>
<html>
  <head>
    <title>Mirror Effect</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta content= "width=device-width,initial-scale=1.0" name="viewport" /> 
    <style type="text/css">
	#image {
	  background: url('rooster_nomirror.png') 0 0 no-repeat;
	  width:266px;
	  height: 196px;
	  margin:auto;	
	}
     </style>
  </head>
  <body>
    <div id="image"></div>
  </body>
</html>

The width and height are those of the image. Margin auto keeps the div horizontally centered. Now we add the following line to the css-selector of the image:

-webkit-box-reflect: below 0 -webkit-gradient(
  linear,left top,left bottom,
  from(transparent),color-stop(0.93,transparent),to(rgba(255,255,255,0.3))
);

Let’s go through it.

  • The first parameter is below. That means that the reflection should appear “below” the origin.
  • 0 just looks nicer atm but you can give 5px to see a gap between the reflection and the origin
  • -webkit-gradient() will produce a mask. The part of the mask that is visible will shine through. Beware: the mask is flipped.

Webkit gradient has the following parameters:

  • linear, the type of gradient.
  • left top, the point where the gradient should start
  • left bottom, the point where the gradient should end
  • since left top to left bottom is a vertical line it will just be a vertical gradient.
  • Next are the color values. As a color we take transparent until 93% of the image and then we start fading into shine through white. The 0.3 stands for the opacity.

And that’s it!

* you gotta have a webkit browser like Chrome or Safari to see the effect. Although Android has a webkit-browser it does not do the transparency of the mask..

 

Leave a Reply

Set your Twitter account name in your settings to use the TwitterBar Section.