Use a single div to summarize CSS plotting Methods

Use a single div to summarize CSS plotting Methods

Why only one Div is used?

In May 2013, I attended CSSConf and saw Lea Verou's lecture on border-radius. You may think this attribute is very inconspicuous. However, this speech opened my eyes and I was not familiar with CSS and many other behaviors. Recalling my time as an art artist, I was constantly promoted to become an expert in the selected media. As a Web designer, CSS is my medium, so I try my best to learn and explore its limits.

Why is there only one Div?

I recall that when I used to learn painting, I also made a mixed color experiment in the class. We used primary colors, red, yellow, and blue to create spectra of other colors. The purpose of this experiment is to let us understand the color characteristics, and this restriction also makes us understand the power of mixing. Of course you can buy a green pen, but you can also use blue and yellow to make the green. Limiting your options will allow you to reevaluate existing tools on hand.

I decided to start a project that uses CSS painting. In a short time, I would give a new thing to draw with only CSS. To get a bigger challenge and explore the potential of CSS, I set this limit for myself, just using a Div. You cannot directly buy a green pen (add more Div). All you need to do is to combine CSS attributes as much as possible to achieve my goal.

Toolbox

Adding CSS attributes supported by the browser to a Div seems that there are too few available tools. But I found that the problem is not how much you are using, but how you think about what you are using.

Pseudo element

CSS has a pseudo class, so although there is only one Div, I can actually use three elements. Therefore, using div, div: before, div: after, we can do this:

Copy code

The Code is as follows:

Div {background: red ;}

Div: before {background: yellow ;}

Div: after {background: blue ;}

It is easy to think that these three elements can be stacked together into three layers. Therefore, in my mind, it looks like the following:

Shape

With CSS and a single element, we can create three basic images. Use the width and height attributes to create a square/rectangle, use border-radius to create a circle/elliptic, and use border to create a triangle/trapezoid.

We can also use CSS to create other images, but most of them can be simply combined with these basic images. These simple images are the easiest to create and modify.

Multiple identical shapes

With the stacked box-shadow, we can create multiple identical shapes with different sizes, colors, and blur effects. We can move these images on the x or Y axes, so we can draw almost unlimited images.

Copy code

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.

Gradient

A gradient can be used to create light and shade effects by giving a light source, so that simple flat images can look more realistic. Combined with multiple background-images, we can use multi-layer gradient to implement more complex light shadows and even more images.

Copy code

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 the vision is how to piece together these shapes into perceptible graphs. As I focus more and more on drawing techniques, it is important to find that vision is a step. To achieve this, I often stare at the pictures related to this topic and cut it into multiple visible parts. They are all shapes and colors. I simplified the entire image into small color shapes or blocks, and I know (in general) how to implement them using CSS.

Instance

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

A crayon consists of two basic figures: the pen body of a rectangle and the pen tip of a triangle.

I must implement the following points to capture the true feeling of crayons:

Different colors are printed on paper packages. the shape and text Strip indicate that the crayons are the light and shade of the circle.

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

Copy code

The Code is as follows:

Div {

Background: #237449;

Background-image: linear-gradient (to bottom,

Transparent 62%,

Black (. 3) 100% );

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

}

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

Copy code

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 will continue to use the same method, gradient from left to right, and create the stripes on the crayons.

Copy code

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

}

The oval printed on paper is easily done with a radial-gradient!

Copy code

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 the background-image looks like this:

Copy code

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) 100%)

}

After the div is complete, we focus on the before pseudo-class element to create the pen header of the crayon. Using a solid and transparent border, I made a triangle and put it with the div I previously drawn.

Copy code

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 with a crayon pen, the pen looks a little flat. We can use the: after pseudo-class element to fix this problem. I added a linear-gradient from the top to the bottom to create a reflective effect that runs through the entire crayon.

Copy code

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 attention to the flat triangle to make it more realistic. The production is coming to an end. I added some text to "after" and positioned it to make it look like it was printed on a crayon package.

Copy code

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;

}

Success!

Another instance

As a good example, crayons demonstrate 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. It is created using background-image and border-image.

The following is a gif that shows the before pseudo-class elements (the black rectangle) and the details of many cameras created using its box-shadow.

Copy code

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, the following is: after (a gray circle) and several details created using its box-shadow.

Copy code

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;

}

Crazy? But you can see that multiple box-shadow can indeed add many details to a single div plot.

Greatest Challenges

I met two major challenges: triangle limitations and unique gradient behavior.

Triangle Problems

Because a triangle is created using border, this greatly limits my use of it. Use border-image to add gradient to border. One side cannot be added separately. You cannot add box-shadow to the triangle created by border because box-shadow is added to the box model. Therefore, it is very difficult to create multiple triangles. It looks like the following:

Copy code

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 gradient will fill up the entire background. It is very skillful to Stack multiple gradients. It takes extra time to think about transparency and z-index. You need to know what to see and what to do. However, if gradient can be effectively used, our plot may contain a lot of amazing details.

Tardis is a good example. It shows or hides the gradient and creates an image with strong details. Displays the intermediate painting process. You can see several gradients from the top to the bottom, and the width fills up the entire container.

Using gradient from left to right and from right to left, I can cover part of the gradient and display the gradient of other parts.

The final result seems to contain a lot of graphs to form the front of the Tardis, but it is actually a stacked linear-gradient. Many times, it has to be forged.

View them dynamically

 

From this project, there was a very cool and useful good thing that suddenly appeared, that is, the Chrome browser plug-in named CSS Gradient Inspector developed by Rafael caricio cio (@ rafaelcaricio. This development tool can detect and switch each gradient on the element, and it looks like switching layers one by one. (It is also useful in daily projects .)