A picture teaches CSS3 reflection and css3 reflection

A picture teaches CSS3 reflection and css3 reflection
Share
Sample Image

Before CSS3, to implement a reflection effect like a sample image, we can only process the image. After CSS3 came out, it became very simple to implement this effect, it can be easily implemented with only one CSS3 attribute.

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

Let's take a look at the W3C box-reflect Syntax:

Box-reflect: none | <direction> <offset>? <Mask-box-image>? (? Indicates that the attribute can be left blank by default)
<Direction> = abve | below | left | right (upper | Lower | left | right)
<Offset >=< length >|< percentage> (respectively: fixed value | percentage)
<Mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient> (representing: no masked image | mask image path | linear gradient | radial gradient | repeated linear gradient | repeated radial gradient)
Default Value: none

Box-reflect can give two types of attribute values, one is none, which is the default value, that is, there is no reflection effect, and the other is what we want to talk about today, it can assign three attribute values at the same time, which represent the reflection direction, the distance between elements and the reflection, and the masked image added to the reflection. The last two attribute values can be defaulted, if <mask-box-image> exists, <offset> is required.

After talking about so many dry explanations, contact the example to better understand it.

Now we can step by step implement the projection effect of the sample image at the beginning of the article:

① Only one property value is given to below.

<! -- HTML code --> 

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

Effect:

② Add a 5px interval.

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

Effect:

③ Add an Image Mask.

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

Here the Image Mask does not use the image, but uses the linear-gradient attribute value in CSS3, it is used for linear gradient, the specific usage here is not to mention, you can directly look at this (http://www.w3cplus.com/content/css3-gradient ), detailed description.

Effect:

This is the final effect of the sample image at the beginning of the article.

Next, let's talk about creating an image mask and directly using an Image Mask Using a radial gradient.

In fact, radial gradient is similar to linear gradient. You only need to master the basic radial gradient method in CSS3. Here is 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 );}

Effect:

Great results! It seems that cats are looking in the mirror ~~

What if I use an image mask directly? For example, I use an image as a mask:

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

Effect:

Mask.png

It can be seen that the mask image will be completely stretched and filled with the reflection image, and the effect is completely transparent and will not be displayed (in fact, the principle of CSS3 gradient image mask is the same as this ).

Note that all the effects described above can be used not only on images, but also on other elements, such as text.

Compatibility: Although box-reflect looks very good, it is a pity that currently only webkit kernel browsers are compatible, but there are basically no problems with mobile terminals ~~

If you have any questions during the learning process or want to obtain learning resources, join the learning exchange group.
343599877. Let's learn the front-end together!