preface

In the last article we learned how to use gradients to create stripy backgrounds, but stripe backgrounds are not the only background patterns we can actually achieve. There are many more complex patterns that can be achieved with gradients. This article will introduce some other simple and useful background patterns.

A, grid,

The principle of grid is actually very simple, so far we have realized the stripe background, so what if we combine the stripe background? Interspersed with each other, then it is not easy to achieve a variety of grid backgrounds.

1. Solid mesh

The code is as follows:

	width: 200px;
	height: 200px;
	background-image:
		linear-gradient(rgba(255.187.51.5) 33%.rgba(85.136.170.5) 0.rgba(85.136.170.5) 66%.rgba(173.255.47.5) 0),
		linear-gradient(90deg.rgba(255.187.51.1) 33%.rgba(85.136.170.1) 0.rgba(85.136.170.1) 66%.rgba(173.255.47.5) 0);
	background-size: 60px 60px;
Copy the code

Practical effect.

2. Border grid

To achieve a border mesh effect, we simply change the solid grid color block to a border. Set a 1px color in the gradient and leave the rest of the color transparent (or any other background).

The code is as follows:

	width: 201px;
	height: 201px;
	background-image:
		linear-gradient(rgba(255.187.51.5) 1px, transparent 0),
		linear-gradient(90deg.rgba(255.187.51.5) 1px, transparent 0);
	background-size: 20px 20px;
Copy the code

Practical effect.We can do that by adjustingbackground-sizeTo adjust theThe gridThe size of the.

Note: the size of the entire image is 201×201, since we are actually setting left and top, there are only top and left, not bottom and right in the same unit background. So if you set the length to 200px, you won’t see the border on the right and bottom. So we have a + 1 width and a + 1 width, with the top left of the following background as our bottom right border.

3. The wave point

In addition to creating a lattielike background, we can also create a wave-point background style by using another type of gradient: radial gradient. Similar to a linear gradient, the effect is to start at the center of the background and gradient outward.

The code is as follows:


	width:200px;
	height:200px;
	background-image: radial-gradient(green 3px, yellowgreen 0, yellowgreen 6px, transparent 0);
	background-size: 20px 20px;

Copy the code

Practical effect.

We can adjust the wave point density by adjusting background-size.

Note: Use background-size to adjust the size of the single background of the dots. The visual effect is the density of the dots. Sometimes, different effects and patterns will appear.

Practical effect.All you need to do is set background-size to 12px, i.e. background size = wave point diameter.

4. The board

The board is somewhat similar to the solid color grid we did in the first step, except that the board consists of a solid color and a transparent pattern. So, if it looks like a real color grid, but can’t be implemented in the same way as a real color grid (try it if you don’t believe me), how do we implement a chess-card type pattern? It’s not hard. We use right triangles. Do we have to do what we did with diagonal stripes? CSS Revealed: 5. Striped Backgrounds (part 1)

The code is as follows:


	width:200px;
	height:200px;
	background: #eee;
	background-image: linear-gradient(45deg.#bbb 50%, transparent 0);	
	background-size: 30px 30px;

Copy the code

Practical effect.

  1. As you can see from the initial display pattern, our square color block is only half of the diagonal, so one of our triangles is 1/4, so we modify it

The code is as follows:


	width:200px;
	height:200px;
	background: #eee;
	background-image: linear-gradient(45deg.#bbb 25%, transparent 0);
	background-size: 40px 40px;

Copy the code

Practical effect.

  1. Now we have half of the triangle, so to make a square we need another triangle in the opposite direction, so let’s have another background
	background-image: 
		linear-gradient(45deg.#bbb 25%, transparent 0),
		linear-gradient(45deg, transparent 75%.#bbb 0);
Copy the code

  1. So here we have two right triangles, so how do we make a square? Use background-position to adjust the position of the right triangle. Move the background showing the triangle in the upper right corner down to the left

	width:200px;
	height:200px;
	background: #eee;
	background-image: 
		linear-gradient(45deg.#bbb 25%, transparent 0),
		linear-gradient(45deg, transparent 75%.#bbb 0);
	background-position: 0px 0px, -20px 20px;
	background-size: 40px 40px;

Copy the code

Practical effect.It’s easy to do one and then do the other.


	width:200px;
	height:200px;
	background: #eee;
	background: #eee;background-image:    
		linear-gradient(45deg.#bbb 25%, transparent 0),    
		linear-gradient(45deg, transparent 75%.#bbb 0),    
		linear-gradient(45deg.#bbb 25%, transparent 0),    
		linear-gradient(45deg, transparent 75%.#bbb 0);
	background-position: 0 0, -20px 20px.20px -20px.0 0;
	background-size: 40px 40px;

Copy the code

Practical effect.

summary

This paper mainly introduces some more complex background patterns, including solid color grid pattern, border grid pattern, wave dot pattern and checkerboard pattern, among which:

  1. The solid color grid uses a transparent overlay method to achieve a kilt-like background pattern.
  2. The border grid actually uses a 1px gradient border, which is similar to the upper-left border of a pure div.
  3. Radial gradient is used for wave points, which is similar to linear gradient.
  4. The checkerboard pattern uses background-position to position right triangles to combine square patterns.

reading

  • CSS Revealed: 1. Translucent borders
  • CSS Revealed: 2. Multiple borders
  • CSS Revealed: 3. Flexible background positioning
  • CSS Revealed: 4. Rounded edges inside the border
  • CSS Revealed: 5. Striped Backgrounds (part 1)
  • CSS Revealed: 5. Stripe Background (2)