CSS3 to make a reflection of the text

This time to everyone to bring CSS3 to make a reflection of the text and detail, CSS3 to make the reflection of the effect of the attention matters, the following is the actual case, to see.

As follows:

Sample picture

Before CSS3, to implement a sample image such a reflection effect can only be handled by the way the picture, and after the advent of CSS3, want to achieve such a effect becomes very simple, just a CSS3 property can be easily implemented.

This is the Box-reflect attribute to be mentioned today.

Let's first look at the Box-reflect syntax given by the consortium:

• Box-reflect:none | <direction> <offset>? <mask-box-image>? (? Represents the default, that is, the latter two attributes are optional)

• <direction>= above | below | Left | Right (respectively: on | Next | Left | Right

• <offset>= <length> | <percentage> (respectively: fixed value | Percentage

• <mask-box-image>= None | <url> | <linear-gradient> | <radial-gradient>| <repeating-linear-gradient> | <repeating-radial-gradient> (representative: no matte picture | Mask Picture Path | Linear Gradient | Radial Gradient | Repeating linear gradients | Repeating radial gradient)

• Default value: None

Box-reflect can give two attribute values, one is None, the default value, that is, no reflection effect, and the other is what we want to say today, it can be given three attribute values, which in turn represent the reflection direction, the distance between the element and the reflection, and the mask image added to the reflection, The latter two property values can be defaulted, but if <mask-box-image> is present, <offset> is required.

Say so many dry explanations, or contact the example should be better understood.

Let's now step through the projection of the sample image at the beginning of the article:

① only gives a property value of below.

<!--HTML code-->< IMG class= "img" src= "imgs/cat.jpg"/>

/*CSS code */.img{-webkit-box-reflect:below; box-reflect:below;}

Implementation results:

② Add a 5px spacing.

/*css code */.img{-webkit-box-reflect:below 5px; box-reflect:below 5px;}

Implementation results:

③ finally add a picture mask.

/*css Code */.img{-webkit-box-reflect:below 5px-webkit-linear-gradient (Transparent 60%,rgba (0,0,0,.3)); Box-reflect: Below 5px linear-gradient (Transparent 60%,rgba (0,0,0,.3));}

The picture mask here does not use the picture, but uses the Linear-gradient attribute value in the CSS3, it is used for the linear gradient, the concrete usage here does not mention, can directly see here (http://www.jb51.net/css/369475.html), It's written in detail.

Implementation results:

This is the final result of the example picture at the beginning of the article.

Next, say the radial gradient creates a picture matte and uses the picture mask directly.

A radial gradient is similar to a linear gradient, and you only need to master the basic radial gradient method in CSS3 to give a simple example:

/*css Code */.img{-webkit-box-reflect:left 0-webkit-radial-gradient (#000 30%,transparent); Box-reflect:left 0 Radial-gradient (#000 30%,transparent);}

Implementation results:

The effect is great! Looks like the cat is really in the mirror ~ ~

What if I use the picture mask directly? For example, I use such a picture as a mask:

/*css code */.img{-webkit-box-reflect:right 0 url (imgs/mask.png); box-reflect:right 0 url (imgs/mask.png);}

Implementation results:

Mask.png

As you can see, the mask picture is completely stretched to fill the reflection image, and the effect is completely transparent and does not show up (in fact, the CSS3 gradient image matte principle is the same as this).

It is important to note that all of the above effects can be used not only in pictures, but also in other elements, such as text.

Compatibility: Box-reflect Although it looks very good, but unfortunately, only the WebKit kernel browser is compatible, but the mobile side basically has no problem ~ ~

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS3 makes a striped big background

CSS3 Text Gradient Animation