CSS background effect and css background

CSS background effect and css background
Previous

This article will detail the CSS background Effects

 

Striped background

[Dual-striped background]

  background:linear-gradient(#fb3 50%, #58a 50%);  background-size: 100% 30px;

CSS standard: if the position value of a color label is smaller than the position value of the color label before it in the whole list, the position value of the Color Mark is set to the maximum value of all the color mark positions before it.

Therefore, the second color can be set to 0.

  background:linear-gradient(#fb3 50%, #58a 0);  background-size: 100% 30px;  

[Multi-stripe background]

It is easy to create more than two colors of stripes.

background:linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);background-size: 100% 45px;  

Vertical stripe]

The code of the vertical stripe is almost the same as that of the horizontal stripe. The difference is that an additional parameter needs to be added at the beginning to specify the gradient direction, and then the value of background-size is reversed.

  background:linear-gradient(to right,#fb3 50%, #58a 0);  background-size: 30px 100% ;  

45-degree oblique stripe]

The idea is as follows: a single patch contains four stripes. Only in this way can it be seamlessly spliced.

  background:linear-gradient(45deg,#fb3 25%, #58a 0,#58a 50%,#fb3 0, #fb3 75%, #58a 0);  background-size: 30px 30px;  

It is easier to use cyclic gradient.

background:repeating-linear-gradient(45deg,#fb3, #fb3 15px, #58a 0,#58a 30px);

[Oblique stripe at any angle]

background:repeating-linear-gradient(60deg,#fb3, #fb3 15px, #58a 0,#58a 30px);

[Same Color stripe]

In most cases, the striped pattern we want is not composed of several colors with great differences. These colors often belong to the same color, but are slightly different in brightness.

background:repeating-linear-gradient(60deg,#79b, #79b 15px, #58a 0,#58a 30px);

However, the relationship between the two colors is not reflected in the Code. In addition, if you want to change the dominant color of this stripe, you even need to change it everywhere.

A better way is to not specify a color for each stripe, but specify the deepest color as the background color, and overlay the translucent white stripe on the background color to obtain the light-colored stripe.

  background: #58a;  background-image:repeating-linear-gradient(30deg,hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0,transparent 30px);  

Now, you only need to modify one place to change all colors. It also has an additional benefit. For browsers that do not support css gradient, the background color here also plays a role of rollback.

 

Grid background

[Tablecloth effect]

A variety of grids are formed when multiple gradient patterns are combined so that they are displayed in each other's transparent areas. For example, overlay the horizontal and vertical stripes to get the tablecloth pattern.

  background: white;  background-image:linear-gradient(90deg,rgba(200,0,0,.5) 50%, transparent 0),linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);  background-size: 30px 30px;

Drawing guides]

In some cases, you want to adjust the size of each grid, while the width of the grid lines remains fixed at the same time. For example, a grid similar to a drawing Auxiliary Line

  background: #58a;  background-image:linear-gradient(90deg,white 1px, transparent 0),linear-gradient(white 1px, transparent 0);  background-size: 30px 30px;

Blueprint Grid]

You can even overlay two grid patterns of different widths and colors to create a more realistic blueprint grid.

  background: #58a;  background-image:linear-gradient(90deg,white 2px, transparent 0),linear-gradient(white 2px, transparent 0),linear-gradient(90deg,hsla(0,0%,100%,0.3) 1px, transparent 0),linear-gradient(hsla(0,0%,100%,0.3) 1px, transparent 0);  background-size: 75px 75px,75px 75px,15px 15px,15px 15px;

 

Wave background

[Dot Array]

The front is always generating a pattern with a linear gradient. However, radial gradient is also very useful because it allows the creation of circular, elliptical, or a part of them. The simplest pattern that a radial gradient can create is a dot array.

  background: #655;  background-image:radial-gradient(tan 30%,transparent 0);  background-size: 30px 30px;  

[Ripple pattern]

Two-layer Dot Array pattern can be generated, and the background of them can be located incorrectly, so that you can get the real pattern

  background: #655;  background-image:radial-gradient(tan 30%,transparent 0),radial-gradient(tan 30%,transparent 0);  background-size: 30px 30px;  background-position: 0 0 ,15px 15px;

To achieve the effect, the offset value of the first layer must be half the width of the patch. This means that if you want to change the size of the patch, you need to modify it everywhere.

It is best to use SASS to convert it to mixin

@mixin polka($size,$dot,$base,$accent){  background: $base;  background-image:radial-gradient($accent $dot,transparent 0),radial-gradient($accent $dot,transparent 0);  background-size: $size $size;  background-position: 0 0 ,$size/2 $size/2;  }  @include polka(30px,30%,$655,tan);  

 

Board background

Board pattern is used in many scenarios. For example, compared to a monotonous solid background, a board pattern with a slight contrast may be an interesting alternative. On various application interfaces, the gray checkerboard pattern is already the de facto standard used to represent transparent colors.

[CSS]

  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-size: 30px 30px;  background-position: 0 0 ,15px 15px,15px 15px,30px 30px;

This code can also be slightly optimized. You can combine these triangles at the top corner of the patch (that is, combine the first group and the second group into a gradient, combine the third group and the fourth group with a gradient), then you can change the dark gray to a translucent black-so that you only need to modify the background color to change the color of the entire board, you do not need to adjust the gradient color of each layer.

  background:#eee;  background-image: linear-gradient(45deg,rgba(0,0,0,0.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,0.25) 0),linear-gradient(45deg,rgba(0,0,0,0.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,0.25) 0);  background-size: 30px 30px;  background-position: 0 0 ,15px 15px;

Next we will use the mixin of SASS to simplify the code.

  @mixin checkerboard($size,$base,$accent:rgba(0,0,0,0.25)){    background:$base;    background-image: linear-gradient(45deg,$accent 25%,transparent 0,transparent 75%,$accent 0),linear-gradient(45deg,$accent 25%,transparent 0,transparent 75%,$accent 0);    background-size: 2*$size 2*$size;    background-position: 0 0 ,$size $size;      }  @inclue checkerboard(15px,#58a,tan);

[SVG]

The amount of such Code cannot be small, so it may be a better choice to switch to the SVG solution.

<svg xmlns="http//www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25">  <defs>    <pattern id="pattern1" width=0.2 height=0.2 >      <rect x="10" width="10" height="10"/>      <rect y="10" width="10" height="10"/>    </pattern>  </defs>   <rect id="rect1" x="0" y="0" width="100" height="100" fill="url(#pattern1)" /></svg>  

 

Pseudo-Random background

It is a challenge to reproduce randomness because CSS itself does not provide any random functions. Take the stripe as an example. Suppose we get vertical stripes of different colors and different widths, and we cannot see the seams when the patch is tiled. The first idea may be to create a four-color striped pattern.

  background:linear-gradient(90deg,#fb3 15%,#655 0, #655 40%,#ab4 0, #ab4 65%, hsl(20,40%,90%) 0);  background-size: 80px 100%;

To simulate the randomness of the stripes more realistically, this set of Stripes is split into multiple layers from one plane: one color as the background color and the other three colors as the stripes, then, the stripes are repeatedly tiled at different intervals.

  background: hsl(20,40%,90%);  background-image:linear-gradient(90deg,#fb3 10px,transparent 0),  linear-gradient(90deg,#ab4 20px,transparent 0),  linear-gradient(90deg,#655 20px,transparent 0);  background-size: 80px 100%,60px 100%,40px 100%;

Because the Repetition Pattern of the top-level patches is the easiest to detect, the most tiled patch should be arranged on the top.

The patch size is actually the minimum public multiple of all background-size, and the minimum public multiples of 40, 60, and 80 are exactly 240.

According to this logic, to make the randomness more authentic, we need to maximize the size of the patch. To maximize the minimum public multiple, these numbers are best "relative prime numbers. In this case, their minimum public multiples are their product.

In the following code, the size of the tile patch is 41x61x83 = 207583 pixels, which is larger than that of any screen. This technique was named as the "Chan principle"

  background: hsl(20,40%,90%);  background-image:linear-gradient(90deg,#fb3 11px,transparent 0),  linear-gradient(90deg,#ab4 23px,transparent 0),  linear-gradient(90deg,#655 41px,transparent 0);  background-size: 41px 100%,61px 100%,83px 100%;

 

Zebra crossing background

The following zebra crossing background is a background pattern closely structured with text

  padding:.5em;  line-height: 1.5;  background:beige linear-gradient(rgba(0,0,0,0.2) 50%,transparent 0) content-box 0 0/ auto 3em;