A long time ago, we talked about the -webkit-box-reflect property. We talked about CSS inherit

– Webkit-box-reflect is an interesting property that gives CSS the ability to act like a mirror to the content our element originally drew.

The last time I wrote it, compatibility was very, very poor, but today, even though it’s still a non-standard syntax, compatibility has improved a lot, and we can do a lot of interesting things with it.

As of 2021-02-19, its compatibility has reached 91.02%, check out Caniuse-webkit-box-reflect:

Next, enter the body.

-webkit-box-reflectBasic usage

– Webkit-box-reflect’s syntax is very simple, and the most basic usage looks like this:

div {
    -webkit-box-reflect: below;
}
Copy the code

Among them, the below can be below | above | left | right representative on the left and right sides, namely has four directions can be selected.

Suppose we were like the next picture:

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

-webkit-box-reflect: right, the reflection on the right:

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

This produces a mirror element to the right of the element:

Set reflection Distance

The direction can also be followed by a specific numerical value indicating 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;
}
Copy the code

After adding 10px, the reflection will be 10px away from the original:

Set the reflection to false and true

There is also a very important function, is behind the azimuth, but also set a gradient value, using this gradient value, you can achieve a virtual reflection effect, this 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));
}
Copy the code

Look at the effect, when you have the virtual reality, it’s more like a reflection.

In fact, the gradient here is to add a MASK attribute to the inverted image. The transparent part of the MASK attribute will become transparent, while the solid part will keep the original image.

If you have any questions about CSS MASK properties, check out this article: Fantastic CSS MASK

CodePen Demo — -webkit-box-reflect Demo

use-webkit-box-reflectAchieve some interesting dynamic effects

Once you’ve mastered the basics of grammar, you can use it to implement some interesting dynamic effects, as outlined below.

I find this attribute particularly useful in dark style pages. Can make a lot of motion effects look better. (Personal aesthetic)

Use it in buttons-webkit-box-reflect

Some buttons with dynamic border animations can create a sci-fi effect:

Interested in their own stamp source to understand:

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

Use it in writing-webkit-box-reflect

Use webkit-box-reflect in the darkly titled text, and instantly reflect.

CodePen demo – Font & -webkit-box-reflect

Use it in 3D-webkit-box-reflect

Next, we can even apply -webkit-box-reflect to the 3D effect for a completely different look and feel.

Let’s take a 3D photo wall and add the reflection effect:

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

use-webkit-box-reflectCreate art patterns

Interesting CSS art, here it comes again.

In this article – Chinese Window Lattice And CSS, teacher Yuan Chuan introduced the use of -webkit-box-reflect generate paper cutting art such an idea.

Since -webkit-box-reflect can generate reflections, we use it to create multiple versions, one on top of the other, so we only need to generate one basic element to create different reflections.

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>
Copy the code

We just need to implement a graph for.g-wrap4, for example:

.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%);
}
Copy the code

Add a reflection to. G-wrap4 -webkit-box-reflect:

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

Get:

Go ahead and add a reflection to.g-wrap3 -webkit-box-reflect:

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

Go ahead and add a reflection to.g-wrap2 -webkit-box-reflect:

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

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

.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;
}
Copy the code

The result is a shape with four reflections:

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

The complete code can be stamped here:

CodePen Demo — -webkit-box-reflect artist

The last

That’s it for you :), this article introduces some interesting uses of webkit-box-reflect, which may not be very useful in business, but is very interesting.

Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.