Clever use of webkit-box-reflect to achieve various dynamic effects (summary)

In an article a long time ago, I talked about the property -webkit-box-reflect -- Let's talk about CSS inheritance from reflection

-webkit-box-reflect is a very interesting property, which gives CSS the ability to reflect the content originally drawn by our element like a mirror.

The last time I wrote it, its compatibility was very, very poor. But today, although it is still a non-standard syntax, its compatibility has improved greatly, and using it, we can achieve many interesting effects.

As of 2021-02-19, its compatibility has reached 91.02%, take a look at CANIUSE -webkit-box-reflect:

Next, enter the main text.

-webkit-box-reflect basic usage

The syntax of -webkit-box-reflect is very simple. The most basic usage is like this:

div {
    -webkit-box-reflect: below;
}

Among them, below can be below | above | left | right, representing below, above, left and right, that is, there are 4 directions to choose from.

Suppose we have the following picture:

<div></div>

div {
    background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
} 

Add -webkit-box-reflect: right , which is the reflection on the right:

div {
    background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
    -webkit-box-reflect: right;
}

The effect is as follows, generating a mirror image element on the right side of an element:

Set the reflection distance

After the direction, you can also add a specific numerical value to indicate the distance between the reflection and the original element.

div {
    background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
    -webkit-box-reflect: right 10px;
}

After adding 10px , there will be a 10px gap between the reflection and the original element:

Set reflection reality

There is another very important function, which is that you can set a gradient value behind the direction. By using this gradient value, you can achieve a blurring effect of the reflection, which is very important.

div {
    background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
    -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, .5));
}

Look at the effect. After the virtual and real changes, it looks more like a reflection.

In fact, the gradient here is to add a MASK attribute to the reflected image. The transparent part of the MASK attribute will make the image transparent, while the solid color part will remain the original image.

If you have any questions about the CSS MASK attribute, I suggest you read this article: The Wonderful CSS MASK

CodePen Demo -- -webkit-box-reflect Demo

Use -webkit-box-reflect to achieve some interesting animation effects

After mastering the basic grammar, we can use it to achieve some interesting animation effects, which are briefly listed below.

I found that this attribute is particularly suitable for use in some dark style pages. It can make many dynamic effects look much more advanced. (Personal aesthetic)

Using -webkit-box-reflect in buttons

Combined with some buttons with dynamic border animations, it can create a very sci-fi effect:

If you are interested, you can check the source code:

CodePen demo -webkit-box-reflect Neon Button Hover Effect

Using -webkit-box-reflect in text

In the dark title text, the use of -webkit-box-reflect instantly makes it look more elegant.

CodePen demo - Font & -webkit-box-reflect

Using -webkit-box-reflect in 3D

Hey, next, we can even apply -webkit-box-reflect to the 3D effect, which will give us a completely different viewing experience.

We add a reflection effect to a 3D photo wall:

CodePen demo - 3DView & -webkit-box-reflect

Creating artistic patterns with -webkit-box-reflect

Interesting CSS art, here it comes again.

In this article by Professor Yuan Chuan - Chinese Window Lattice And CSS, the idea of ​​using -webkit-box-reflect to generate paper-cutting art is introduced.

Since -webkit-box-reflect can generate reflections, we can use it to continuously nest dolls, layer by layer. Then we only need to generate a basic element, and we can use reflections to produce various effects.

Suppose we have the following structure:

<div class="g-wrap1">
    <div class="g-wrap2">
        <div class="g-wrap3">
            <div class="g-wrap4"></div>
        </div>
    </div>
</div>

We just need to implement a graphic for .g-wrap4 , like this:

.g-wrap4 {
    background: 
        radial-gradient(circle at 0 0, #000 30%, transparent 30%, transparent 40%, #000 40%, #000 50%, transparent 50%),
        radial-gradient(circle at 100% 100%, #000 10%, transparent 10%, transparent 30%, #000 30%, #000 40%, transparent 40%);
} 

Then there are 4 layers of nesting dolls. First, add a layer of reflection -webkit-box-reflect to .g-wrap4 :

.g-wrap4 {
    -webkit-box-reflect: right 0px;
}

get:

Continue nesting dolls and add a layer of reflection -webkit-box-reflect to .g-wrap3 :

.g-wrap4 {
    -webkit-box-reflect: right 0px;
}
.g-wrap3 {
    -webkit-box-reflect: below 0px;
} 

Continue, add a layer of reflection -webkit-box-reflect to .g-wrap2 :

.g-wrap4 {
    -webkit-box-reflect: right 0px;
}
.g-wrap3 {
    -webkit-box-reflect: below 0px;
}
.g-wrap2 {
    -webkit-box-reflect: left 0px;
} 

Finally, add a layer of reflection -webkit-box-reflect to .g-wrap1 :

.g-wrap4 {
    -webkit-box-reflect: right 0px;
}
.g-wrap3 {
    -webkit-box-reflect: below 0px;
}
.g-wrap2 {
    -webkit-box-reflect: left 0px;
}
.g-wrap1 {
    -webkit-box-reflect: above 0px;
}

You can get a figure obtained through 4 layers of reflection:

In this way, through different basic graphics and using our imagination, we can generate a variety of paper-cut symmetrical graphics:

For the complete code, you can click here: CodePen Demo -- -webkit-box-reflect artist

at last

This article ends here. I hope it will be helpful to you. This article introduces some interesting uses of webkit-box-reflect . It may not be very practical in business, but it is very interesting.

This is the end of this article about how to use webkit-box-reflect to achieve various animation effects (summary). For more related webkit-box-reflect content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!