Use CSS3 's box-reflect to create a reflection effect

Compatibility

Since it is the CSS3 attribute, we certainly have to look at compatibility: http://caniuse.com/css-reflections/embed

Next, let's see how box-reflect is used.

The syntax is as follows:

  -webkit-box-reflect:none | <direction> <offset>? <mask-box-image>?  Box-reflect:none | <direction> <offset>? <mask-box-image>?

Property Description:

None: This value is the default value, indicating no reflection;

Direction: Creating the direction of reflection

Above: Specifies that the reflection is on top of the object below: Specifies that the reflection is on the bottom left of the object: Specifies that the reflection is to the right of the object:

Offset: Image and reflection interval

Length: Defines the interval between the reflection and the object, using the value of lengths. Can be negative percentage: Defines the interval between the reflection and the object in percent. Can be a negative value

Mask-box-image: Used to set the mask effect of reflection;

The values can be:

None: no matte image URL: Specifies the matte image using an absolute or relative address. Linear-gradient: Creates a matte image with a linear gradient. Radial-gradient: Creates a matte image using a radial (radioactive) gradient. Repeating-linear-gradient: Creates a back matte image with a repeating linear gradient. Repeating-radial-gradient: Creates a matte image with a repeating radial (radioactive) gradient.

Just on paper, we still have to look at the results through an example.

The direction of the reflection

In this example, I've got three img:

<p class= "Box1" >      </p>   <p class= "Box2" >        </p>   <p class= "Box3" >        </p>

The CSS is as follows:

. box1,.box2,.box3{     width:120px;     Float:left;     margin-right:180px;   }   img{     width:100%;   }   . Box1 img{     -webkit-box-reflect:right;     box-reflect:right;   }   . Box2 img,.box3 img{     -webkit-box-reflect:above;     Box-reflect:above;   }   . box3{     padding-top:200px;   }

As follows:

Here is a question, box2 and box3 in the picture are set Box-reflect:above, is to create a projection on the top, why Box2 do not see the effect? The reason is that I set the padding-top:200px for Box3, and Box2 did not, initially estimated because there is no space for it to show the resulting reflection.

The distance between the reflection and the object

When we see the direction of the reflection generation, let's look at the second attribute, or the example:

Still use three pictures, but the style changes a bit:

. box1 img{     -webkit-box-reflect:below 30px;     Box-reflect:below 30px;   }   . Box2 img{     -webkit-box-reflect:below-30px;     box-reflect:below-30px;   }   . Box3 img{     -webkit-box-reflect:below 5%;     Box-reflect:below 5%;   }

As follows:

Next we'll learn the last attribute.

Matte effect

(1) Adding a matte effect to a reflection using gradients

  . box1 img{     -webkit-box-reflect:below 0-webkit-linear-gradient (Top,rgba (250,250,250,0), Rgba (250,250,250,.0) 30 %,rgba (250,250,250,.3));     Box-reflect:below 0 linear-gradient (Top,rgba (250,250,250,0), Rgba (250,250,250,.0) 30%,rgba (250,250,250,.3));   }

The effect is as follows:

Use a background map to add a matte effect to a reflection

First we need a picture of a pentagram PNG:

. Box2 img{     -webkit-box-reflect:below 0 url (http://7s1r1c.com1.z0.glb.clouddn.com/t_star.png);     Box-reflect:below 0 url (http://7s1r1c.com1.z0.glb.clouddn.com/t_star.png);   }

The effect is as follows: