CSS plotting based on a single div

CSS plotting based on a single div

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:

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:

VcfQzi/M3dDOoaM8L3A + CjxwPgo8aW1nIHNyYz0 = "http://www.2cto.com/uploadfile/Collfiles/20141017/20141017082509354.png" alt = "shape">

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.

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.

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.