DEV Community: Coco

Reflection! Cool Effects with -webkit-box-reflect

Coco — Sun, 07 Aug 2022 05:17:14 +0000

-webkit-box-reflect is a very interesting property that gives CSS the ability to act like a mirror, reflecting what our elements were originally drawn on.

The last time I wrote it, its compatibility was very, very bleak, but today, although it is still a Non-standard syntax, the compatibility has been greatly improved, and using it, we can achieve a lot of interesting Effect.

As of 2022–08–07, its compatibility has reached 93.48%, take a look at CANIUSE-webkit-box-reflect:

What is `-webkit-box-reflect`

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

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

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

Suppose we have the following image:

<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 mirrored element to the right of an element:

Set the reflection distance

After the direction, you can also follow 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, the reflection will be separated from the original element by 10px:

Set the gradient of the reflection

There is also a very important function, that is, behind the azimuth, you can also set a gradient value. 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 is more like a reflection.

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

CodePen Demo -- -webkit-box-reflect Demo

Use `-webkit-box-reflect` to achieve some interesting animations

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

I've found this property to be especially useful in some dark-style pages. It can make a lot of dynamic effects look much taller. (personal aesthetic)

Using `-webkit-box-reflect` in buttons

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

If you are interested, you can poke the source code to understand:

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

Use `-webkit-box-reflect` in the Text Effects

In a darker setting, the use of -webkit-box-reflect makes the whole effect much more advanced.

CodePen demo - Font & -webkit-box-reflect

Use `-webkit-box-reflect` in 3D Effects

Next, we can even apply -webkit-box-reflect to the 3D effect to create a completely different viewing experience.

Let's add a reflection effect to a 3D photo wall:

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

Use `-webkit-box-reflect` to create artistic patterns

Interesting CSS art, here it is again.

In this article by Mr. Yuan Chuan--Chinese Window Lattice And CSS, it introduces the use of -webkit -box-reflect generates such an idea of cutting art.

Since -webkit-box-reflect can generate reflections, we can use it to perform continuous nesting of 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 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%);
}

Then there are 4 layers of nesting, first adding a layer of reflection to wrap4, via -webkit-box-reflect.

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

we can get:

Continue nesting and add a layer of reflection to the .g-wrap3:

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

Go ahead and add a 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 -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;
}

We can get a graphic obtained by 4 layers of reflection:

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

The complete code can be found here:

CodePen Demo -- -webkit-box-reflect artist

Finally

More wonderful CSS technical articles are summarized in my Github -- iCSS.

And maybe you will love my CodePen, which has a large number of amazing CSS effects.

Unbelievable! CSS MASK implements video figure mask

Coco — Tue, 02 Aug 2022 10:35:16 +0000

If you often watch the live broadcast of some LOL games must know that in some barrage websites when the figure and the barrage appear together, the barrage will smartly hide under the figure, looking very smart.

A simple screenshot example:

In fact, this is achieved by using the MASK property in CSS.

Simple usage of MASK

Mask has been mentioned in many articles before. This article does not explain too much the basic concept of mask. When reading down, if you are confused about the usage of some masks, you can re Go check it out.

Here is just a brief introduction to the basic usage of mask.

At its most basic, the way to use a mask is to use an image, like this:



{
    /* Image values */
    mask: url(mask.png); /* use bitmap for mask */
    mask: url(masks.svg#star); /* Use the shape in the SVG graphic to do the mask */
}

Of course, the way to use pictures will be discussed later. The way of using pictures is actually quite cumbersome, because we have to prepare the corresponding picture materials first. In addition to pictures, mask can also accept a background-like parameter, that is gradient.

Similar to the following usage:



{
    mask: linear-gradient(#000, transparent) /* use gradient as mask */
}

So how should it be used? A very simple example, above we create a gradient from black to transparent, we apply it in practice, the code looks like this:

Here's a picture like this, superimposed with a gradient from transparent to black.



{
    background: url(image.png) ;
    mask: linear-gradient(90deg, transparent, #fff);
}

After applying the mask, it will look like this:

In this DEMO, you can briefly understand the basic usage of mask.

This is the most important conclusion of using mask: the element with the mask attribute added, its content will overlap the transparent part of the gradient represented by the mask, and the overlapping part will become transparent.

It is worth noting that the above gradient uses linear-gradient(90deg, transparent, #fff). The #fff color part here can actually be replaced with any color without affecting the effect.

CodePen Demo -- Basic usage using MASK

Use mask to achieve figure mask filtering

After understanding the usage of mask, next, we use mask to simply implement the example of video barrage, where the barrage encounters a figure and is automatically hidden and filtered.

First, I simply simulated a Summoner's Rift, and some basic barrages:

For convenience, a static image is used here, which represents the map of Summoner's Rift, not a real video, while the barrage is a line of  elements, which is consistent with the actual situation. Pseudo code looks like this:



<!-- map -->
<div class="g-map"></div>
<!-- The container that wraps all the barrage -->
<div class="g-barrage-container">
    <!-- All barrage -->
    <div class="g-barrage">6666</div>
    ...
    <div class="g-barrage">6666</div>
</div>

In order to simulate the actual situation, we use a div to add an actual figure. If we do not do any processing, it is actually the feeling of opening the barrage when we watch the video, and the figure is blocked by the video:

Note that here I added a figure, and used animation to simulate a simple movement. During the movement, the figure was blocked by the bullet screen.
Next, you can ask for the mask.

We use the mask to make a radial-gradient, so that the vicinity of the figure is transparent, and according to the animation of the figure's movement, add the same animation to the mask-position of the mask. You can end up with something like this:



.g-barrage-container {
    position: absolute;
    mask: radial-gradient(circle at 100px 100px, transparent 60px, #fff 80px, #fff 100%);
    animation: mask 10s infinite alternate;
}

@keyframes mask {
    100% {
        mask-position: 85vw 0;
    }
}

In fact, it is to add a mask attribute to the container where the barrage is placed, to identify the position of the figure, and to continuously change the mask according to the movement of the figure. We replace the mask with the background, and the principle can be understood at a glance.

Replace mask with background diagram:

The transparent part of the background, that is, the transparent part of the mask, is actually the part of the bullet screen that will be hidden and masked, and the other white parts, the bullet screen will not be hidden, which is the perfect use of the characteristics of the mask.

In fact, this technology has nothing to do with the video itself, we only need to block the position of the bullet screen according to the video calculation, and get the corresponding mask parameter. If you remove the background and moving figures, only keep the barrage and mask, like this:

It needs to be clear that when using a mask, instead of blocking the bullet screen part, use mask to specify which parts are displayed normally and which parts are transparently hidden under the bullet screen container.

Finally, the complete Demo you can click here:

CodePen Demo -- mask realizes barrage figure mask filtering

Application in real production

Of course, above we simply restored the effect of using mask to filter the bullet screen. But the actual situation is much more complicated than the above scenario, because the position of the figure hero is uncertain and changes every moment. Therefore, in the actual production environment, the parameters of the mask image are actually calculated by the back-end processing the video in real time, and then passed to the front-end, which is then rendered by the front-end.

For a live site that uses this technique, we can inspect the element and see that the mask property of the container that wraps the barrage changes all the time:

What is returned is actually an SVG image, which looks like this:

In this way, according to the real-time position changes of the video figures, new masks are continuously calculated, and then acted on the bullet screen container in real time to realize mask filtering.

Finally

More wonderful CSS technical articles are summarized in my Github -- iCSS.

And maybe you will love my CodePen, which has a large number of amazing CSS effects.

Amazing CSS transition tips and details

Coco — Fri, 29 Jul 2022 08:42:27 +0000

In CSS, the transition property is used to specify adding transition effects to one or more CSS properties.

The most common usage is to add a transition to an element, so that when one of its properties changes from state A to state B, it is no longer very direct and obtrusive, but with a tween animation.

For example:

<div></div>

div {
    width: 140px;
    height: 64px;
    transition: .8s transform linear;
}
div:hover {
    transform: translate(120px, 0);
}

Of course, in addition to the above basic usage, there are actually some very interesting details and interesting usages of CSS transition. Let me explain them one by one.

Not all properties support transitions

Not all properties support transitions. Similar to animation, here is a list of all properties that support transitions -- CSS animated properties

Of course, sometimes, there are more exceptions. Some properties that support transitions do not support transitions in certain states. Very typical are height: auto and width: auto.

In the article CSS tricks: dynamic height transition animation, such a scenario is mentioned:

The dynamic height transition animation of the element is invalid. The pseudo code is probably like this:

{
    height: unset;
    transition: height 0.3s linear;

    &.up {
        height: 0;
    }
    &.down {
        height: unset;
    }
}

Obviously set transition for the height property, but the transition animation is not triggered, but unfolds directly in one step:

The reason is that CSS transitions do not support changing the height or width of elements with auto.

For this scenario, we can use the max-height to hack.

Here is a very interesting little trick. Since height: auto is not supported, we will find another way to use the feature of max-height to achieve dynamic height scaling, for example:

{
    max-height: 0;
    transition: max-height 0.3s linear;

    &.up {
        max-height: 0;
    }
    &.down {
        max-height: 1000px;
    }
}

For specific details, you can see -- CSS tricks: dynamic height transition animation

Transition can separately control each property

Let's continue. In transition, we can use transition: all 1s linear to uniformly add transition effects (time and easing functions) to all transition-supporting properties below the element.

At the same time, we can also finely control each attribute separately:

{
    // can be
    transition: all 1s linear;

    // can also do this
    transition: height 1s linear, transform 0.5s ease-in, color 2s ease-in-out;
}

And, like animations, each transition supports delayed triggering:

div {
    // Trigger the transition with a delay of 1s, and the transition animation time is 0.8 seconds
    transition: .8s transform 1s linear;
}
div:hover {
    transform: translate(120px, 0);
}

It can be seen that whether it is a transition trigger or a transition reset, it will wait for 1 second before triggering.

Using this technique, we can achieve some combination of transition effects. First, we implement such a transition animation of width and height change:

<div></div>

div {
    position: relative;
    width: 200px;
    height: 64px;
    box-shadow: inset 0 0 0 3px #ddd;
}
div::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 0; left: 0; width: 0; height: 0;
    box-sizing: border-box;
    transition: width .25s, height .25s, border-bottom-color;
    transition-delay: .25s, 0s, .25s;
}
div:hover::before {
    width: 200px;
    height: 64px;
    border-left: 3px solid #00e2ff;
    border-bottom: 3px solid #00e2ff;
}

We control the height, width, and lower border of the pseudo element of the element respectively, and set a delay of 0.25 seconds for the width transition animation and the color animation of the lower border, so that the height of the element will be transitioned first, due to the overall transition animation. The world time is also 0.25s, so after the height transition animation ends, the width transition animation starts, and the color of the lower border changes.

In this way, their transition animations can be linked together and reflected on the border of the element to see the effect:

Using the same principle, we also use another pseudo-element of the element, but their animation world needs to add 0.5 seconds to the whole, and it will not be executed until the above transition animation is executed:

div::after {
    right: 0;
    bottom: 0;
}
div:hover::after{
    transition: height .25s, width .25s, border-top-color .25s;
    transition-delay: 0.5s, 0.75s, 0.75s;
    width: 200px;
    height: 64px;
    border-top: 3px solid #00e2ff;
    border-right: 3px solid #00e2ff;
}

In this way, we can combine the transition animations of the two pseudo-elements to get a complete border animation as follows:

You can click here for the complete demo: CodePen Demo -- Button border animation effect with transition-delay

So, by controlling each attribute reasonably, you can combine various interesting effects.

Dynamically change `transition-duration`

There is also a very interesting trick, we can use some pseudo-classes of the element to dynamically change the transition-duration of the element.

for example:

div {
    width: 140px;
    height: 64px;
    border: 2px solid red;
    transition: 3s all linear;
}
div:hover {
    transition-duration: .5s;
    border: 2px solid blue;
}

When the mouse hovers an element, change the duration of the transition animation of the element transition-duration from 3s to 0.5s, so that when the element is hovered, the duration of the transition animation is 0.5s, but the duration of the transition reset But it is 3s:

Using this little trick, we try to create some interesting effects.

Signature Panel Implemented in Pure CSS

Using the above-mentioned tricks, we can implement a pure CSS signature panel.

First of all, in a container with a height and width of 500px, a 100x100 HTML grid layout is implemented, using flex and grid. For convenience, I use the Pug template engine.

div.g-box
    -for(var i=0; i<100; i++)
        div.g-row
            -for(var j=0; j<100; j++)
                div.g-item

For convenience, I added a border to each grid, in fact, the background and grid are white:

In order to achieve the signature effect, we add a hover event to each grid g-item, and change the background color of the current grid when hovering. At the same time, the most important thing is to set a very large transition-duration in the normal state, and set a very small transition-duration in the hover time, the pseudo code is as follows:

.g-item {
    transition: 999999s;
}
.g-item:hover {
    background: #000;
    transition: 0s;
}

Take a look at the effect:

This is achieved. When the mouse hovers up, the background color is quickly changed because of transition: 0s, and when the hover effect leaves, transition: 999999s takes effect again, and the black color will be a very, very slow. The speed is ineffective, so slow that you can't feel it changing.

Of course, if we want to realize the signature, there is still something missing. We need to realize that the background color change of the element will not start immediately when the mouse hovers over the drawing board. Only when the mouse is pressed (maintaining the :active state) will it start. Follow the mouse track to change the color. When the mouse stops clicking, it stops drawing.

There is a clever way to achieve this. We superimpose a layer of div on the canvas. The level z-index is higher than the canvas. When the mouse hovers over the canvas, it is actually hovering over this mask layer. Press to trigger the :active event, add a :activce event to the element, and remove the mask layer.

The pseudo code is as follows:

div.g-wrap
div.g-box
    -for(var i=0; i<100; i++)
        div.g-row
            -for(var j=0; j<100; j++)
                div.g-item

.g-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;

    &:active {
        display: none;
    }
}

In this way, a complete signature board, or drawing board, is realized:

The complete code implementation, and adding the reset function using CSS, you can click here: CodePen Demo -- Pure CSS signature

Like this, an effect from my friend alphardex uses the above techniques to superimpose blending modes and filters to achieve:

CodePen Demo -- Snow Scratch

How about it? Is it a very interesting CSS trick? I hope you will enjoy this wonderful technique achieved by CSS transition.

Finally

More wonderful CSS technical articles are summarized in my Github -- iCSS.

And maybe you will love my CodePen, which has a large number of amazing CSS effects.

The Magical Use of Uncommon Labels Fieldset and Legend

Coco — Tue, 26 Jul 2022 15:48:55 +0000

When it comes to <fieldset> and <legend>, most people will definitely be unfamiliar, and they belong to the group that is less used in HTML tags.

I first learned about these two tags when I was learning reset.css or normalize.css in my early years. Recently, because of the research on the border, I came across these two tags, and found that they are still very interesting, so I wrote an article to share some of the knowledge points I have compiled with you.

Learn about fieldset and legend

In general, <fieldset> and <legend> are more commonly used in forms.

<fieldset>: The HTML <fieldset> element is used to group control elements in a form
<legend>: a <legend> element is built into <fieldset> as the title of the fieldset

In short, fieldset can be used alone to group elements of a form, while legend needs to be used in conjunction with fieldset, in pairs, as the title of the group.

Let's look at a simple example, the simple HTML and structure are as follows:



<fieldset>
    <legend>Form</legend>
    <div>
        <label>Name :</label><input type="text" placeholder="input Name" />
    </div>
    <div>
        <label>Password :</label><input type="text" placeholder="input Name" />
    </div>
</fieldset>



fieldset {
    border: 1px solid#ddd;
    padding: 12px;
}

legend {
    font-size: 18px;
    padding: 0 10px;
}

The effect is as follows:

CodePen Demo -- fieldset & legend Demo

The more interesting point is that if the border border is set for the fieldset, the content inside the legend element will be used as the title of the group, embedded within the border.

Controls the position and style of `legend`

It is possible to control the position and style of the legend.

For the position, we can control it through margin and the padding of the parent element. If the parent element fieldset does not set padding and legend does not set margin, then legend is positioned at the far left by default.



fieldset {
    border: 1px solid#ddd;
    // padding: 12px;
}

legend {
    font-size: 18px;
}

Effect picture:

The initial position of the title can be controlled by changing the margin of the legend or the padding-left of the parent element:



fieldset {
    border: 1px groove #ddd;
}

legend {
    animation: marginMove 10s infinite alternate;
}

@keyframes marginMove {
    100% {
        margin-left: 100px;
    }
}

Effect picture:

By controlling the padding of legend, you can increase the area of the surrounding elements and make more white space.

Application scenario -- horizontal lines on both sides of the title

After understanding the above basic knowledge, we can start a little deeper and think about some interesting application scenarios of the above <fieldset> and <legend>.

The most suitable scene I think should be the layout with horizontal lines on both sides of the title. Something like this:

Of course, there are many solutions to this layout, usually using pseudo-elements to generate horizontal lines on the left and right sides, or local overlays through absolute positioning.

Here, using <fieldset> and <legend> is done very quickly:



<div class="g-container">
    <fieldset><legend>排行榜</legend></fieldset>
</div>



fieldset {
    width: 300px; 
    height: 24px; 
    border: 1px solid transparent; 
    border-top-color: #000; 
}

legend{
    margin: auto; 
    padding: 0 10px; 
}

fieldset only sets the top border, margin: auto positions the title in the middle, and padding controls the margin on both sides. very perfect.

CodePen Demo -- fieldset & legend Demo 2

border nested text

In this article -- How to Add Text in Borders Using Basic HTML Elements, and also introduces a very interesting usage scenario, nesting text in borders.

Imagine that a <fieldset> element combined with a <legend> element can generate a border inlaid text effect. Then, by combining multiple groups and positioning and arranging, you can generate a polygon border with nested text. effect.

The pseudo code is as follows:



<div class="g-container">
    <fieldset><legend>CSS fieldset</legend></fieldset>
    <fieldset><legend>HTML element</legend></fieldset>
    <fieldset><legend>JavaScript</legend></fieldset>
    <fieldset><legend>TypeScript</legend></fieldset>
</div>



.g-container {
    position: relative;
    width: 300px; 
    height: 300px; 
}
fieldset{
    position: absolute;
    width: 300px; 
    height: 300px; 
    border: 10px solid transparent; 
    border-top-color: #000; 
}
legend{
    padding: 0 10px; 
} 

fieldset:nth-of-type(2){ transform: rotate(90deg); }
fieldset:nth-of-type(3){ transform: rotate(180deg); }
fieldset:nth-of-type(3)>legend{ transform: rotate(180deg); } 
fieldset:nth-of-type(4){ transform: rotate(-90deg); }

The effect diagram is as follows:

Through the combination of multiple <fieldset> and <legend>, we can spell out the 4 sides of a container to form a very beautiful border inlay effect.

Animate text by adding animation to legend



legend {
    animation: move 3s infinite linear alternate;
} 
@keyframes move {
    100% {
        margin-left: 70px;
    }
}

CodePen Demo -- Border Text Design using HTML fieldset and legend

Well, based on this, we can generate borders for various N-sided border inlays. Below is a simple attempt at several polygon borders.

CodePen Demo -- fieldset and legend generate polygon

Finally

More wonderful CSS technical articles are summarized in my Github -- iCSS.

And maybe you will love my CodePen, which has a large number of amazing CSS effects.

Amazing! Implementing artistic graphics with CSS

Coco — Sun, 24 Jul 2022 03:38:08 +0000

I’ve been wanting to write an article about the art of CSS creation for a long time. This article mainly introduces how to use CSS to quickly create beautiful CSS graphics with the help of CSS-doodle.

In short, CSS-doodle is a library based on Web-Component. It allows us to quickly create pages based on CSS Grid layouts and provides a variety of handy commands and functions (random, loops, etc.) that allow us to get different CSS effects with a set of rules. Take a look at its homepage — Home Page of CSS-doodle — and you can get started quickly in just 5min.

Create a Center Layout

All the tips in this article will revolve around this layout.

First, we need such a central layout. A simple HTML structure is as follows:

<div class="g-container">
    <div class="g-box"></div>
    <div class="g-box"></div>
    <div class="g-box"></div>
    <div class="g-box"></div>
    <div class="g-box"></div>
</div>

.g-container {
    position: relative;
    width: 300px;
    height: 300px;
}
.g-box {
    position: absolute;
    top:50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -150px;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
}

Use absolute positioning and margin to center all elements horizontally and vertically (because transform will be used later, so this method of horizontal and vertical centering is selected), the result is as follows:

Well, it looks flat, but based on this layout, we can derive very interesting patterns.

Change Elements' Size

The simplest thing is that we can change the size of an element.

CSS code is too tiring to write, so we simply rely on the pug HTML template engine and SASS.

div.g-container
    -for(var i=0; i<10; i++)
        div.g-box

$count: 10;
@for $i from 1 to $count + 1 {
    .g-box:nth-child(#{$i}) {
        --width: #{$i * 30}px;
        width: var(--width);
        height: var(--width);
        margin-left: calc(var(--width) / -2);
        margin-top: calc(var(--width) / -2);
    }
}

Containing 10 child elements under the container, each of which increases in size incrementally, it is easy to get the following result.

Change Elements' Color

Next, we proceed to change the color of the element so that it takes on a gradient color progression, which could be border color.

@for $i from 1 to $count + 1 {
    .g-box:nth-child(#{$i}) {
         ...
         border-color: hsla(
            calc(#{$i * 25}),
            50%,
            65%,
            1
        );
    }
}

Get this effect.

It is also possible to change the color of the background background:

@for $i from 1 to $count + 1{
    .g-box:nth-child(#{$i}) {
        ...
        background: hsla(
            calc(#{$i * 25}),
            50%,
            65%,
            1
        );
        z-index: #{$count - $i};
    }
}

Change Elements' Angle

Okay, next, it's time to start transforming the angle, we use transform to rotate the element by different angles:

@for $i from 1 to $count + 1{
    .g-box:nth-child(#{$i}) {
        ....
        transform: rotate(#{$i * 7}deg);
    }
}

The effect is as follows.

CodePen Demo -- CSS Pattern

OK, here, some basic concepts are introduced almost, in short, the use of multiple elements centered layout, change the size, color, transparency, angle, shadow, filter, blend mode, etc., etc., as long as you can think of, you can.

Next, let's introduce the other main character of this article - CSS-doodle.

CSS-doodle is a Web-Component based library. It allows us to quickly create pages based on CSS Grid layouts to achieve various CSS effects (or perhaps we can call it CSS art).

The code for the final effect is essentially CSS, and some of the specific concepts can be understood by clicking on the home page.

Use CSS-doole to achieve multi-element horizontal and vertical centering layout

Let's take the above layout and implement it again using CSS-doodle. To achieve a centered alignment of 50 elements, a simple declaration is needed as follows.

<css-doodle>
    :doodle {
        @grid: 1x50 / 100vmin;
    }
    @place-cell: center;
</css-doodle>

What this means is that we declare a grid layout of 1x50 under a container of size 100vmin x 100vmin and use @place-cell: center to center them all horizontally and vertically, which means they will be stacked together.

This may not look good, so we'll set different sizes for each element and give them all a simple border.

<css-doodle>
    :doodle {
        @grid: 1x50 / 100vmin;
    }
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 2%);
    border: 1px solid #000;
</css-doodle>

@size: calc(100% - @calc(@index() - 1) * 2%) indicates the size of the width and height of each child element (or you can set the height and width separately), @index is a variable that indicates the number of the current element, from 1 - 50, indicating that each element is 2% of the container's height and width, 4% of the container's height and width all the way up to 100% of the container's height.
border: 1px solid #000 is the normal CSS code, there is no variable inside, it works on each element

The effect is as follows.

Oh No, the eyes are starting to glaze over. In this way, we have quickly implemented the graphical effect that was generated using HTML code and tedious CSS during the previous layouts.

Create CSS Art

Next, the wonderful CSS art begins.

Change the rotation angle of the element and the border color

Let's use the above code to continue down the page, first changing the base color of the overall container to black for better presentation, and then changing the rotation angle of the elements. Each element is rotated by 30deg x @index.

The code is very short and looks like this.

<css-doodle>
    :doodle {
        @grid: 1x100 / 100vmin;
    }
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 1%);
    transform: rotate(calc(@index() * 30deg));
    border: 1px solid #fff;
</css-doodle>

Not very good, then we try to set a different border color progressively for each element, and the transparency opacity decreases, and here we will use the hsla color representation.

<css-doodle>
    :doodle {
        @grid: 1x100 / 100vmin;
    }
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 1%);
    transform: rotate(calc(@index() * 30deg));
    border: 1px solid hsla(
        calc(calc(100 - @index()) * 2.55), 
        calc(@index() * 1%), 
        50%,
        calc(@index() / 100)
    );
</css-doodle>

And look at the effect.

All mapping has some color difference, you can click into the Demo to see~

Wow, the first piece of work looks pretty good.

Of course, each different angle can produce a different effect, through CSS-doodle, you can quickly generate different random values, randomly generate different effects. Let's change the above code a bit, changing the transform line to introduce a random value:

<css-doodle>
    :doodle {
        --rotate: @r(0, 360)deg;
    }
    transform: rotate(calc(@index() * var(--rotate)));
</css-doodle>

@r(0, 360)deg, which generates a random number between 0 and 360, which can be followed directly by a unit, which becomes a random angle value
transform: rotate(calc(@index() * var(--rotate)), using the calc rule to introduce a random CSS variable, but of course, without refreshing the page, the value is fixed every time

This way, we can get a different effect each time we refresh the page (of course, CSS-doodle is optimized to add just a few lines of code to refresh the effect by clicking on the page), and the effect after the transformation, we can get a new effect each time we click:

CodePen Demo -- CSS Doodle - CSS Magic Pattern

Strongly recommend you click into the Demo and feel it yourself with a click of the mouse :)

Set Different Background Colors

Okay, let's change our thinking again, this time instead of changing the color of the border, we control the odd numbered elements and the even numbered elements by means of a selector, giving them different background colors.

<css-doodle>
    :doodle {
        @grid: 1x100 / 100vmin;
    }
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 1%);
    transform: rotate(calc(@index() * 60deg));

    background: rgba(0, 0, 0, calc((@index * 0.01)));
    @even {
        background: rgba(255, 255, 255, calc((@index * 0.01)));
    }
</css-doodle>

Using @even {} you can quickly select an element with an even number and give it a white background, while an odd numbered element is given a black background, see the effect.

In the same way, we can assign random values to the rotation angle of transform and use the black and white overlay to see what happens at different angles:

CodePen Demo -- CSS Doodle - CSS Magic Pattern

Of course, in the random process, you can also pick your favorite ones and keep them.

CSS-doodle supports many ways to introduce multiple graphics on one page, like this.

CodePen Demo -- CSS-doodle Pure CSS Pattern

Summary

A small summary, to generate different patterns, in fact ** just need to find the ability to generate different lines, or modeling pattern graphics, they will be different sizes, different rotation angle, different colors and transparency superimposed on each other can be **.

In this case, some possible ideas.

What would it look like to use only one-way borders?
The borders that appear are solid, what if they were replaced by a dashed line dashed? Maybe we could add border-radius
text-decoration also supports some kinds of underscores, so we can try using them too!

OK, putting the above idea into practice, we can get a variety of shapes drawn with various lines. They might look like this.

Of course, the effect can be randomized every time, as long as we make good use of the random parameters, you can poke into the following demo to feel it:

CodePen Demo -- CSS-doodle Pure CSS Patterns

Clip-path && Drop-shadow

Hey, when it comes to creating different lines and patterns, it's important to mention two other interesting properties in CSS. They are clip-path and fitler: drop-shadow().

Hmmm? What does that mean. Let's have a simple demo, using Clip-path, we can crop out different element shapes. For example, to implement a simple polygon.

div {
    width: 300px;
    height: 300px;
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    background: #333;
}

The effect is as follows.

Then using this idea, we can try to use clip-path to crop out various different shapes for overlaying.

In CSS-doodle Shapes, there are a very large number of clip-path shapes built in for us to choose from:

We pick one at random:

Applying the above rules, try to implement a graphic:

<css-doodle>
    :doodle {
        @grid: 1x100 / 100vmin;
    }
    @place-cell: center;
    @size: calc(100% - @calc(@index() - 1) * 1%);
    background: hsla(
        calc(calc(100 - @index()) * 2.55), 
        calc(@index() * 1%), 
        65%,
        calc(@index() / 100)
    );
    clip-path: @shape(
        fill-rule: evenodd;
        split: 200;
        scale: .45;
        x: cos(2t) + cos(π - 5t);
        y: sin(2t) + sin(π - 5t);
    );
</css-doodle>

This time instead of rotating the different angles, just giving each layer a different background base color, and being able to get something like:

CodePen Demo -- CSS Doodle - CSS Magic Pattern

Use `Clip-path` and `Drop-shadow` To Create Different Lines Patterns

OK, the above is using clip-path to create different patterns, but how do you get the different lines?

Not so fast. Using drop-shadow, you can create different shadows for Clip-path cropped shapes, but there are some structural constraints.

div {
    position: relative;
    width: 300px;
    height: 300px;
    filter: drop-shadow(0px 0px 1px black);

    &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        background: #fff;
        clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    }
}

We need to apply filter: drop-shadow(0px 0px 2px black) on top of the parent element of the element that utilizes clip-path, and the element that utilizes clip-path: must have background in order to attach a shadow effect to the clipped element.

The above code is as follows.

OK, perfect, this way we have greatly enriched our line library, and by applying the above line rules, a whole new wave of patterns will be created.

CodePen Demo -- CSS-doodle Pure CSS Pattern - clip-path - drop-shadow

OK, limited to space, not to expand one by one, interested in the above Demo Fork a copy to try for themselves. There are a lot of interesting patterns waiting to be generated.

Finally, let's take a look at the work of CSS-doodle author, Yuan Chuan, who used the above technique:

CodePen Demo -- css doodle art

Finally

More wonderful CSS technical articles are summarized in my Github -- iCSS.

And maybe you will love my CodePen, which has a large number of amazing CSS effects.

Well, that's all for this article, I hope it helps you. :)

Fantastic CSS border animation

Coco — Fri, 22 Jul 2022 03:34:35 +0000

Today I visited the blog site - shoptalkshow, and it was very interesting to see such a style:

I think its style is unique, especially some of the bezels.

So, in this article we will use CSS to create a variety of wonderful border effects.

CSS Border property

When it comes to borders, the first thing that comes to mind border is that the most commonly used one is solid, dashed which appears in the picture above dashed.

In addition to the most common solid, dashed, CSS border also supports none, hidden, dotted, double, groove, ridge, inset, and outsetother styles. Remove none, hidden to see all natively supported border styles:

These are the basics. If you want to implement a border of other styles, or add animation to the border, you need to cooperate with some other properties, or open your mind. OK, let's take a look at some additional interesting borders.

Border length changes

Let's start with a simpler one, to achieve a border effect like this:

This is actually two pseudo-elements that borrow elements. Only the upper and left borders, the lower and right borders of the two pseudo-elements are set respectively, hover and the height and width of the two pseudo-elements can be changed when passing . Very easy to understand.



div {
    position: relative;
    border: 1px solid #03A9F3;

    &::before,
    &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
    }

    &::before {
        top: -5px;
        left: -5px;
        border-top: 1px solid var(--borderColor);
        border-left: 1px solid var(--borderColor);
    }

    &::after {
        right: -5px;
        bottom: -5px;
        border-bottom: 1px solid var(--borderColor);
        border-right: 1px solid var(--borderColor);
    }

    &:hover::before,
    &:hover::after {
        width: calc(100% + 9px);
        height: calc(100% + 9px);
    }
}

CodePen Demo -- width border animation

Next, it will start to deepen the difficulty.

Dotted Border Animation

Using the dashedkeyword , you can easily create dashed borders.




div {
    border: 1px dashed #333;
}

Of course, our purpose is to make the border move. There is no way to use the dashed keyword . But there are many ways to implement dashed lines in CSS. For example, gradients are a good way:



div {
    background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
    background-size: 4px 1px;
    background-position: 0 0;
}

Take a look, the dashed lines simulated using gradients are as follows:

Well, the gradient supports multiple gradients. We can use gradients to represent all four sides of the container:



div {
    background: 
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
    background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
}

The effect is as follows:

OK, at this point, our dashed border animation is actually a big part of done. Although border-style: dashed doesn't support animation, but gradient does. Let's add a hover effect to the above div, and add an animation animation when we hover, changing the background-position of the element.



div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

OK, look at the effect, hover on the time, the border can moving, because the whole animation is the first and last connected, infinite loop animation looks like a dashed border in motion all the time, this is a small blindfold or a small trick: the

Here's another tip, if we want the dashed border to animate from other borders, transition to the dashed border and then animate the line. If you want to save some code, it's faster to use border, like this：



div {
    border: 1px solid #333;

    &:hover {
        border: none;
        background: 
            linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
            linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
            linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
            linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
        background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
        background-position: 0 0, 0 100%, 0 0, 100% 0;
    }
}

Due to the difference in the position of border and background on the box model, there will be an obvious visual misalignment:

To solve this problem, we can replace border with outline, because outline can set outline-offset. This solves the problem perfectly.



div {
    outline: 1px solid #333;
    outline-offset: -1px;

    &:hover {
        outline: none;
    }
}

Finally, take a look at the effect applied to the actual button:

The complete code of the above Demo is as follows:

CodePen Demo -- dashed border animation

Other cool uses for gradients

With gradients, more than just the above effects can be achieved.

We continue to dig deep into the gradient and use the gradient to achieve such a background:



div {
    position: relative;

    &::after {
        content: '';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background-repeat: no-repeat;
        background-size: 50% 50%, 50% 50%;
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
    }
}

Note that the graphic generated by the pseudo element of the element is used here, and the width and height of the parent element are the same as those of the parent 200% element overflow: hidden.

Next, add rotation to it:



div {
    animation: rotate 4s linear infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

Take a look at the effect:

Finally, use a pseudo-element to mask the middle, and a nice border animation will come out (translucent elements will appear in the animation to facilitate understanding of the principle):

The complete code of the above Demo is as follows. I first saw this effect in this author -- Jesse B

CodePen Demo -- gradient border animation

Change the color of the gradient

After mastering the above basic skills, we can make some adjustments to the colors of the gradient, we will turn 4 colors into 1 color:



div::after {
    content: '';
    position: absolute;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    background-position: 0 0;
    background-image: linear-gradient(#399953, #399953);
}

Get a graph like this:

Again, let it spin together, and a single-color chasing border animation comes out:

CodePen Demo -- gradient border animation 2

Wow, very nice look. However, if it is a single line, there is an obvious defect, that is, the end of the border is a small triangle instead of vertical, which may not be applicable in some scenarios or the PM cannot accept it.

Is there any way to get rid of these small triangles? Yes, in the following we will introduce another method to use clip-path and eliminate these small triangles.

Smart Use of Conic-gradient

Before introducing clip-path, let's talk about angular gradients.

The linear-gradient is the main one used above. We can achieve exactly the same effect with the angular gradient conic-gradient.

Let's try to use conic-gradient to achieve the same effect, this time in a darker style. The core code is as follows.



.conic {
    position: relative;

    &::before {
        content: '';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);
        animation: rotate 4s linear infinite;
    }
}
@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

The renderings and schematic diagrams are as follows. Rotate a graph with a partial angular gradient, and use another pseudo-element to mask the middle part, so that only the line part is leaked:

CodePen Demo -- Rotating border 3

Smart Use of clip-path

It is an old friend again clip-path, and interesting things will never be absent.

clip-path it is possible to animate the coordinate point itself, transforming from one clipping shape to another clipping shape.

Using this feature, we can cleverly implement such a border following effect. The pseudo code is as follows:



div {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid gold;
        animation: clippath 3s infinite linear;
    }
}

@keyframes clippath {
    0%,
    100% {
        clip-path: inset(0 0 95% 0);
    }
    25% {
        clip-path: inset(0 95% 0 0);
    }
    50% {
        clip-path: inset(95% 0 0 0);
    }
    75% {
        clip-path: inset(0 0 0 95%);
    }
}

The renderings together with the schematic diagram:

CodePen - clip-path border animation

Here, because the element will be cropped, borrowing the pseudo-element as the background for cropping and animation is enough, the advantage of using clip-path, the cut out border will not produce small triangles. Also, this method supports rounded corners border-radius.

If we use another pseudo-element as well, to actually implement a button style, we can get the effect that.

CodePen - clip-path border animation 2

Smart use of overflow

The following trick is implemented using overflow. Implement such a border animation:

Why do you say it is overflow realized ?

Take a look:

CodePen Demo -- 巧用overflow及transform实现线条hover效果

Two core points.

we use overflow: hidden to hide an entire element that would otherwise be outside the container
we use transform-origin to control the center of rotation of the element

Did you notice that almost all of the interesting CSS effects use a similar technique?

*Simply put, the animation we see is only a small part of the original phenomenon, through specific cropping, transparency changes, masks, etc., so that we end up seeing only a part of the original phenomenon. *

Smart Use of border-image

With border-image, we can also implement some interesting border animations. There is a very good article about border-image - The correct use of border-image, so we won't go into the basic definition in this article.

If we have a graph like this:

You can use the features of border-image-slice and border-image-repeat to get a similar border pattern.



div {
  width: 200px;
  height: 120px;
  border: 24px solid;
  border-image: url(image-url);
  border-image-slice: 32;
  border-image-repeat: round;
}

On this basis, the height and width of the element can be changed at will, so that it can be expanded to any size of the container border:

CodePen Demo -- border-image Demo

Then, in this article -- How to Animate a SVG with border-image, it also explains a way to use border- image, which is very cool.

Unlike the above example, we just need to make our pattern, move, that is we need a background image like this.

Then, we can also get the moving border map, the code is exactly the same, but the border is moving:

CodePen Demo -- Dancing Skull Border

border-image && Gradients

border-image can also be filled with a color or gradient directly, in addition to posting references to url.

We can use border-image + filter + clip-path to achieve a rounded border with a gradient transformation.



.border-image-clip-path {
    width: 200px;
    height: 100px;
    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
    clip-path: inset(0px round 10px);
    animation: huerotate 6s infinite linear;
    filter: hue-rotate(360deg);
}

@keyframes huerotate {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

CodePen Demo -- clip-path, border-image and filter to achieve rounded gradient border

Finally

More wonderful CSS technical articles are summarized in my Github -- iCSS.

And maybe you will love my CodePen, which has a large number of amazing CSS effects.

Well, that's all for this article, I hope it helps you. :)

Pure CSS for incredible mouse follow effect

Coco — Wed, 20 Jul 2022 07:35:22 +0000

The mouse follow effect, as the name implies, is that the element will follow the movement of the mouse and make the corresponding movement. It probably looks something like this.

Generally speaking, CSS is responsible for presentation and JavaScript is responsible for behavior. The effect of mouse following is a behavior, and JavaScript is usually needed to achieve it.

Of course, the focus of this article is to introduce how to use CSS to simulate some mouse following behavior animation effects without JavaScript.

Principle

Taking the above Demo as an example, to use CSS to implement mouse follow, the most important point is:

How to monitor where the current mouse is in real time?

OK, in fact, many CSS effects are inseparable from the word blindfold. To monitor where the mouse is currently, we just need to fill the page with elements:

We use 100 elements to cover the entire page. When hovering, the color is displayed. The core SCSS code is as follows:



<div class="g-container">
  <div class="position"></div>
  <div class="position"></div>
  <div class="position"></div>
  <div class="position"></div>
  ... // 100 divs
</div>



.g-container {
    position: relative;
    width: 100vw;
    height: 100vh;
}

.position {
    position: absolute;
    width: 10vw;
    height: 10vh;
}

@for $i from 0 through 100 { 

    $x: $i % 10;
    $y: ($i - $x) / 10;

    .position:nth-child(#{$i + 1}) {
        top: #{$y * 10}vh;
        left: #{$x * 10}vw;
    }

    .position:nth-child(#{$i + 1}):hover {
        background: rgba(255, 155, 10, .5)
    }
}

We can get this effect:

Okay, if the hover effect of each element is removed, then the operation page at this time has no effect. But at the same time, through the :hover pseudo, we can probably know which interval on the page is on the page.

Let's continue, let's add an element (round ball) to the page, and position it absolutely in the middle of the page:



<div class="g-ball"></div>



.ball {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10vmax;
    height: 10vmax;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

Finally, with the help of the ~ sibling element selector, we control the position of the blob element when hovering over the page (actually hovering over a hundred hidden divs) by the div we are currently hovering over.



@for $i from 0 through 100{ 

    $x: $i % 10;
    $y: ($i - $x) / 10;

    .position:nth-child(#{$i + 1}):hover ~ .ball {
        top: #{$y * 10}vh;
        left: #{$x * 10}vw;
    }
}

At this point, a simple pure CSS implementation of the mouse-following effect has been achieved, for your convenience, take a look at the following image to understand.

If you want to view the complete demonstration, you can click here:CodePen Demo -- CSS to achieve mouse follow

Existing problems

As far as the above Demo is concerned, there are still many flaws, such as

poor accuracy

You can only control the movement of the element to the space where the div is, not the exact mouse position. For this, we can optimize by increasing the number of hidden divs. For example to increase 100 tiled divs to 1000 tiled divs.

Movement is not smooth enough

The effect does not look silky enough, and this may need to be optimized through a reasonable easing function and appropriate animation delay.

More attempts

Hmm. The principle is mastered, so let's see what other interesting effects we can drum up using this technique.

CSS mouse follow button effect

At first, I saw this effect on CodePen, using SVG + CSS + JS, and I thought, using only CSS, could I copy.

CodePen Demo -- Gooey mouse follow

Well, the ideal is very rich, but the reality is very hard. Using CSS alone, there are still many limitations.

But we can still use the methods described above to achieve mouse follow
Using the CSS filter filter: blur() contrast() to simulate element blending, see this article: CSS Filter Tips and Details You Didn't Know About

Okay, look at the bankruptcy version of the simulation using just CSS.

It's a bit too weird, so you can tighten up the effect a bit, by adjusting the colors, the filter strength (just trying everything...) to get a slightly better and similar effect: !

CodePen Demo -- CSS mouse follow button effect

Full screen mouse follow animation

OK, go ahead, here's something a little flashier. Well, it's the flashy kind. 😅

If we control not just one element, but multiple elements. The animation effects between the elements are then set to different transition-delay, sequential delay motion. Wow, it's exciting to think about. Like this.

CodePen Demo -- mouse-follow animation PURE CSS MAGIC MIX

If we could be a little more imaginative, then we could collide a little more with.

This effect is the work of a Japanese CodePen author I really like, Yusuke Nakaya, source code: Demo -- Only CSS: Water Surface

Mouse Follow Indication

Of course, it is not necessary to indicate the movement of an element. The technique of using a div to spread out the page to capture the current position of an element can also be used for other effects, such as indicating mouse movement: !

transition-duration: 0.5s for the default background-spread div
when hovering to the element background div, change the transition-duration: 0s of the div currently hovered to, and give the background color when hovering, so that the div currently hovered to will be displayed immediately
When the mouse leaves the div, the transition-duration of the div will change back to the default state, that is, transition-duration: 0.5s, and the background color will disappear, so that the background color of the div left will slowly transition to transparent, causing the effect of a vignette.

CodePen Demo -- cancle transition

Finally

More wonderful CSS technical articles are summarized in my Github -- iCSS.

And maybe you will love my CodePen, which has a large number of amazing CSS effects.

Well, that's all for this article, I hope it helps you. :)

Interesting box-decoration-break

Coco — Tue, 19 Jul 2022 09:09:42 +0000

In the past two days, I came across a very interesting CSS property — box-decoration-break. Let’s take a look.

How can we understand box-decoration-break?:

box — box, which can be understood as an element box model, like a div tag
decoration — understood as element style
break — line break, reference word-break, understood as the performance of line break

Then, this property can be first understood as the expression of the element’s style when a line break occurs.

MDN: The box-decoration-break CSS property specifies how an element’s fragments should be rendered when broken across multiple lines, columns, or pages. The general idea is that the box-decoration-break property specifies how an element fragment should be rendered when a line wrap/break occurs.

Only two values can be selected:

{
    box-decoration-break: slice;   // default
    box-decoration-break: clone;
}

Example

This attribute usually works on inline elements. Suppose we have the following structure and add a border to it:

<span>ABCDEFGHIJKLMN</span>

span {
    border: 2px solid #999;
}

Well, the effect is as follows, it's a very normal effect:

Well, the next step is break, we break the text of the above line, and the style remains unchanged:

<span>ABCD <br/>EFG <br/> HI<br/> JKLMN</span>

Got the following result:

you can see that when the text wraps, the border also changes. The first and last lines have three borders, and the middle two lines have only the upper and lower borders. If the 4 lines are combined, they can be assembled into Figure 1, which is a normal display effect.

Next, we add the protagonist of this article box-decoration-break: clone:

span {
    border: 2px solid #999;
+   box-decoration-break: clone;
}

After it takes effect, we will get this result:

box-decoration-break: clone

Seeing this, we can already roughly understand the role of this property:

box-decoration-break: cloneInline elements that use, if there is line wrapping, each line will have all the full styling of the original single line.

Let's look at another example to deepen our understanding. There is the following structure, which uses the two effects box-decoration-break: clone before:

<span >每一行 <br/>样式 <br/> 都 <br/> 保持<br/> 完整独立</span>

CodePen Demo -- box-decoration-break

box-decoration-break: clone Effective Range

Of course, elements that box-decoration-break: clone use are not available for every style, but only for the following styles:

background
border
border-image
box-shadow
clip-path
margin
padding
Syntax

box-decoration-break: clone in action

Next, let's see if there are any reliable practical application scenarios.

box-decoration-break: clone to achieve text selection effect

There will be scenarios where we want to highlight a specific paragraph of text in a multi-line text. In this case, we can nest the SPAN with P to show the SPAN wrapped text in some specific way.

For example, we have this text:

<p>
The <span>box-decoration-break</span> CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the <span>specified border, padding, and margin wrapping each fragment.</span> The border-radius, border-image, and box-shadow are applied to each <span>fragment independently.</span> 
</p>

Among them, we wrap the content that needs to be emphasized by  tags , give a specific style and add box-decoration-break: clone it, so that no matter whether the emphasized text wraps or not, the emphasized background of each place is the same:

p {
    font-size: 22px;
    line-height: 36px;
}

span {
    background-image: linear-gradient(135deg, deeppink, yellowgreen);
    color: #fff;
    padding: 2px 10px;
    border-radius: 50% 3em 50% 3em;
    box-decoration-break: clone;
}

Get the following effect:

What if you don't add box-decoration-break: clone? Then if there is a newline, the effect will be greatly reduced:

CodePen Demo -- text-decoration-break demo

box-decoration-break with a specific border for each line of text

There will be such a scenario, we want each line of copy to have a specific border style, like this:

How to achieve it? Maybe one per line , with the above styles  set. But what if the text content is indeterminate and the container's width is indeterminate?

This scenario box-decoration-break is also use. Of course, there is a little trick here. Normally, it box-decoration-break: clone only works on the inline element , if our copy is wrapped in a  tag like this:

<p>
The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the specified border, padding, and margin wrapping each fragment. The border-radius, border-image, and box-shadow are applied to each fragment independently. 
</p>

box-decoration-break: clone To  take effect on, it can be achieved  by display: inline. In this way, to achieve the above effect, we only need:

p {
    display: inline;
    box-decoration-break: clone;
    background:linear-gradient(110deg, deeppink 0%, deeppink 98%, transparent 98%, transparent 100%);
}

Fits perfectly no matter how the text content or container width changes:

CodePen Demo -- box-decoration-break Each line of text with a specific border

box-decoration-break combined with transition animation

Combining the above, we can also consider combining box-decoration-break with transition effects or animation effects.

For example, we hope that when we hover the text content, some text paragraphs that need to be displayed can be highlighted, which may be like this:

CodePen Demo -- box-decoration-break with transition animation

Or：

CodePen Demo -- box-decoration-break with transition animation

You can try to click into Demo, and then remove box-decoration-break: clone it, you will find that the effect is greatly reduced.

Compatibility（2022–07–19）

Well, according to the usual compatibility, it should not be very good. And MDN also gives this hint:

This is an experimental technology. Check the Browser compatibility table carefully before using this in production.

Take a look at Can I Use, it's actually good:

Finally

More wonderful CSS technical articles are summarized in my Github -- iCSS.

And maybe you will love my CodePen, which has a large number of amazing CSS effects.

Well, that's all for this article, I hope it helps you. :)

Amazing Pure CSS Scrolling Indicator Effect

Coco — Mon, 18 Jul 2022 07:12:04 +0000

An interesting question is how to implement the following scrollbar effect using CSS?

It is the yellow scrolling progress bar at the top, which changes in length as the page scrolls.

Before continuing to read below, you can take a moment. Try to think about the above effect or try it yourself, whether you can achieve the above effect skillfully without using JavaScript.

OK, this effect is a similar little problem I encountered in the process of my daily development. In fact, even if we can use Javascript, it feels very troublesome. So I’ve been wondering, is it possible to accomplish this effect using only CSS?

Analyze requirements

The first time I saw this effect, I felt that this scrolling animation could not be accomplished with CSS alone, because it involved the calculation of the scrolling distance of the page.

If you want to do it only with CSS, you have to find another way and use some clever methods.

Well, let’s use CSS to achieve this effect step by step with the help of some tricks and tricks. Analyze the difficulty:

How to know how far the user is currently scrolling the page and notify the top progress bar?

Normal analysis should be like this, but this falls into traditional thinking. The progress bar is just the progress bar, receiving the scrolling distance of the page and changing the width. What if the page scrolling and the progress bar were a whole?

Fulfill the requirement

Let’s not sell it, let’s use linear-gradients to achieve this function.

Assuming our page is wrapped <body> in , the entire body can be scrolled, and add this linear gradient from bottom left to top right to it:


 CSS
body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-repeat: no-repeat;
}

Then, we can get an effect like this:

Wow, the color change of the yellow block can actually express the overall progress. In fact, here, wise you should already know what to do next.

We use a pseudo-element to cover the extra part:



body::after {
    content: "";
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: -1;
}

In order to facilitate the demonstration, I changed the white base above to a black transparent base:：

The actual effect is as follows:

Those who are careful may notice that the progress bar does not end when the page scroll to the end.

The reason is that because bodythe height of the linear gradient sets the size of the entire body, let's adjust the height of the gradient:


 CSS
body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-size: 100% calc(100% - 100vh + 5px);
    background-repeat: no-repeat;
}

Here, the operation calc is performed , and subtraction 100vh, that is, the height of a screen is subtracted, so that the gradient just fits the upper right corner when it slides to the bottom.

And + 5px is the height of the scrolling progress bar, reserved for 5px the height of . Take a look at the effect, perfect:

So far, this requirement has been fulfilled perfectly, which is a good trick, complete Demo:

CodePen Demo -- Using Linear-Gradient Implement Scrolling Indicator Effect

Finally

More wonderful CSS technical articles are summarized in my
Github-iCSS.

Well, that’s all for this article, I hope it helps you. :)

Text carousel and image carousel using CSS?

Coco — Sat, 16 Jul 2022 06:51:26 +0000

Today, I will share an animation technique that can be used in real business.

Skillfully use frame-by-frame animation and tweened animation to achieve an infinite loop carousel effect, like this:

Seeing the above diagram, maybe you will say, isn’t this a very simple translation animation?

Let’s make a simple analysis. On the surface, it seems that there are only elements transform: translate() in displacement, but note that there are two difficulties here:

This is an infinite carousel effect, our animation needs to support infinite carousel switching of any number of elements
Because it is a carousel, when it runs to the last one, it needs to animate to the first element

At this point, you can pause and think for a moment. If there are 20 elements and you need to perform a similar infinite carousel broadcast, using CSS to achieve, how would you do it?

Frame-by-frame animation controls overall switching

First, I need to use the frame-by-frame animation effect, also known as the step easing function, using the steps in animation-timing-function, the syntax is as follows:



{
    /* Keyword values */
    animation-timing-function: step-start;
    animation-timing-function: step-end;
    /* Function values */
    animation-timing-function: steps(6, start)
    animation-timing-function: steps(4, end);
}

Suppose we have this HTML structure:



<div class="g-container">
  <ul>
    <li>Lorem ipsum 1111111</li>
    <li>Lorem ipsum 2222222</li>
    <li>Lorem ipsum 3333333</li>
    <li>Lorem ipsum 4444444</li>
    <li>Lorem ipsum 5555555</li>
    <li>Lorem ipsum 6666666</li>
  </ul>
</div>

First, we implement a simple layout like this:

Here, to achieve a carousel effect, and it is an arbitrary number, we can use animation-timing-function: steps()：



:root {
  // the number of items
  --s: 6;
  // container's height
  --h: 36;
  // per animation duration
  --speed: 1.5s;
}
.g-container {
  width: 300px;
  height: calc(var(--h) * 1px);
}
ul {
  display: flex;
  flex-direction: column;
  animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}
ul li {
  width: 100%;
}
@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, calc(var(--s) * var(--h) * -1px));
  }
}

Don’t panic when you see a few CSS variables above, it’s actually quite understandable:

calc(var(--speed) * var(--s))：The duration of a single animation * the number of rotations, that is, the total animation duration
steps(var(--s)) is the frame number of the frame-by-frame animation, here is steps(6), well understood
calc(var(--s) * var(--h) * -1px)) The height of a single li container * the number of carousels, which is actually the overall height of the ul, which is used to set the end value of the frame-by-frame animation

The above effect is actually as follows:

If we add overflow: hidden to the container, this is the effect:

In this way, we get the overall structure, at least, the whole effect is circular.

But since it’s just frame-by-frame animation, only the transition can be seen, but there is no transition animation effect between each frame. So, next, we have to introduce motion tweens.

Use tween animation to switch between two sets of data

We need to use tween animation to achieve dynamic switching effects.

This step is actually very simple. What we need to do is to move a set of data from state A to state B using transform.

If you take one out for demonstration, the rough code is as follows:



<div class="g-container">
  <ul style="--s: 6">
    <li>Lorem ipsum 1111111</li>
    <li>Lorem ipsum 2222222</li>
    <li>Lorem ipsum 3333333</li>
    <li>Lorem ipsum 4444444</li>
    <li>Lorem ipsum 5555555</li>
    <li>Lorem ipsum 6666666</li>
  </ul>
</div>



:root {
  --h: 36;
  --speed: 1.5s;
}
ul li {
  height: 36px;
  animation: liMove calc(var(--speed)) infinite;
}
@keyframes liMove {
  0% {
    transform: translate(0, 0);
  }
  80%,
  100%  {
    transform: translate(0, -36px);
  }
}

A very simple animation:

Based on the above effects, if we combine the frame-by-frame animation mentioned at the beginning with the tween animation here, the overall movement of ul is stacked with the single movement of li:



:root {
  --s: 6;
  --h: 36;
  --speed: 1.5s;
}
.g-container {
  width: 300px;
  height: calc(var(--h) * 1px);
}
ul {
  display: flex;
  flex-direction: column;
  animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}
ul li {
  width: 100%;
  animation: liMove calc(var(--speed)) infinite;
}
@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, calc(var(--s) * var(--h) * -1px));
  }
}
@keyframes liMove {
  0% {
    transform: translate(0, 0);
  }
  80%,
  100%  {
    transform: translate(0, calc(var(--h) * -1px));
  }
}

You can get this effect:

Wow, the magical chemical reaction happened! Based on the combination of frame-by-frame animation and tween animation, we have almost achieved a carousel effect.

Of course, there is a slight flaw. You can see that the last set of data is transformed from the sixth set of data to a set of empty data:

Fill the first set of data in the header at the end

Someone who has actually developed a carousel must know that here, it is actually very easy to handle. We only need to fill in the first data of a group of headers at the end:

Modify our HTML:



<div class="g-container">
  <ul>
    <li>Lorem ipsum 1111111</li>
    <li>Lorem ipsum 2222222</li>
    <li>Lorem ipsum 3333333</li>
    <li>Lorem ipsum 4444444</li>
    <li>Lorem ipsum 5555555</li>
    <li>Lorem ipsum 6666666</li>
    <!-- Fill the first set of data -->
    <li>Lorem ipsum 1111111</li>
  </ul>
</div>

So, let’s look at the effect again：

Beautiful！If you still have doubts, we add overflow: hidden to the container, the actual effect is as follows, through the additional last set of data, our entire animation is just perfectly connected, a perfect carousel effect:

For the complete code, you can click here：CodePen Demo -- Vertical Infinity Loop

Horizontal infinite carousel

Of course, the vertical rotation is realized, and the horizontal effect is the same.

In addition, we can fill in the CSS variable value in the style in the HTML structure, and pass in the actual number of li, so as to adapt to different animations according to the number of li:



<div class="g-container">
  <ul style="--s: 6">
    <li>Lorem ipsum 1111111</li>
    <li>Lorem ipsum 2222222</li>
    <li>Lorem ipsum 3333333</li>
    <li>Lorem ipsum 4444444</li>
    <li>Lorem ipsum 5555555</li>
    <li>Lorem ipsum 6666666</li>
    <!--Fill the first set of data-->
    <li>Lorem ipsum 1111111</li>
  </ul>
</div>

The CSS code of the whole animation is basically the same. We only need to change the transform value of the two animations, from vertical displacement to horizontal displacement:



:root {
  --w: 300;
  --speed: 1.5s;
}
.g-container {
  width: calc(--w * 1px);
  overflow: hidden;
}
ul {
  display: flex;
  flex-wrap: nowrap;
   animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}
ul li {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  animation: liMove calc(var(--speed)) infinite;
}
@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(calc(var(--s) * var(--w) * -1px), 0);
  }
}
@keyframes liMove {
  0% {
    transform: translate(0, 0);
  }
  80%,
  100%  {
    transform: translate(calc(var(--w) * -1px), 0);
  }
}

In this way, we can easily convert it into a horizontal effect:

For the complete code, you can click here：CodePen Demo -- Horizontal Infinity Loop

Image Carousel? Not a problem!

OK, the above is just the text version of the carousel, what if it is a picture?

No problem, the method is the same. Based on the above code, we can easily modify it to get the carousel effect of the image version.

The code is the same, so it will not be listed, just look at the effect:

For the complete code, you can click here：CodePen Demo -- Horizontal Image Infinity Loop

Once you’ve mastered this technique, you can apply it to a lot of carousel effects that only require a simplified version.

To briefly summarize, very interesting techniques:

Use frame-by-frame animation to achieve an overall carousel loop effect
Use tween animation to achieve specific animation effects from state A to state B
Frame-by-frame animation with tween animation to form the effect of the overall carousel
By adding a set of header data to the end of the HTML structure, the connection of the overall animation is realized
Through the style tag of the HTML element, using CSS variables, fill in the actual number of DOM participating in the cycle, you can realize the connection between JavaScript and CSS

Finally

OK, this is the end of this article, I hope this article will help you :)

More wonderful CSS technical articles are summarized in my Github -- iCSS , which will be updated continuously. Welcome to click star to subscribe to the collection.

DEV Community: Coco

Reflection! Cool Effects with -webkit-box-reflect

What is -webkit-box-reflect

Set the reflection distance

Set the gradient of the reflection

Use -webkit-box-reflect to achieve some interesting animations

Using -webkit-box-reflect in buttons

Use -webkit-box-reflect in the Text Effects

Use -webkit-box-reflect in 3D Effects

Use -webkit-box-reflect to create artistic patterns

Finally

Unbelievable! CSS MASK implements video figure mask

Simple usage of MASK

Use mask to achieve figure mask filtering

Application in real production

Finally

Amazing CSS transition tips and details

Not all properties support transitions

Transition can separately control each property

Dynamically change transition-duration

Signature Panel Implemented in Pure CSS

Finally

The Magical Use of Uncommon Labels Fieldset and Legend

Learn about fieldset and legend

Controls the position and style of legend

Application scenario -- horizontal lines on both sides of the title

border nested text

Finally

Amazing! Implementing artistic graphics with CSS

Create a Center Layout

Change Elements' Size

Change Elements' Color

Change Elements' Angle

Use CSS-doole to achieve multi-element horizontal and vertical centering layout

Create CSS Art

Change the rotation angle of the element and the border color

Set Different Background Colors

Summary

Clip-path && Drop-shadow

Use Clip-path and Drop-shadow To Create Different Lines Patterns

Finally

Fantastic CSS border animation

CSS Border property

Border length changes

Dotted Border Animation

Other cool uses for gradients

Change the color of the gradient

Smart Use of Conic-gradient

Smart Use of clip-path

Smart use of overflow

Smart Use of border-image

border-image && Gradients

Finally

Pure CSS for incredible mouse follow effect

Principle

Existing problems

poor accuracy

Movement is not smooth enough

More attempts

CSS mouse follow button effect

Full screen mouse follow animation

Mouse Follow Indication

Finally

Interesting box-decoration-break

Example

box-decoration-break: clone

box-decoration-break: clone Effective Range

box-decoration-break: clone in action

box-decoration-break: clone to achieve text selection effect

box-decoration-break with a specific border for each line of text

box-decoration-break combined with transition animation

Compatibility（2022–07–19）

Finally

Amazing Pure CSS Scrolling Indicator Effect

Analyze requirements

Fulfill the requirement

Finally

Text carousel and image carousel using CSS?

Frame-by-frame animation controls overall switching

Use tween animation to switch between two sets of data

What is `-webkit-box-reflect`

Use `-webkit-box-reflect` to achieve some interesting animations

Using `-webkit-box-reflect` in buttons

Use `-webkit-box-reflect` in the Text Effects

Use `-webkit-box-reflect` in 3D Effects

Use `-webkit-box-reflect` to create artistic patterns

Dynamically change `transition-duration`

Controls the position and style of `legend`

Use `Clip-path` and `Drop-shadow` To Create Different Lines Patterns