How to use CSS3 's box-reflect to create a reflection effect

In the past to achieve this effect, we can only obediently find the design to make, and then insert a picture on the page, but with the advent of CSS3, we can implement pure code, how to achieve it? is through the CSS3 Box-reflect property. The following article will give you to share the use of CSS3 to create a reflection effect of the method, the need for friends can reference.

Compatibility

Since it is a CSS3 attribute, of course we have to look at compatibility: Click to view

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:

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!