A picture of the church CSS3 reflection

Share
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代码-->< img class="img" src="imgs/cat.jpg" />

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

Implementation results:

② Add a 5px spacing.

/*CSS代码*/.img{ -webkit-box-reflect: below 5px; box-reflect: below 5px;}

Implementation results:

③ finally add a picture mask.

/*CSS代码*/.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.w3cplus.com/content/ Css3-gradient), written in great 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代码*/.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代码*/.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 ~ ~

You are welcome to join the Learning Exchange Group if you encounter any problems or want to acquire learning resources in the learning process.
343599877, we learn the front-end together!

A picture of the church CSS3 reflection