Front end daily combat work No. 175: Yin and Yang patterns drawn in pure CSS

Yin and Yang is a simple and broad concept of ancient Chinese philosophy. It is difficult to form whether they are born or not, long and short, and high and low. This is the binary invented by our great ancestors, so programmers should learn and understand it more.

Effect preview

Press the "click preview" button on the right to preview on the current page, and click the link to preview in full screen.

https://codepen.io/comehope/pen/RwRNdLj

Source code download

Please download the full source code of the front-end combat series every day from github:

https://github.com/comehope/front-end-daily-challenges

Code interpretation

1, Define DOM structure

This is a single element work. The DOM structure is very simple. There is only a div element with a class name of Yin Yang.

<div class="yin-yang"></div>

2, Define container

Set the page background to light gray.

body {
    margin: 0;
    height: 100vh;
    background-color: lightgrey;
}

Define the size of the container as a square and adopt the relative unit em. in order to see the space occupied by the container, fill the container with white temporarily.

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.yin-yang {
    width: 10em;
    height: 10em;
    font-size: 20px;
    background-color: white;
}

The effect is as follows:

3, Yin Yang pattern composition

Comment out the background color attribute just temporarily set, set the container background color with a sharp linear gradient, and divide the container background equally with two colors. Because these two colors will be used later, variables -- color1 and -- color2 are used to represent them for reuse. The yin-yang pattern was originally black-and-white. In the development stage, in order to facilitate observation, we temporarily replaced it with tomato color and orange.

.yin-yang {
    /*background-color: white;*/
    --color1: tomato;
    --color2: orange;
    background-image: linear-gradient(var(--color1) 50%, var(--color2) 50%);
}

The effect is as follows:

Next, draw the pattern in the middle. First draw the one on the left, which is realized by pseudo elements. Its background color is the color of variable color1, which is vertically centered through flex layout. The function of mix blend mode attribute is to prevent the color of pseudo elements from being mixed and indistinguishable because they are exactly the same as the background color. This is called "mixed mode", which can be referred to by interested students MDN document And personally experiment with the effects of various mode values.

.yin-yang {
    display: flex;
    align-items: center;
}

.yin-yang::before {
    content: '';
    width: 50%;
    height: 50%;
    background-color: var(--color1);
    mix-blend-mode: screen;
}

The effect is as follows:

Set a thick border for the pseudo element, and the border uses the color of the variable -- color2.

.yin-yang::before {
    box-sizing: border-box;
    border: 1.5em solid var(--color2);
}

The effect is as follows:

Now it looks like square elements, which will be rounded later. If you are in a hurry, you can add border radius: 50%; Properties to see the effect.
Next, copy the effect of the:: before pseudo element to the:: after pseudo element and add it directly to the pseudo element selector Yin Yang:: after is OK.
The only difference between the two pseudo elements is that their colors are opposite, so we define their color attribute values as -- inner color and -- outer color respectively, which refer to the colors of the inner and outer borders of the element.

.yin-yang::before,
.yin-yang::after {
    background-color: var(--inner-color);
    border: 1.5em solid var(--outer-color);
}

.yin-yang::before {
    --inner-color: var(--color1);
    --outer-color: var(--color2);
}

.yin-yang::after {
    --inner-color: var(--color2);
    --outer-color: var(--color1);
}

The effect is as follows:

4, Undo auxiliary properties and coloring

Well, now turn them all into circles.

.yin-yang,
.yin-yang::before,
.yin-yang::after {
    border-radius: 50%;
}

The effect is as follows:

Cancel the color mixing mode attribute mix blend mode used for auxiliary development.

.yin-yang::before,
.yin-yang::after {
    /*mix-blend-mode: screen;*/
}

The effect is as follows:

Then change the color to black and white. So far, the static layout of Yin-Yang diagram is completed.

.yin-yang {
    /*--color1: tomato;
    --color2: orange;*/
    --color1: white;
    --color2: black;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.3);
}

The effect is as follows:

5, Increase animation effect

Finally, a rotating animation is added to illustrate the endless meaning of dynamic balance between yin and Yang.

.yin-yang {
    animation: rotating linear 5s infinite;
}

@keyframes rotating {
    to {
        transform: rotate(1turn);
    }
}

be accomplished!

About the author

Zhang even, the pseudonym of the Internet @ comehope, touched the Internet at the end of the 20th century and was captured by the infinite charm of the Web. Since then, he has always been fighting in the front line of Web development.

The front end daily practice column is my notes on practicing project-based learning in recent years. Project driven learning shows the whole process from inspiration to code implementation. It can also be used as a practice exercise and development reference for front-end development.

My book CSS3 art was published by the people's post and Telecommunications Publishing House in January 2020. It is printed in full color. Using more than 100 vivid and beautiful examples, it systematically analyzes the important syntax related to CSS and visual effects, and contains nearly 10 hours of video demonstration and explanation. Jingdong / tmall / Dangdang are available.

Tags: Front-end css3 html5 html css

Posted by ringartdesign on Thu, 12 May 2022 21:30:13 +0300