開源日報 每天推薦一個 GitHub 優質開源項目和一篇精選英文科技或編程文章原文,堅持閱讀《開源日報》,保持每日學習的好習慣。
今日推薦開源項目:《AmericaOpposeAmerica》
今日推薦英文原文:《Fall in Love With Single-Div Illustrations》
開源日報第1006期:《AmericaOpposeAmerica》
今日推薦開源項目:《AmericaOpposeAmerica》傳送門:項目鏈接
推薦理由:一本很老的書,靠著 OCR(機器與人力)還原了。講的是關於美國具有兩種相對力量的有關話題,所以用了美國反對美國這個看似很不合邏輯的名字。
今日推薦英文原文:《Fall in Love With Single-Div Illustrations》作者:Albert Walicki
原文鏈接:https://medium.com/better-programming/fall-in-love-with-single-div-illustrations-674ddeb51c62
推薦理由:如何使用一個 div 元素進行繪畫

Fall in Love With Single-Div Illustrations

I』ve always admired people who create single-div illustrations in CSS. One div, multiple background layers, tons of CSS code, and boom! You have an illustration. I always thought that it must be challenging and I could never create such a thing. I was wrong.

To create a simple image, you only need to know one thing: how backgrounds work in CSS. That』s it. You don』t have to use CSS variables. They help to maintain clean code. It』s much easier to read those images with variables, but it』s not required.

Simplest Illustration

Let』s start with something straightforward. If you understand this example, you will be ready to go: CSS and HTML for the first example
開源日報第1006期:《AmericaOpposeAmerica》
Our first single-div image!

OK, what we have here? A 100x100px rectangle with a linear-gradient starting and ending with the same colour. Our first background has also defined background-position: 0px 0px; on the X-axis and 0px on the Y-axis. This means that our background starts on the top left corner. Then we have background-size: 100px 100px;, which obviously defines the size of our purple colour. And the last one, background-repeat: no-repeat;, is to prevent replying to our layers.

Conclusion:
  • Our div is the solid #9B59B6 colour because we start and end the gradient with the same colour.
  • It is 100x100px.
Great, let』s move on and add one more layer: CSS and HTML for the first example with an additional layer
開源日報第1006期:《AmericaOpposeAmerica》
First example with an additional layer

And that』s it! We have two linear-gradient layers on each other. Pay attention to the layer order! Earlier layers are on top of the others. Think about it as a z-index.

I don』t like having properties broken into pieces, so let』s clean up a bit: Background shorthands

The forward slash separates background-position values and background-size values. The formal syntax requires the slash.
開源日報第1006期:《AmericaOpposeAmerica》
Linear gradient position and size

If we have more background layers, things might be a little bit messy. You probably won』t remember if line 31 of the background goes for a window or maybe a fence.

This is much cleaner! The previous example with CSS variables

Small House

You already know enough to create illustrations. To warm up before the final exercise, let』s make a small house.

We need a few layers:
  • Front of the house
  • Door
  • Left part of the roof
  • Right part of the roof
  • Window 1 and Window 2
HTML and CSS for single-div house
開源日報第1006期:《AmericaOpposeAmerica》
Single-div house

You can play with this house here on CodePen.

Triangles

The most challenging part of this house is to create triangles. Let』s split this code into pieces.

Let』s work on this example: 開源日報第1006期:《AmericaOpposeAmerica》
Linear-gradient with 50%/50% red and brown colours

Our goal is to create a triangle for our roof. Currently, our gradient has a zero-degree angle, so let』s change it. I would like to have a small roof slope angle, so I changed it to 12 degrees: 開源日報第1006期:《AmericaOpposeAmerica》
Linear-gradient with 50%/50% red and brown colours and 12-degree angle

I think you know what you should do now. Let』s decrease the percentage of the gradient. I changed it to 19 degrees to have a perfect starting point on the right side: 開源日報第1006期:《AmericaOpposeAmerica》
Triangle almost done

Lastly, we need to replace the red background with a transparent one: HTML and CSS
開源日報第1006期:《AmericaOpposeAmerica》
Our roof element

And here we have a nice roof with a right angle.
下載開源日報APP:https://openingsource.org/2579/
https://openingsource.org/wp-admin/edit.php加入我們:https://openingsource.org/about/join/
關注我們:https://openingsource.org/about/love/