"High Energy" usage of linear-gradient, linear-gradient

"High Energy" usage of linear-gradient, linear-gradient
First, let's take a look at the basic usage of "linear-gradient:

Note:Create an image with linear gradient

Syntax:

<Linear-gradient> = linear-gradient ([[<angle> | to <side-or-corner>],]? <Color-stop> [, <color-stop>] +)

<Side-or-corner> = [left | right] | [top | bottom]

<Color-stop >=< color> [<length >|< percentage>]?

Valid value:

The following values are used to indicate the gradient direction. You can use the angle or keyword to set them:

<Angle>: Specify the gradient direction (or angle) with the angle value ).

To left: Set the gradient from right to left. Equivalent to: 270deg

To right: Set the gradient from left to right. Equivalent to: 90deg

To top: Set the gradient from bottom to top. Equivalent to: 0deg

To bottom: Set the gradient from top to bottom. Equivalent to: 180deg. This is the default value.

<Color-stop>: used to specify the starting and ending colors of the gradient:

<Color>: Specifies the color.

<Length>: Specify the start and end color positions with the length value. Negative value not allowed

<Percentage>: Specify the start and end color positions with percentages.

Other knowledge points:

I wonder if you have noticed the "+" after the "first" syntax. These symbols ("?" , "+", "*") In fact, the usage is similar to that of a regular expression. If the regular expression does not know, see the following positive solution:

,: Represents the separator between each attribute.

? : Indicates that "attribute" can appear zero or once, that is, dispensable

+: Indicates that "attribute" can appear once or multiple times, but must appear once.

*: "Attribute" can appear zero or multiple times.

|: You can select one of multiple "attributes.

|: Indicates that "attribute" can be one on the left, one on the right, or two on the right.

[]: Indicates a set of "attributes" or "attributes ".

<>: This is not in a regular expression, but it represents the defined value range ", the "<angle>" is included in the value.

{}: Indicates that "attribute" appears at least once and at most four times. "1" and "4" are dynamic values, not fixed, depending on the Description

 

Let's take a look at the basic usage example:

　　

　　(Figure 1)

Linear-gradient (# fff, #333 );

Linear-gradient (to bottom, # fff, #333 );

Linear-gradient (to top, #333, # fff );

Linear-gradient (180deg, # fff, #333 );

Linear-gradient (to bottom, # fff 0%, #333 100% );

　　The above five styles can achieve the gradient effect (figure 1 ).

 

Let's take a look at common instances of complex points:

1 <! DOCTYPE html> 2 :

 

Let's take a look at the usage of "high energy:

1 <! DOCTYPE html> 2 :

 

How is the effect cool?Look at other ones:

There are more good-looking will not show, derived from foreign DANIEL: http://lea.verou.me/css3patterns/#chocolate-weave

 

Summary of several important knowledge points:

■ I.The order of "background" is drawn from the beginning to the front:

1 background: linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0),linear-gradient(135deg, transparent 37%, #a85 0, #a85 63%, transparent 0),linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753;background-size: 25px 25px;

Background is drawn from "linear-gradient (45deg, transparent 37%, # dca 0, # dca 63%, transparent 0) #753"... the "linear-gradient (45deg, # dca 12%, transparent 0, transparent 88%, # dca 0)" gradient style in the header. Therefore,Point.

■ II.EveryThe gradient effects drawn using "linear-gradient" can be viewedA background image. Because, this can beBackground-size"(The size of each background image is differentiated by commas ).

■ III .【Very important]It is not difficult to create a complex background image, but you must know that the principle of "background-repeat" is that every background image follows the"Attribute"To draw. If you do not know this principle, you may not even notice it. So when you first saw such a beautiful background and wanted to work on your own, you found,"What is this?"To see the background effect I wrote for the first time.

 

First write:

Ideal:

 

Actual style:

1 <! DOCTYPE html> 2 :

 

How is the entire webpage red?

 

In fact, this isThe principle of "background-repeat" is a problem: each image is copied by x and y to create "background-repeat: repeat". Therefore, when "background-size" is not consistent, the locations for copying and drawing are also different.

I know this is the reason. Change it.

Correct style:

1 <! DOCTYPE html> 2 :

 

Knowing the principle is the final principle