CSS Whimsy | Single Div Drawing Skills

I often see articles about CSS drawing, such as using pure HTML + CSS to draw a Doraemon picture. The way to achieve this is to realize one piece of the picture step by step by stacking divs. There is no problem with this technique itself, but it is less difficult. Just be patient, and many graphics can be realized slowly.

Based on the demand of CSS drawing, a new genre gradually . The 160b845bd7297e single label realizes the graphic . That is to say, a complex graphic is completed by only one label. This is relative to the unlimited use of labels and continuous stacking of divs. That said, the difficulty has undoubtedly increased a lot, and a deeper understanding of CSS is also required.

For example, the following graphic is completed by a div element, derived from A Single Div :

This article will introduce some techniques for drawing with a single label, and use these techniques to borrow a single label to achieve some complex graphics~😅

Reasonable use of pseudo-elements

Although it is a label, almost all examples of implementing a graphic title with a single label use 3 elements. This is the most core part of the single-label implementation of graphics:

In addition to the style of the element itself, we can control the two pseudo-elements of the element- ::before and ::after . In fact, there are 3 elements in total.

Well, for example, the following heart-shaped graphic can only be implemented with a div. How to do it:

This kind of irregular graphics itself is more complicated to use pure CSS. SVG is usually used. clip-path But look carefully at the graphics, we don’t need clip-path , try to divide the picture into 3 parts:

Wow, in fact, here, we only need the element itself to achieve a square, and the two pseudo-elements of the element use absolute positioning to achieve two circles, which can be superimposed together! The complete code is also very simple:

div {
    position: relative;
    transform: rotate(45deg);
    background: rgba(255, 20, 147, 0.85);
    width: 140px;
    height: 140px;
}
div::before,
div::after {
    content: "";
    position: absolute;
    top: 0;
    left: -70px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgb(255, 20, 147);
}
div::before {
    top: -70px;
    left: 0;
}

For the complete sample code, you can here 160b845bd72bd3 CodePen Demo - A Signle Div heartShape

Gradient & Multiple Gradient

It is no exaggeration to say that the gradient is the most used CSS property in single-label graphics.

reason for 160b845bd72c11 is that our gradient can be multi-gradient ! Gradient is not only a single linear-gradient or a single radial-gradient, for the background, it supports the superposition of multiple gradients, which is very important.

Okay, let’s take a look at this Tai Chi diagram:

In fact, the Tai Chi diagram is composed of multiple circles of different colors. Here, stacking multiple different divs and combining them is definitely OK. But our goal is to use a single label to complete.

When the graphics are all circles or lines, you should consider using multiple linear (radial) gradients. We can disassemble the above image.

It is actually composed of 1 linear gradient plus 4 circles generated by radial gradients:

Therefore, a complete code of a Taiji diagram only needs a div, even without the aid of pseudo-elements:

div {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: radial-gradient(#000 12.5px, transparent 12.5px),
        radial-gradient(#fff 12.5px, transparent 12.5px),
        radial-gradient(#fff 50px, transparent 50px),
        radial-gradient(#000 50px, transparent 50px),
        linear-gradient(90deg, #000 100px, #fff 100px);
    background-position: center 50px, center -50px, center 50px, center -50px, 0 0;
}

For the complete sample code, you can here 160b845bd72d00 CodePen Demo - A Single Div PURE CSS Tai Chi

Shadows & multiple shadows

An attribute very similar to gradient is shadow box-shadow , box-shadow attribute. One of its features is that it can be superimposed on multiple layers, and multiple shadow rules can be built-in. It is simply the ultimate killer for single-label drawing!

We try to use a div to achieve the following graphics:

At first glance, this graphic is actually very complicated. Clouds and raindrops don't seem to be achievable with just a label or a pseudo element.

In fact, this is not the case. First, let's take a look at this cloud. Although it has an irregular outline, it is actually a circle. Very suitable for using multiple radial gradients or multiple shadows!

In fact, it is a realizing circle, and then using the shadow to realize the superposition of multiple circles, the example animation, you can understand at a glance:

The amount of code is actually very small, the code to implement a cloud:

div{
  width:100px;
  height:100px;
  background:#fff;
  border-radius:50%;
  box-shadow:
    120px 0px 0 -10px #fff,
    95px 20px 0 0px #fff,
    30px 30px 0 -10px #fff,
    90px -20px 0 0px #fff,
    40px -40px 0 0px #fff;
}

CodePen Demo -- A Single Div Cloudy

Similar to the example code of clouds, raindrops are actually implemented with the help of multiple shadows:

div {
    position: absolute;
    width: 3px;
    height: 6px;
    border-radius: 50%;
    animation: rainy_rain 0.7s infinite linear;
    box-shadow: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px,
            rgba(0, 0, 0, 0.3) -50px 75px, rgba(0, 0, 0, 0.3) 55px 50px,
            rgba(0, 0, 0, 0.3) -18px 100px, rgba(0, 0, 0, 0.3) 12px 95px,
            rgba(0, 0, 0, 0.3) -31px 45px, rgba(0, 0, 0, 0.3) 30px 35px;
}

@keyframes rainy_rain {
    0% {
        box-shadow: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px,
            rgba(0, 0, 0, 0.3) -50px 75px, rgba(0, 0, 0, 0.3) 55px 50px,
            rgba(0, 0, 0, 0.3) -18px 100px, rgba(0, 0, 0, 0.3) 12px 95px,
            rgba(0, 0, 0, 0.3) -31px 45px, rgba(0, 0, 0, 0.3) 30px 35px;
    }
    // 省略部分阴影位移帧动画代码
    ...
    100% {
        box-shadow: rgba(0, 0, 0, 0) -10px 120px, rgba(0, 0, 0, 0) 40px 120px,
            rgba(0, 0, 0, 0.3) -50px 75px, rgba(0, 0, 0, 0.3) 55px 50px,
            rgba(0, 0, 0, 0.3) -18px 100px, rgba(0, 0, 0, 0.3) 12px 95px,
            rgba(0, 0, 0, 0.3) -31px 45px, rgba(0, 0, 0, 0.3) 30px 35px;
    }
}

The element itself and a pseudo-element of the element have just been used, and the remaining pseudo-element is enough to realize the shadow circle at the bottom. You can here for the complete Demo code: 160b845bd72f4b A Signle Div Rainy

To summarize briefly

At this point, you can briefly summarize that single-label graphics, especially complex graphics, are largely based on the above three techniques, namely:

• Single-label drawing is actually using the element itself and its two pseudo-elements ::before and ::after
• Reasonable use of multiple gradient overlays
• Reasonable use of multiple shadow overlay

Practice

Let's practice, use a single div to implement the following US team shield:

With the above foreshadowing, it is actually possible to use multiple radial gradients and multiple shadows for multiple circles, and the stars in the middle can also be easily achieved clip-path

div {
    position: absolute;
    width: 200px;
    height: 200px;
    background: 
        radial-gradient(
            at center,
            #0033b0 20%,
            #ce0021 20%,
            #ce0021 35%,
            #eee 35%,
            #eee 55%,
            #ce0021 55%
        );
    border-radius: 50%;
}
div::before {
    content: "★";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 47px;
    font-size: 55px;
}

We will get a graph like this:

It feels that the graphics are less shiny. We can continue to overlay some linear-gradient on the div to add some highlights to the surface of the shield:

div {
    position: absolute;
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg,  rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 65%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0) 35%,  rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 65%),
        linear-gradient(to right, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 65%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 65%),
        radial-gradient(
            ellipse at center,
            #0033b0 20%,
            #ce0021 20%,
            #ce0021 35%,
            #eee 35%,
            #eee 55%,
            #ce0021 55%
        );
    border-radius: 50%;
}
div::before {
    content: "★";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 47px;
    font-size: 55px;
}

OK, it can be perfectly realized:

here for the complete code: 160b845bd7331c A Signle Div Shield

A single label realizes a tape

Let's look at this graphic again, a tape graphic:

Looked very complicated, in fact, are round and all kinds of lines, in fact, is suitable to use a single tag to achieve, it is very time-consuming, require fine control background-image each gradient inside background-size , background-position :

First of all, through multiple gradients, the entire background structure is realized:

div {
    width: 180px;
    height: 120px;
    border-radius: 5px;
    background-image: linear-gradient(to right, #444 10px, transparent 10px),
        linear-gradient(to left, #444 10px, transparent 10px),
        linear-gradient(135deg, #444 20px, transparent 20px),
        linear-gradient(-135deg, #444 20px, transparent 20px),
        linear-gradient(
            to bottom,
            transparent 35px,
            #be0974 35px,
            #be0974 43px,
            #da6a57 43px,
            #da6a57 51px,
            #eebc31 51px,
            #eebc31 59px,
            #92a25b 59px,
            #92a25b 67px,
            #46a7c0 67px,
            #46a7c0 75px,
            transparent 75px
        ),
        linear-gradient(
            to bottom,
            transparent 10px,
            #f7f7f7 10px,
            #f7f7f7 85px,
            transparent 85px
        ),
        linear-gradient(to top, transparent 26px, #444 26px),
        linear-gradient(
            105deg,
            #444 70px,
            #333 70px,
            #333 73px,
            transparent 73px
        ),
        linear-gradient(
            -105deg,
            #444 70px,
            #333 70px,
            #333 73px,
            transparent 73px
        ),
        linear-gradient(to top, #444 24px, #777 24px, #777 26px, #444 26px);
    box-shadow: -4px -4px 2px rgb(0 0 0 / 20%);
}

Get the following graphics:

Through one of the pseudo elements, use box-shadow realize each circle point on the tape:

div:after {
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    background: #999;
    border-radius: 50%;
    box-shadow: 165px 0 0 #999, 0 104px 0 #999, 165px 104px 0 #999, 55px 101px 0 1px #222, 68px 98px 0 1px #222, 98px 98px 0 1px #222, 110px 101px 0 1px #222, 51px 38px 0 #444, 114px 38px 0 #444, 44px 46px 0 #444, 58px 46px 0 #444, 107px 46px 0 #444, 121px 46px 0 #444, 51px 53px 0 #444, 114px 53px 0 #444, 51px 46px 0 6px #ccc, 114px 46px 0 6px #ccc;
    left: 5px;
    top: 5px;
}

The last remaining pseudo-element can be used to realize the part of the style in the middle of the tape:

div:before {
    position: absolute;
    content: "";
    width: 90px;
    height: 26px;
    margin-left: -45px;
    left: 50%;
    top: 41px;
    background-color: #ccc;
    background-image: linear-gradient(to bottom, #444 5px, transparent 5px),
        linear-gradient(to top, #444 5px, transparent 5px),
        linear-gradient(to right, #444 30px, transparent 30px),
        linear-gradient(to left, #444 30px, transparent 30px),
        radial-gradient(circle at 10px 12px, #a0522d 32px, transparent 32px);
    border-radius: 30px;
}

In this way, it can be implemented with a single label smoothly. The Demo is taken from A Single Div here for the complete code: 160b845bd73611 CodePen Demo - A single Div Disk .

Of course, a single tag can achieve much more than that. Take a look at the following, all of which can be achieved by a div:

Cooperate with other high-level attributes

Of course, the above-mentioned drawing is quite conventional. With the help of pseudo-elements, background and box-shadow used. We can also try to add blending mode mix-blend-mode , filter filter and mask mask in a div to achieve some more interesting effects.

For example, the following effect uses a ghost effect realized by a div:

In addition to using a div to achieve the basic effect, it also uses the filter filter to achieve some fusion effects.

here for the complete code: 160b845bd737d6 CodePen Demo - A Single Div Ghost

At last

It is very interesting to use only CSS for single div drawing, and CSS can be better exercised, although it may not be used in business :)

Here are a few more sites for single-label drawing, you can take a look and imitate:

• A Single Div
• MagicCSS
• CodePen - Single Div

Okay, this concludes this article, I hope it helps you :)

If you want to get the most interesting CSS information, don’t miss my account - 160b845bd73958 iCSS front-end interesting 160b845bd7395c 😄

More wonderful CSS technical articles are summarized in my Github - iCSS , which is continuously updated, welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can exchange more, original articles, limited writing style, and lack of knowledge. If there are any irregularities in the article, please let me know.