CSS3 Reflection Example Tutorial

Example image

Before CSS3, if you want to achieve a reflection effect like the example image, you can generally only process the image method, and after the advent of CSS3, it has become very simple to achieve such an effect. It can be easily achieved with just one CSS3 attribute.

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 | ? = above | below | left | right (respectively representing: top | bottom | left | right)
< ;offset> = | (respectively represent: fixed value | percentage)
= none | | | < radial-gradient> | | (respectively represent: 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 is our What we are going to talk about today is that 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 defaulted, but if < ;mask-box-image> exists, then 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:

① Only give 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, which is used for linear gradients. The specific usage will not be mentioned here, you can directly see here ( ) , 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~~

The above is the detailed content of CSS3 Reflection Example Tutorial. For more information, please follow other related articles on the PHP Chinese website!