Detailed graphic and text explanation of reflection using CSS3-CSS Tutorial-php.cn

This time I will bring you a detailed graphic and text explanation of CSS3 reflection effect. What are the precautions for CSS3 reflection effect? Here is a practical case, let’s take a look.

The renderings are as follows:

##Example
Picture

Before CSS3, the only way to achieve a reflection effect like the example image was by processing the image. After the advent of CSS3, it became very simple to achieve such an effect, with just one CSS3

propertyIt can be easily achieved.

This is the box-reflect attribute we are going to mention today.

Let’s first take a look at the box-reflect syntax given by W3C:

box-reflect: none | <
direction> < offset>? ? (? represents default, that is, the latter two attributes are dispensable)

= above | below | left |
right (Represents: top | bottom | left | right)
= | : fixed value | percentage)
= none | | | | < repeating-linear-gradient> | (respectively representing: no mask image | mask image path | linear gradient | radial gradient | repeating linear gradient | repeating radial gradient)
Default value: none

box-reflect can give two attribute values, one is none, which is the default value, that is, there is no reflection effect, and the other One is what we are going to talk about today. It can be assigned three attribute values at the same time, which in turn represent the reflection direction, the distance between the element and the reflection, and the mask image added to the reflection. The last two attribute values can be missing. Province, but if exists, is required.

After talking about so many dry explanations, it would be better to understand it with some examples.

Let’s now implement the projection effect of the example image at the beginning of the article step by step:

① Give only one attribute value below.

 < img class="img" src="imgs/cat.jpg" />

Copy after login

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

Copy after login

Achievement effect:

②Add a 5px spacing.

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

Copy after login

Achieve the effect:

③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));}

Copy after login

The picture mask here does not use pictures, but uses the linear-gradient attribute value in CSS3. It is used for linear gradients. The specific usage will not be mentioned here. You can see it directly. Here (http://www.jb51.net/css/369475.html), it is written in great detail.

Achievement effect:

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

Next, let’s talk about creating a picture mask with a radial gradient and using the picture mask directly.

Radial gradient is actually similar to linear gradient. You only need to master the basic radial gradient method in CSS3. Let’s 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);}

Copy after login

Achievement effect:

The effect is great! It’s like the cat is really looking in the mirror~~

What if you use the image mask directly? For example, I use this picture as a mask:

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

Copy after login

to achieve the effect:

mask.png

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

It should be noted that:All the effects mentioned above can be used not only on pictures, but also on other elements, such as text.

Compatibility: Although box-reflect looks very good, unfortunately, it is currently only compatible with webkit core browsers, but there are basically no problems with the mobile terminal~~

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!