This article is part of a CSS drawing technique. Use trigonometric functions to draw curves and display animations in CSS
I want to write an article about THE art of CSS creation for a long time. This article mainly introduces how to create beautiful CSS graphics quickly with THE help of CSS-Doodle.
Center layout
All of the tips in this article revolve around this layout and fall into one category.
First, we need such a central layout. The simple HTML structure is as follows:
<div class="g-container">
<div class="g-box"></div>
<div class="g-box"></div>
<div class="g-box"></div>
<div class="g-box"></div>
<div class="g-box"></div>
</div>
Copy the code.g-container {
position: relative;
width: 300px;
height: 300px;
}
.g-box {
position: absolute;
top:50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
width: 100%;
height: 100%;
border: 1px solid # 000;
}
Copy the codeBy using absolute positioning and margin, all elements are stacked horizontally and vertically in the center (since transform will be used later, this method is selected), and the results are as follows:
Okay, it looks pretty unimpressive, but with this layout, we can derive a lot of interesting patterns.
Resize an element
At its simplest, we can change the size of the element.
CSS code is too much to write, so we simply rely on the PUG HTML template engine and SASS.
div.g-container
-for(var i=0; i<10; i++)
div.g-box
Copy the code$count: 10;
@for $i from 1 to $count + 1 {
.g-box:nth-child(#{$i}) {
--width: # {$i * 30}px;
width: var(--width);
height: var(--width);
margin-left: calc(var(--width) / -2);
margin-top: calc(var(--width) / -2); }}Copy the codeThe container contains 10 child elements, each of which increases in size. You can easily get the following result:
Change the color of the element
Next, we continue to change the color of the element so that it has a gradient color step by step, which can be a border color:
@for $i from 1 to $count + 1 {
.g-box:nth-child(#{$i}) {
...
border-color: hsla(
calc(#{$i * 25}),
50%.65%.1); }}Copy the codeGet something like this:
You can also change the color of the background:
@for $i from 1 to $count + 1{
.g-box:nth-child(#{$i}) {
...
background: hsla(
calc(#{$i * 25}),
50%.65%.1
);
z-index: # {$count - $i}; }}Copy the code
Changing element Angles
Ok, now we can start to transform the Angle. We use transform to rotate the element by different angles:
@for $i from 1 to $count + 1{
.g-box:nth-child(#{$i}) {
....
transform: rotate(#{$i * 7}deg); }}Copy the codeThe effect is as follows:
CodePen Demo — CSS Pattern
OK, that’s enough to cover some of the basics. In a word, use a multi-element center layout to change the size, color, transparency, Angle, shadows, filters, blending modes, and so on, you name it.
Next, let’s introduce the other protagonist of this article, CSS-doodle.
Css-doodle is a library based on web-Component. Allows you to quickly create pages based on CSS Grid layouts for various CSS effects (CSS art, perhaps).
The resulting code is essentially CSS. Some specific concepts can click on the home page to see, a look to understand.
Use CSS-Doole to center multiple elements horizontally and vertically
Let’s implement the above layout again using CSS-doodle. To center 50 elements, all you need is this simple declaration:
<css-doodle>
:doodle {
@grid: 1x50 / 100vmin;
}
@place-cell: center;
</css-doodle>
Copy the codeDeclare a 1×50 grid layout in a 100vmin x 100vmin container and center them all horizontally and vertically using @place-cell: center.
This might not work, so let’s give each element a different size and add a simple border to each of them:
<css-doodle>
:doodle {
@grid: 1x50 / 100vmin;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 2%);
border: 1px solid #000;
</css-doodle>
Copy the code@size: calc(100% - @calc(@index() - 1) * 2%)Represents the size of the width and height of each child element (height and width can also be set separately),@indexIs a variable that represents the sequence number of the current element, ranging from 1 to 50, indicating that each element is 2% by width, 4% by width, and 100% by width of the container respectively.border: 1px solid #000It’s just normal CSS code, there’s no variables in it, and it applies to every element
The effect is as follows:
Oh No, my eyes are starting to fade. In this way, we quickly implemented the graphics generated in the previous fovetting using HTML code and cumbersome CSS.
CSS art
Next, start the beautiful art of CSS.
Changes the rotation Angle and border color of elements
We use the above code to continue, first change the background color of the entire container to black for better display, and then change the rotation Angle of the elements. Rotate each element by 30deg x @index.
The code is very short, something like this:
<css-doodle>
:doodle {
@grid: 1x100 / 100vmin;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * 30deg));
border: 1px solid #fff;
</css-doodle>
Copy the code
Next, we try to set each element progressively with a different border color and lower opacity. Here we use the HSLA color notation:
<css-doodle>:doodle { @grid: 1x100 / 100vmin; } @place-cell: center; @size: calc(100% - @calc(@index() - 1) * 1%); transform: rotate(calc(@index() * 30deg)); Border: 1px solid HSLA (calc(calc(100-@index ()) * 2.55), calc(@index() * 1%), 50%, calc(@index() / 100)); border: 1px solid HSLA (calc(calc(100-@index ()) * 2.55), calc(@index() * 1%), 50%, calc(@index() / 100));</css-doodle>
Copy the codeAnd look at the effect:
All maps have a certain color difference, you can click into the Demo to see ~
Wow, here comes the first one that looks good.
Of course, each Angle can produce a different effect, through CSS-Doodle, you can quickly generate different random values, random to produce different effects. Let’s change the above code slightly, changing the transform line to introduce a random value:
<css-doodle>
:doodle {
--rotate: @r(0, 360)deg;
}
transform: rotate(calc(@index() * var(--rotate)));
</css-doodle>
Copy the code- using
@r(0, 360)deg, can generate a random number between 0 and 360, which can be directly followed by the unit, which becomes a random Angle value transform: rotate(calc(@index() * var(--rotate))), the use ofcalcRules introduce randomly generated CSS variables, which are fixed each time the page is never refreshed
This way, we get a different look every time we refresh the page (csS-Doodle optimized it, of course, by adding just a few lines of code to refresh the page with a single click), and we get a new look every time we click:
CodePen Demo — CSS Doodle – CSS Magic Pattern
It is highly recommended that you click on the Demo and feel it yourself with the mouse π
Background colors vary even and odd
Instead of changing the color of the border, use the selector to control the odd-numbered elements and the even-numbered elements and give them different background colors:
<css-doodle>:doodle { @grid: 1x100 / 100vmin; } @place-cell: center; @size: calc(100% - @calc(@index() - 1) * 1%); transform: rotate(calc(@index() * 60deg)); Background: rgba(0, 0, 0, calc((@index * 0.01))); @even {background: rgba(255, 255, 255, calc((@index * 0.01))); }</css-doodle>
Copy the codeUse @even {} to quickly select even elements and give them a white background and odd elements a black background.
In the same way, we can assign random values to the rotation Angle of the transform, and use black and white superposition to see what the effect will be under different angles:
CodePen Demo — CSS Doodle – CSS Magic Pattern
Of course, in a random process, you can pick your favorites and keep them.
Css-doodle supports the introduction of multiple ways to display multiple graphics on a page, such as this:
CodePen Demo — CSS-doodle Pure CSS Pattern
Regular summary
To sum up, if you want to generate different patterns, in fact, you only need to find the shapes that can generate different lines or patterns, and superimpose them together according to different sizes, different rotation angles, different colors and transparency.
In this case, some possible ideas:
- What about using a one-way border only?
- The border that appears is
solidIf it’s a dotted linedashed? Maybe we can add to thatborder-radius text-decorationA variety of underscores are also supported, and we can try them out
OK, put the above ideas into practice and you can get all kinds of shapes drawn with all kinds of lines. They might look like this:
Of course, each effect can be random, as long as we make good use of random parameters, you can poke into the following Demo to feel:
CodePen Demo — CSS-doodle Pure CSS Pattern
Clip-path δΈ drop-shadow
Hey, when it comes to creating different lines and patterns, two other interesting things about CSS are properties. Clip-path and Fitler: drop-shadow().
Uh huh? What does that mean? Let’s do a simple Demo, using clip-path, we can crop out different elements. For example, implementing a simple polygon:
div {
width: 300px;
height: 300px;
clip-path: polygon(50% 0%.90% 20%.100% 60%.75% 100%.25% 100%.0% 60%.10% 20%);
background: # 333;
}
Copy the codeThe effect is as follows:
Then using this idea, we can try to use clip-path to cut out different shapes for stacking.
There are many clip-path Shapes built into CSS-Doodle Shapes for us to choose from:
Let’s pick one at random:
Applying the above rules, try to implement a graph:
<css-doodle>:doodle { @grid: 1x100 / 100vmin; } @place-cell: center; @size: calc(100% - @calc(@index() - 1) * 1%); Background: hsla (calc (calc (100 - @ the index ()) * 2.55), calc (@ the index () * 1%), 65%, calc (@ the index () / 100)); clip-path: @shape( fill-rule: evenodd; split: 200; scale: .45; X: cosine (2t) + cosine (Ο -5t); Y: sin(2t) + sin(Ο -5t); ;</css-doodle>
Copy the codeThis time, instead of rotating a different Angle, just giving each layer a different background color, we can get something like this:
CodePen Demo — CSS Doodle – CSS Magic Pattern
Clip-path δΈ drop-shadowCreate different lines
OK, I used clip-path to create different patterns. How do I get different lines?
Don’t worry. This requires another attribute, drop-shadow, which can create different shadows for clip-path shapes. Of course, there are some structural limitations, and the pseudo-code is as follows:
div {
position: relative;
width: 300px;
height: 300px;
filter: drop-shadow(0px 0px 1px black);
&::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
background: #fff;
clip-path: polygon(50% 0%.90% 20%.100% 60%.75% 100%.25% 100%.0% 60%.10% 20%); }}Copy the codeWe need to apply filter: drop-shadow(0px 0px 2px black) to the parent element of the clip-path element, and use the clip-path: Elements must have background in order to attach a shadow effect to cropped elements.
The code above looks like this:
OK, perfect, in this way, we greatly enrich our line library, and then apply the above line rules, a wave of new patterns emerged.
CodePen Demo — CSS-doodle Pure CSS Pattern – clip-path – drop-shadow
OK, limited by space, I won’t expand it all. If you are interested, you can click on the Demo Fork above to try it yourself. There are so many interesting patterns to be mined and generated.
Finally, let’s take a look at the work of Mr. Yuan Chuan, the author of CSS-Doodle, using the above techniques:
CodePen Demo — css doodle art
The last
The end of this article, I hope to help you :), want to Get the most interesting CSS information, do not miss my official number – iCSS front-end interesting news π
More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.
If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.