CSS Drawing Based on a single div and divcss drawing

CSS Drawing Based on a single div and divcss drawing

Original article: Single Div Drawings with CSS

CSS plot based on a single div

Translator: Comments from external journals

I have read this article and feel the combination of technology and art! Like the author's statement: Restricting your available options forces you to re-evaluate the tools you already have. Limiting your options will allow you to reevaluate your existing tools on hand.

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. Thereforediv,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:

Shape

With CSS and a single element, we can create three basic images. UsewidthAndheightAttribute to create a square/rectangle, useborder-radiusCreate a circle or an ellipse.borderCreate a triangle or 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

Use overlaybox-shadowWe 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 evenbox-shadowAddbox-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 multiplebackground-image, We can use a lot of layers of gradient to achieve more complex light and shadows, or even more graphics.

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 on Paper Packaging
• Shape and text printed on the packaging
• The stripes indicate that the crayons are round.
• Light and shade effect, indicating a circular crayon and a light source

First, I usedivAndbackgroundColor to make the body part of a crayon, gradient from top to bottom, and usebox-shadowHint stereoscopy:

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 left-to-rightlinear-gradientMake paper packaging.alphaThe value is.6In this way, the previous gradient can be transparent.

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.

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

An oval printed on paper packaging, usingradial-gradientEasy to handle!

div {    background-image: radial-gradient(ellipse at top,                                  black(.6) 50px,                                  transparent 54px);}

I showed each part separately just now, but don't forgetbackground-imageIt looks like this:

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

Finisheddiv, We move our attention:beforeCreate a pen with a crayon on a pseudo element. Using a solid and transparent border, I made a triangle and compared it with the one I previously drawn.divPut them together.

div:before {    height: 10px;    border-right: 48px solid #237449;    border-bottom: 13px solid transparent;    border-top: 13px solid transparent;}

The pen looks a bit flat than the crayon pen. We can use it.:afterTo fix this problem. I addlinear-gradient, Made a reflective effect, throughout the whole crayons.

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. Production is coming to an end.:afterAdd text and position to make it look like it is printed on a crayon package.

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 them.background-imageAndgradientTo produce real results. The following example shows multiplebox-shadowPowerful: singledivCamera.

This is the main part of the camera.background-imageAndborder-imageCreated.

The following is a gif.:beforePseudo-class elements (the black rectangle) andbox-shadowThe details of many created cameras.

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, below is:after(Gray circle) andbox-shadowDetails of the production.

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 see it.box-shadowA singledivAdd many details to the drawing.

Greatest Challenges

I met two major challenges: triangle limitations andgradientUnique behavior.

Triangle Problems

Because triangles are usedborderCreated, which greatly limits my use of it. Useborder-imageToborderAddgradient. Unable to giveborderAdd created trianglesbox-shadowBecausebox-shadowIs added to the box model. Therefore, it is very difficult to create multiple triangles. It looks like the following:

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 the wholebackground. Stacked multiplegradientIt seems very skillful. It takes additional time to think about transparency,z-indexWe need to know what to be visible and what not to be. HowevergradienT. Our plot can 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.

Use left-to-right and right-to-leftgradient, I can cover part of the gradient while displaying the other part of the gradient.

The final result seems to contain a lot of images to form the front of the Tardis, but in fact it is stackedlinear-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 .)

I want designers and developers to use the animation or JavaScript Functions to make similar attempts or make some modifications to these paintings. You can go to the http://div.justjavac.com or GitHub to play with these CSS.

How does div css make this table? Just make this one.

Laughing, people say that DIV + CSS is used, and SB writes tables one by one. Really not good! This is just a typographical problem. First Use a div to set the size and position. After the four-side color of border is designed, the width should be 1 px, and then use a UL in it, of course, li is going to list-style. Write 6 li, and add float: left to the li in the second column. That's it. It's so simple, I can make it clear enough, so you can write it yourself. I don't know.

How to define css in a div separately

Example:
. Abc {}
<Div class = abc> </div>
Yes ~~~