CSS whimsy-here is the world created by CSS!

CSS whimsy - use CSS to create art

This article is one of CSS drawing techniques. There was an article before: using trigonometric functions to draw curve graphics and display animations in CSS

I want to write an article about CSS creation art for a long time. This article mainly introduces how to use  CSS-doodle to  quickly create beautiful CSS graphics using CSS.

Center layout

All the skills in this article will be developed around this layout, belonging to a category of skills.

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>

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

Using the absolute positioning sum  margin, all the elements are stacked together horizontally and vertically (because they will be used later  transform, this method of horizontal and vertical centering is selected), and the results are as follows:

Well, it looks ordinary, but based on this layout, we can derive a lot of interesting patterns.

Change element size

The simplest is that we can change the size of the element.

CSS code is too tiring to write, so we simply use  pug HTML template engine and SASS.

div.g-container
    -for(var i=0; i<10; i++)
        div.g-box  

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

The container contains 10 sub-elements, and the size of each sub-element gradually increases. It is easy to get the following results:

Change element color

Next, we continue to change the color of the element, so that it presents a gradient color step by step, which can be the border color :

@for $i from 1 to $count + 1 {
    .g-box:nth-child(#{$i}) {
         ...
         border-color: hsla(
            calc(#{$i * 25}),
            50%,
            65%,
            1
        );
    }
}

Get this effect:

It can also change background 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};
    }
}

Change element angle

Ok, next, you can start to change the angle, we use  transformit to rotate the element to different angles:

@for $i from 1 to $count + 1{
    .g-box:nth-child(#{$i}) {
        ....
        transform: rotate(#{$i * 7}deg);
    }
}

The effect is as follows:

CodePen Demo -- CSS Pattern

OK, at this point, the basic concepts are almost introduced. In short, use multi-element centered layout to change the size, color, transparency, angle, shadow, filter, blending mode, etc. of elements, etc., as long as you can think of Yes, it's okay.

Next, we introduce another protagonist of this article-CSS-doodle.

CSS-doodle  is a library based on Web-Component. Allows us to quickly create pages based on the CSS Grid layout to achieve various CSS effects (maybe called CSS art).

The code for the final effect is essentially CSS. You can click on the homepage to have a look at some specific concepts, and you can understand it at a glance.

Use CSS-doole to achieve multi-element horizontal and vertical centered layout

We will use CSS-doodle to implement the above layout again. To achieve the center alignment of 50 elements, we only need the following simple declaration:

<css-doodle>
	:doodle {
		@grid: 1x50 / 100vmin;
	}
	@place-cell: center;
</css-doodle>

The meaning of the above is probably that under the  100vmin x 100vmin size of the container, declare a 1x50 grid layout, use  @place-cell: center to center them all horizontally and vertically, that is, they will be superimposed on each other.

This may not show the effect, we set a different size for each element, and add a simple one to them  border:

<css-doodle>
	:doodle {
		@grid: 1x50 / 100vmin;
	}
	@place-cell: center;
	@size: calc(100% - @calc(@index() - 1) * 2%);
	border: 1px solid #000;
</css-doodle>

• @size: calc(100% - @calc(@index() - 1) * 2%) Represents the width and height of each child element (you can also set the height and width separately). It @index is a variable and represents the number of the current element. From 1 to 50, it means that each element is 2% of the container's height and width and 4% of the height and width. 100% height and width.
• border: 1px solid #000 It's normal CSS code, there are no variables in it, and it acts on every element

The effect is as follows:

Oh No, the eyes started to bloom. In this way, we quickly realized the graphic effects generated by HTML code and cumbersome CSS when laying the groundwork.

CSS Art

Next, start the wonderful CSS art.

Change the rotation angle and border color of the element

We use the above code to continue down, in order to better display the effect, first change the background color of the overall container to black, and then change the rotation angle of the element. Each element rotates  30deg x @index.

The code is very short, it looks 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>

It’s not pretty. Next, we try to gradually set a different border color for each element,  and gradually reduce the opacity. Here we will 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)
	);
</css-doodle>

Look at the effect again:

All textures have a certain color difference, you can click into the Demo to have a look~

Wow, the first work that looked good appeared.

Of course, every different angle can produce different effects. Through CSS-doodle, you can quickly generate different random values ​​and randomly produce different effects. Let's change the above code  transform a bit, change that line a bit, and introduce a random value:

<css-doodle>
	:doodle {
		--rotate: @r(0, 360)deg;
	}
	transform: rotate(calc(@index() * var(--rotate)));
</css-doodle>

• @r(0, 360)degIt can be used  to randomly 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))), Use  calc rules to introduce randomly generated CSS variables. Of course, this value is fixed every time without refreshing the page

In this way, every time we refresh the page, we can get different effects (of course, CSS-doodle has been optimized, adding just a few lines of code can click the page to refresh the effect), the effect after the transformation, we click every time You can get a new effect:

CodePen Demo -- CSS Doodle - CSS Magic Pattern

It is strongly recommended that you click into the Demo, click the mouse to feel it yourself :)

background color parity is different

Okay, let's change our mind. This time we will not change  border the color, but 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>

Use  @even {} can quickly select even-numbered elements, and then give him a white background color, while the odd-numbered elements are given a black background color, see the effect:

The same idea is still the same, we can transform use the black and white superimposition of the rotation angle assigned by the random value to  see what the effect will be under different angles:

CodePen Demo -- CSS Doodle - CSS Magic Pattern

Of course, in the random process, you can also choose what you like and keep them.

CSS-doodle supports the introduction of multiple ways, displaying multiple graphics on one page, not to mention, like this:

CodePen Demo -- CSS-doodle Pure CSS Pattern

Law summary

To sum up, if you want to generate different patterns, you only need to find different lines or shapes that can be generated, and superimpose them according to different sizes, different rotation angles, different colors and transparency .

In this case, some possible ideas:

• What about using only one-way borders?
• The borders that appear are all  solid, what if they are replaced by dashed lines  dashed ? Maybe add border-radius
• text-decoration It also supports a variety of underscores, we can also use them to try

OK, put the above ideas into practice, and we can get all kinds of graphics drawn with all kinds of lines. They might look like this:

Of course, the effect can be random every time, as long as we make good use of the random parameters, you can poke into the following Demo to get a feel:

CodePen Demo -- CSS-doodle Pure CSS Pattern

Clip-path versus drop-shadow

Hey, when it comes to creating different lines and patterns, you have to mention the other two interesting properties in CSS. Clip-path With  fitler: drop-shadow().

Huh? What does that mean. Let's take a simple Demo. Using it  Clip-path , we can cut out different element shapes. For example, to implement 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;
}

The effect is as follows:

Then using this idea, we can try to  clip-path cut out a variety of different shapes for superimposition.

In  CSS-doodle Shapes  , there are many built-in clip-path graphics for us to choose from:

We randomly select one:

Apply the above rules and try to realize a graph:

<css-doodle>
	:doodle {
		@grid: 1x100 / 100vmin;
	}
	@place-cell: center;
	@size: calc(100% - @calc(@index() - 1) * 1%);
	background: hsla(
		calc(calc(100 - @index()) * 2.55), 
		calc(@index() * 1%), 
		65%,
		calc(@index() / 100)
	);
	clip-path: @shape(
		fill-rule: evenodd;
		split: 200;
		scale: .45;
		x: cos(2t) + cos(π - 5t);
		y: sin(2t) + sin(π - 5t);
	);
</css-doodle>

This time, I didn't rotate to a different angle, but gave each layer a different background color to get this effect:

CodePen Demo -- CSS Doodle - CSS Magic Pattern

Clip-path And  drop-shadow creating different lines

OK, the above is the use of  Clip-path creating different patterns, how do you get the different lines?

Don't worry. This requires us to ask for another attribute  drop-shadow,  drop-shadowwhich can be used to Clip-path create different shadows for the  cropped graphics. Of course, there are some structural restrictions. The approximate 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%);
    }
}

We need to  filter: drop-shadow(0px 0px 2px black) act on  clip-path the parent element of the used element, and the used  clip-path: element must have a  backgroundshadow effect to the clipping element.

The above code is as follows:

OK, perfect, in this way, we have greatly enriched our line library, and then using the above line rules, a large wave of new patterns came into being.

CodePen Demo -- CSS-doodle Pure CSS Pattern - clip-path - drop-shadow

OK, due to space limitations, I won't expand them one by one. If you are interested, you can click into the above Demo Fork to try it yourself. There are many interesting patterns waiting to be mined and generated.

Finally, let’s enjoy the work of the CSS-doodle author, Mr. Yuan Chuan, who used the above techniques:

CodePen Demo -- css doodle art

 

This is the end of the article. If you like it, please like it~

 

At last

If you need these materials, you can click here to get them