Implementation of Single Div drawing techniques in CSS

You can often see articles about CSS drawing, such as using pure HTML + CSS to draw a Doraemon picture. The way to achieve this is to stack divs and realize the picture piece by piece step by step. There is nothing wrong with this technique itself, but it is a little less difficult. As long as you have patience, many graphics can be slowly realized.

Based on the demand for CSS drawing, a new school of thought has gradually emerged, which is to realize graphics with a single tag. That is to say, a complex graphic is completed with only one tag. Compared with being able to use tags infinitely and continuously stack divs, this is undoubtedly much more difficult and requires a deeper understanding of CSS.

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

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

Proper use of pseudo elements

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

In addition to the style of the element itself, we also have two pseudo-elements of the element - ::before and ::after , which is actually a total of 3 elements.

Well, for example, the heart-shaped graphic below can only be realized using one div, how to do it:

This kind of irregular shape is quite complicated to create using pure CSS, and is usually done with the help of SVG, which of course uses clip-path in CSS. But if you look closely at the graphic, we don't need clip-path . Try dividing the image into 3 parts:

Wow, actually, here, we only need the element itself to realize the square, and the two pseudo-elements of the element use absolute positioning to realize two circles, which can be superimposed on each other! 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 example code, you can click here CodePen Demo -- A Signle Div heartShape

Gradients & Multiple Gradients

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

The reason is that our gradient can be multiple gradients! Gradients are not limited to a single linear-gradient or a single radial-gradient. For background, it supports the superposition of multiple gradients, which is very important.

OK, let's take a look at this Tai Chi diagram:

In fact, the Tai Chi diagram is composed of multiple circles of different colors. It is definitely OK to stack multiple different divs here and combine them together. But our goal is to complete it with a single tag.

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

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

Therefore, the complete code of a Tai Chi diagram only needs a div, and even the assistance of pseudo-elements is not needed:

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 example code, you can click here CodePen Demo -- A Single Div PURE CSS Tai Chi

Shadows & Multi-Shadows

A property very similar to gradient is box-shadow . One of the characteristics of box-shadow is that it can be multi-layered and can have multiple shadow rules 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 quite complex. Clouds and raindrops do not seem to be something that can be achieved with just one tag or one pseudo-element.

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

In fact, it is just a circle, and then use shadows to realize the superposition of multiple circles. The example animation is easy to understand:

The amount of code is actually very small. Here is 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 sample code for clouds, raindrops are also 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;
    }
    // Omit some shadow displacement frame animation code...
    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;
    }
} 

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

Brief summary

At this point, we can briefly summarize that the realization of graphics with a single label, especially complex graphics, is largely based on the above three techniques, namely:

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

Practice

Let's practice and use a single div to implement the following Captain America shield:

With the above preparation, multiple circles can actually use multiple radial gradients and multiple shadows, and the star in the middle can also be easily achieved using characters or 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:

The graphic seems to lack some gloss, so we can add some linear-gradient to 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, then it can be perfectly realized:

You can find the complete code here: A Signle Div Shield

One label for one tape

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

It looks complicated, but it is actually just circles and lines. It is actually suitable to be implemented with a single tag, but it is very time-consuming and requires fine control of background-size and background-position of each gradient in background-image :

First, use multiple gradients to achieve the entire background structure:

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%);
}

The following graph is obtained:

Through one of the pseudo elements, use box-shadow to realize the circle points 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 is used to implement the style of the middle part 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, a single label is used to implement it. The demo is taken from A Single Div. You can click here for the complete code: CodePen Demo -- A single Div Disk.

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

With other high-level attributes

Of course, the above drawings are still relatively conventional, with the help of pseudo-elements, background , and box-shadow . We can also try to add mix-blend-mode , filter , and mask within a div to achieve some more interesting effects.

For example, the following effect uses a div to achieve the ghost effect:

In addition to using a div to achieve the basic effect, some filter filters are also used to achieve some fusion effects.

You can find the complete code here: CodePen Demo -- A Single Div Ghost

at last

It is still very interesting to use only CSS to draw a single div. It can also be a good exercise for CSS, although it may not be used in business:)

Here are a few more single-label drawing websites that you can check out and imitate:

• A Single Div
• MagicCSS
• CodePen - Single Div

Well, this article ends here, I hope it helps you😃

More wonderful CSS technical articles are collected in my Github -- iCSS. They are continuously updated. Welcome to click a star to subscribe and collect.

The above is the details of the implementation of Single Div drawing techniques in CSS. For more information about CSS single div single label drawing, please pay attention to other related articles on 123WORDPRESS.COM!