Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use a single div to achieve CSS drawing related knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe you read this how to use a single div to achieve CSS drawing article will have a harvest, let's take a look at it.

Pseudo element

Because CSS has pseudo-classes, although there is only one Div, I can actually use three elements. So, with div,div:before,div:after, we can do this:

The code is as follows:

Div {background: red;}

Div:before {background: yellow;}

Div:after {background: blue;}

It is easy to imagine that these three elements can be stacked into three layers side by side.

Shape

Using CSS and a single element, we can make three basic graphics. Use width and height attributes to make squares / rectangles, border-radius to make circles / ellipses, and border to make triangles / trapezoids.

We can also use CSS to create other graphics, but most of them can be easily combined with these basic graphics, which are the easiest to make and the easiest to modify.

Multiple identical shapes

With superimposed box-shadow, we can create multiple identical shapes that can have different sizes, colors, and blur effects. We can move these shapes on the x or y axis, so we can draw almost infinite shapes.

The code is as follows:

Div {

Box-shadow: 170px 0 10px yellow

330px 0 0-20px blue

330px 5px 5px-20px black

}

We can even add box-shadow to box-shadow. Pay attention to their declarative order. Furthermore, it is easier to understand them as layers.

Gradual change

Gradients can be used to create shading and shading effects by giving a light source, making simple, flat shapes look more realistic. Combined with multiple background-image, we can use many layers of gradients to achieve more complex light and shadow, or even more graphics.

The code is as follows:

Div {

Background-image: linear-gradient (to right, gray, white, gray, black)

}

Div:after {

Background-image: radial-gradient (circle, yellow 50%, transparent 50%), linear-gradient (to right, blue, red)

}

Vision

The most difficult part of vision is how to piece together these shapes into perceptible drawings. As I pay more and more attention to my drawing skills, I find that vision is very important. To do this, I often stare at pictures related to the subject and cut them into multiple visual parts. They are all shapes and colors. I've reduced the whole picture to small colored shapes or blocks, and I know (in general) how to use CSS to implement them.

Example

Let's take a closer look at the two drawings and learn how to break them down into different blocks and synthesize a large figure. The first one is a green crayon.

Crayons consist of two basic shapes: a rectangular body and a triangular tip.

I have to implement the following points to capture the feeling of a real crayon:

Different colors on paper packaging the shapes and text stripes printed on the package suggest that the crayon is a round light and shade effect, suggesting a round crayon and light source.

First, I use div and background colors to make the body part of the crayon, gradient from top to bottom, and use box-shadow to imply a three-dimensional feel:

The code is as follows:

Div {

Background: # 237449

Background-image: linear-gradient (to bottom

Transparent 62%

Black (.3)

Box-shadow: 2px 2px 3px black (.3)

}

Then, I use a left-to-right linear-gradient to make paper packaging. The alpha value is .6, so the previous gradient can be revealed.

The code is as follows:

Div {

Background-image: linear-gradient (to right

Transparent 12px

Rgba (41, 237, 133. 6) 12px

Rgba (41, 237, 133. 6) 235px

Transparent 235px)

}

Next, I continue to use the same method, gradient from left to right, to make the stripes on the crayon.

The code is as follows:

Div {

Background-image: linear-gradient (to right

Transparent 25px

Black (.6) 25px

Black (.6) 30px

Transparent 30px

Transparent 35px

Black (.6) 35px

Black (.6) 40px

Transparent 40px

Transparent 210px

Black (.6) 210px

Black (.6) 215px

Transparent 215px

Transparent 220px

Black (.6) 220px

Black (.6) 225px

Transparent 225px)

}

Paper packaging printed on the oval, using a radial-gradient easy to get!

The code is as follows:

Div {

Background-image: radial-gradient (ellipse at top

Black (.6) 50px

Transparent 54px)

}

I just showed each part separately, but don't forget that background-image looks like this:

The code is as follows:

Div {

/ / ellipse printed on wrapper

Background-image: radial-gradient (ellipse at top

Black (.6) 50px

Transparent 54px)

/ / printed stripes

Linear-gradient (to right

Transparent 25px

Black (.6) 25px

Black (.6) 30px

Transparent 30px

Transparent 35px

Black (.6) 35px

Black (.6) 40px

Transparent 40px

Transparent 210px

Black (.6) 210px

Black (.6) 215px

Transparent 215px

Transparent 220px

Black (.6) 220px

Black (.6) 225px

Transparent 225px)

/ / wrapper

Linear-gradient (to right

Transparent 12px

Rgba (41, 237, 133. 6) 12px

Rgba (41, 237, 133. 6) 235px

Transparent 235px)

/ / crayon body shading

Linear-gradient (to bottom

Transparent 62%

Black (.3)

}

After completing the div, we turn our attention to the before pseudo-class element, creating the pen end of the crayon. Using a solid and transparent border, I made a triangle and put it with the div I drew earlier.

The code is as follows:

Div:before {

Height: 10px

Border-right: 48px solid # 237449

Border-bottom: 13px solid transparent

Border-top: 13px solid transparent

}

Compared to the crayon pen holder, the pen tip looks a little flat, we can use: after pseudo-class element to fix this problem. I added a linear-gradient from top to bottom to create a reflective effect that runs through the whole crayon.

The code is as follows:

Div:after {

Background-image: linear-gradient (to bottom

White (0) 12px

White (.2) 17px

White (.2) 19px

White (0) 24px)

}

This adds more layers and realism to the flat triangle. Towards the end of the production, I added some text to: after and positioned it to make it look like it was printed on a crayon package.

The code is as follows:

Div:after {

Content: 'green'

Font-family: Arial, sans-serif

Font-size: 12px

Font-weight: bold

Color: black (.3)

Text-align: right

Padding-right: 47px

Padding-top: 17px

}

The great task has been completed!

Another example

Crayons are a good example of how to use background-image and gradient to produce real results. The following example shows the power of multiple box-shadow: a single div camera.

This is the main part of the camera, made with background-image and border-image.

The code is as follows:

Div:before {

Background: # 333

Box-shadow: 0 0 0 2px # eee

-1px-1px 1px 3px # 333

-95px 6px 0 0 # ccc

30px 3px 0 12px # ccc

-18px 37px 0 46px # ccc

-96px-6px 0-6px # 555

-96px-9px 0-6px # ddd

-155px-10px 1px 3px # 888

-165px-10px 1px 3px # 999

-170px-10px 1px 3px # 666

-162px-8px 0 5px # 555

85px-4px 1px-3px # ccc

79px-4px 1px-3px # 888

82px 1px 0-4px # 555

}

Similarly, here is the after (gray circle) and a few details of the box-shadow that uses it.

The code is as follows:

Div:after {

Background: linear-gradient (45deg, # ccc 40%, # ddd 100%)

Border-radius: 50%

Box-shadow: 0 3px 2px # 999

1px-2px 0 white

-1px-3px 2px # 555

0 0 0 15px # c2c2c2

0-2px 0 15px white

-2px-5px 1px 17px # 666

0 10px 10px 15px black (.3)

-90px-51px 1px-43px # aaa

-90px-50px 1px-40px # 888

-90px-51px 0-34px # ccc

-90px-50px 0-30px # aaa

-90px-48px 1px-28px black (.2)

-124px-73px 1px-48px # eee

-125px-72px 0-46px # 666

-85px-73px 1px-48px # eee

-86px-72px 0-46px # 666

42px-82px 1px-48px # eee

41px-81px 0-46px # 777

67px-73px 1px-48px # eee

66px-72px 0-46px # 666

-46px-86px 1px-45px # 444

-44px-87px 0-38px # 333

-44px-86px 0-37px # ccc

-44px-85px 0-34px # 999

14px-89px 1px-48px # eee

12px-84px 1px-48px # 999

23px-85px 0-47px # 444

23px-87px 0-46px # 888

}

A little crazy? But as you can see, multiple box-shadow can add a lot of detail to drawing with a single div.

The biggest challenge

I encountered two of the biggest challenges, the limitations of triangles and the unique behavior of gradient.

The problem of triangles

Because triangles are created using border, this greatly limits my use of it. Use border-image to add a gradient to border, and you cannot add one side of it alone. Cannot add box-shadow to the triangle created by border because box-shadow is added to the box model. So it can be difficult to create multiple triangles. It looks like this:

The code is as follows:

Div {

Border-left: 80px solid transparent

Border-right: 80px solid transparent

Border-bottom: 80px solid red

}

Div:before {

Border-left: 80px solid transparent

Border-right: 80px solid transparent

Border-bottom: 80px solid red

Border-image: linear-gradient (to right, red, blue)

}

Div:after {

Border-left: 80px solid transparent

Border-right: 80px solid transparent

Border-bottom: 80px solid red

Box-shadow: 5px 5px 5px gray

}

Multi-layer gradient

The behavior of the gradient is to fill the entire background. It is very skillful when stacking multiple gradient. You need to spend extra time thinking about transparency, z-index, and figuring out what is visible and what is not. However, if we can use gradient effectively, our drawings can contain a lot of amazing details.

Tardis is a good example of showing or hiding gradients, creating a picture with great detail. The following illustration shows the middle process of drawing, where you can see several gradients from top to bottom, with the width filling the entire container.

Using left-to-right and right-to-left gradient, I can mask some of the gradients while showing others.

The end result appears to contain a lot of graphics to form the front of the Tardis, but in fact it is a cascading linear-gradient. Most of the time you have to forge it.

View them dynamically

As a result of this project, a very cool and useful thing suddenly appeared: the Chrome browser plug-in called CSS Gradient Inspector developed by Rafael Cal í cio (@ rafaelcaricio). This development tool can detect and switch every gradient on an element, looking like a switch layer by layer. It is also very useful in daily projects. )

This is the end of the article on "how to use a single div to achieve CSS drawing". Thank you for reading! I believe that everyone has a certain understanding of "how to use a single div to achieve CSS drawing" knowledge, if you want to learn more knowledge, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.