Detailed graphic and text explanation of reflection using CSS3

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.

<!--HTML代码-->
< img class="img" src="imgs/cat.jpg" />

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

Achievement effect:

②Add a 5px spacing.

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

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

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

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

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!

Recommended reading:

CSS3 to create a large striped background

css3 text gradient animation

The above is the detailed content of Detailed graphic and text explanation of reflection using CSS3. For more information, please follow other related articles on the PHP Chinese website!