CSS3 linear Gradient Getting started instance sharing

The gradient is presented in the current page as a background map, the essence of the gradient is Background-image。 In CSS3, gradients can be divided into linear gradients (linear-gradient) and radial gradients (radial-gradient). A linear gradient is a gradient along a gradient line, while a radial gradient is a four-week gradient along an ellipse or circle.

2. Linear gradient Linear-gradient

2.1 Basic syntax

Background-image:linear-gradient ([<angle> | <side-or-corner>,]? <color-stop> [, <color-stop >]+);

[] In the regular expression is a character class, which is understood as a small unit can be;

| To express or to mean, either select the front, or choose the back;

？ Represents 0 or 1 meanings. That is, if you do not specify a direction, you can directly use the gradient color;

+ plus sign, which means 1 or more.

2.1.1 Angle Angle

Question: If angle is 45deg, gradient color from deepink to yellow gradient, which of the following picture is correct?

Correct answer: B

This understanding has a certain degree of access to a certain angle that we are familiar with CSS3 rotation, for example, the effect of rotating 90 degrees in CSS3 is this:

In a linear gradient, the angle of the gradient is rotated clockwise from the vertical direction from bottom to top, which we can understand as the direction of the clock needle rotation, as shown in:

The gradient angle indicates the direction of the linear gradient, 0deg indicates a gradient from top to bottom, 90deg is a left-to-right gradient, 180deg indicates a downward-upward gradient, and 270deg is a right-to-left gradient, and 360deg represents a downward-to-upward gradient. Gradient Angle Effect:

In the above example, the effect of 0deg->360deg is to rotate clockwise.

2.1.2 Side-or-corner

The Chinese meaning of Side-or-corner is the meaning of the edge or the angle. The optional values in the vertical direction are: top, center, bottom, selectable values in the horizontal direction are left, center, right. The default value is Center bottom , which is the gradient from top to bottom. can be used with the to + side-or-corner keyword, if not add to, it represents the starting point of the gradient, plus to indicates the direction of the gradient . For example: To top is equivalent to the 0deg,to right equivalent to the 90deg,to bottom equivalent to the 180deg,to left equivalent to 270deg. The effects are as follows:

Notes for use in different versions of browsers:

• The new version of the browser can be directly used by the standard syntax, the lower browser needs to use the browser prefix;

• IE10 versions below do not support gradients;

• The new version of Chrome and Firefox has removed the private prefix, adding a private prefix with no private prefix direction (if the private prefix, then right is 0deg, and then turn counterclockwise);

• Oper support starting from 37, without a private prefix, added instead of recognition;

This article will explain the linear gradient linear-gradient in the standard grammar, and the radial gradient radial-gradient will be introduced in the next article

2.1.3 Color-stop

<color> [<percentage> | <length>]

Indicates the color, start point, and end point of a linear gradient. The translation into Chinese is: color + space + percent or length value.

Background:linear-gradient (#fb3 20%, #58a 80%);

Now the top 20% of the area is filled with #fb3 solid color, the bottom 20% of the area is filled with a solid color of #58a, the area of the true gradient is 20% to 80% height. If you pull the two color markers closer together, the two color marks are coincident:

Background:linear-gradient (#fb3 50%, #58a 50%);

"If multiple color labels have the same position, they produce an infinitely small transition area, with the transition starting and ending with the first and last specified values, respectively." In effect, the color changes abruptly in that position, rather than a smooth gradient process. ”

--css Image (third edition) (http://w3.org/TR/css3-images)

Because a gradient is a code-generated image, we can treat it like any other background image, and you can resize it by background-size:

<p class= "box" ></p>

. box{  width:200px;  height:90px;  Background:linear-gradient (#fb3 50%, #58a 50%);  background-size:100% 30px;}

In the case of vertical stripes, the code and effects are as follows:

<p class= "box" ></p>

. box{  width:210px;  height:90px;  Background:linear-gradient (to right, #fb3 50%, #58a 50%);  background-size:30px 100%;}

To avoid changing the stripe width every time you change the two numbers, we can find a shortcut from the spec again.

If the position value of a color label is smaller than the position value of the color tag that precedes it in the entire list, the position value of the color label is set to the maximum value of the position value that was previously colored. ”

--css Image (third edition) (http://w3.org/TR/css3-images)

We have a good understanding of horizontal and vertical gradient stripes. In the case of a diagonal gradient, we want the width of the stripe to be 15px, which we can write:

<p class= "box" ></p>

. box{  width:200px;  height:100px;  Background:linear-gradient (45deg,    #fb3 25%, #58a 0, #58a 50%,    #fb3 0, #fb3 75%, #58a 0);  background-size:30px 30px;}

Compared to the desired figure and the actual, why the width of the line is smaller than we want the line width, is the browser problem, no, we are wrong. This requires an in-depth understanding of the length of the gradient.

2.2 Understanding of the gradient length of a linear gradient

How do I determine the length of a gradient line? We can find the answer from the explanation of the official website:

The gradient line is a straight line over the center of the gradient area, and the beginning and end of the gradient are on the vertical line with the gradient line. Given the area of the gradient and the direction of the gradient, we are able to determine the starting point and the total length of the gradient. So in the following CSS style:

. box{  width:200px;  height:100px;  Background:linear-gradient (45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);  background-size:30px 30px;}

We can use this image below to calculate the length of the gradient, we specify the size of the area 30px, according to the Pythagorean theorem, you can calculate the hypotenuse length of the right triangle. So the width of the stripes we calculate is actually: 15/1.414=10.606, which is smaller than the width 15p we need.

$$ 15/√2 $$

This means that if you want to change the width of the stripe to the 15px that we originally wanted, we need to specify the background-size as 2*15*1.4=42.426px.

We look at the modified effect, after modifying the background-size, get what we want.

2.3 Examples of linear gradients

2.3.1 using linear gradients to generate stripes

In the example above, we have created horizontal and vertical stripes using linear gradients, which are not described here.

2.3.2 creating multi-background images with linear gradients

in CSS3, backgrounds supports multiple backgrounds, the more front background is above , that is, the background can accumulate infinitely, and the nature of the gradient is Background-image , So we can achieve any number of gradient background image overlay effect.

Like a piece:

We add transparent values: linear-gradient (to bottom left, #fc3, Rgba (255,255,255,0))

. demo{  width:250px;  height:156px;  Background:linear-gradient (to bottom left, #fc3, Rgba (255,255,255,0)), url (./flower.jpg);}

The results are as follows:

We can use this to add different effects to the background, such as making the picture invisible (modified to: linear-gradient (to bottom left, #fff, Rgba (255,255,255,0))).

2.3.3 using linear gradients to generate proportional, controllable dashed lines

In real-world development, if a dashed line is required, we typically set border-style:dashed, but there is a problem with this approach: the ratio of solid and dashed lines is certain . Under Chrome and Firefox, the aspect ratio of the color area is 3:1, and the width of the color and transparency area is 1:1:

In IE, the aspect ratio of the color area is 2:1, and the width of the color area and transparent area is also 2:1:

If the designer UI requires that the width-to-height ratio of the dashed color area be 5:3, the ratio of the solid to the dashed line is 1:1, at which point the designer's effect is not achieved by using border-style:dashed. There are two ways to solve this problem:

• Ask the designer to change the UI, so low x is what our front-end engineers do?

• Consult the materials, use other methods to achieve the desired results, the right choice!

Here, we can use Linear-gradient to reach the designer's desired effect:

. demo{  height:3px;  Background:linear-gradient (To-right, #000, #000 5px, transparent 5px, transparent);  background-size:10px 100%;}

The corresponding effect is as follows:

2.3.4 using linear gradients to generate triangles with wireframe

Consider the following scenario, where we need to generate a dialog box:

Most of us may use the following approach:

. talk {  display:inline-block;  max-width:80%;  BORDER:1PX solid blue;  border-radius:3px;  PADDING:6PX 10px;  font-size:14px;  Position:relative;}

. talk:before {  content: ';  Position:absolute;  width:6px;  height:6px;  BORDER:1PX solid blue;  border-right:0;  border-bottom:0;  Left: -4px;  top:13px;  Transform:rotate ( -45deg);  Background-color: #fff;}

If the background is not white:

. talk {  display:inline-block;  max-width:80%;  BORDER:1PX solid blue;  border-radius:3px;  PADDING:6PX 10px;  Background:linear-gradient (To-right, deeppink, yellow);  font-size:14px;  Position:relative;}

You can see that if the background color is not white, the rotated effect has an extra triangle, not the effect we want, and we might try to modify the CSS code like this:

. talk:before {   content: ';   Position:absolute;   Display:inline-block;   width:0;   height:0;   border-top:5px solid transparent;   border-right:5px solid blue;   border-bottom:5px solid transparent;   Left: -5.1px;   top:12px;}

Well, the effect is much better than the above, but the triangle and the border junction of the area more a line, and we want the effect is not the same, we use a linear gradient look, as shown in the following CSS:

. talk:before {  content: "";  Position:absolute;  width:6px;  height:6px;  Background:linear-gradient (to top, blue, blue) no-repeat,              linear-gradient (to right, blue, blue) no-repeat,              Linear-gradient (135deg, #fff, #fff 5.2px, Hsla (0, 0, 100%, 0) 5.2px) no-repeat;  background-size:60px 1px, 1px 60px, 60px 60px;         Transform:rotate ( -45deg);  Left: -4px;  top:13px;}

Wow, it looks good, you can have a date with your sister tonight ...

2.3.5 using linear gradients to generate plus and minus signs

Consider the following requirements:

1. transduction, using small pictures;

2. Traditional methods, using:: Before and:: After pseudo-element with the implementation;

3. implemented using linear gradients;

<a href= "javascript:" class= "btn btn-plus" role= "button" ></a><a href= "javascript:" class= "btn Btn-minus "role=" button "></a>

Traditional methods:

. btn {  display:inline-block;  Background: #f0f0f0 No-repeat Center;  border:1px solid #d0d0d0;  width:24px;  height:24px;  border-radius:2px;  Color: #666;  Transition:color. 2s;}. btn-plus{  position:relative;}. btn-plus:before{  content: ";  Position:absolute;  width:10px;  height:2px;  Background-color:currentcolor;  left:50%;  top:50%;  Margin-top: -1px;  Margin-left: -5px;}. btn-plus:after{  content: ";  Position:absolute;  width:2px;  height:10px;  Background-color:currentcolor;  left:50%;  top:50%;  Margin-top: -5px;  Margin-left: -1px;}

Use the linear gradient method:

. btn {  display:inline-block;  Background: #f0f0f0 No-repeat Center;  border:1px solid #d0d0d0;  width:24px;  height:24px;  border-radius:2px;  Color: #666;  Transition:color. 2s;}. Btn-plus {  background-image:     linear-gradient (to Top, CurrentColor, CurrentColor),     linear-gradient (to Top, CurrentColor, currentcolor);  background-size:10px 2px, 2px 10px;}. Btn-minus {  background-image:linear-gradient (to Top, CurrentColor, currentcolor);  background-size:10px 2px;}

This method generates a plus sign and an equal sign with traditional use:: Before and: After and mates with Background-color and border, the advantage of using a gradient background is that centering is easy to locate.

2.3.6 using linear gradients to create chamfer effects

Look directly at the code:

<p class= "Clip" ></p>

. clip{  width:150px;  height:150px;  Background: #58a;  Background:    linear-gradient (135deg, Transparent 15px, Deeppink 0)    top left,    linear-gradient ( -135deg, Transparent 15px, yellow 0)    top right,    linear-gradient ( -45deg, transparent 15px, blue 0)    bottom right,    linear-gradient (45deg, Transparent 15px, green 0)    bottom left;  background-size:50% 50%;  Background-repeat:no-repeat;}

A linear gradient can also be used to achieve a corner effect (the calculation is slightly more complex, the detailed calculation steps can be seen in the "CSS Disclosure" related chapters), such as:

2.3.7 using linear gradients to achieve envelope effects

<p class= "Demo2" > repeating gradient for envelope effects </p>

. demo2{   width:300px;   font-size:18px;   padding:10px;   border:10px solid transparent;   Background:linear-gradient (white) Padding-box,     repeating-linear-gradient ( -45deg, red 0, Red 12.5%, Transparent 0, transparent 25%,       #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/60px 60px;}

2.3.8 using linear gradients to achieve crop effects

<p class= "Clip" > here is the text </p>

. clip{  Padding:1em;  border:10px solid transparent;  Background:linear-gradient (white) Padding-box,    repeating-linear-gradient ( -45deg, black 0, Black 25%, Transparent 0, Transparent 50%) 0/10px 10px;  Animation:ants 12s linear infinite;  Max-width:20em;} @keyframes Ants {from  {background-position:0 0;}  to {background-position:100% 100%;}}

The effect in the browser is as follows:

If you modify Boder to 1px solid transparent, you can see the following effect:

2.4 Application of more linear gradients

More about linear gradients can be viewed here

The graphs here are implemented using linear gradients, which are visible in the CSS3 of the linear gradient function!

4 more things about linear gradients

In addition to linear gradient linear-gradient, CSS3 also supports repeating linear gradient reapting-linear-gradient.

• The effect of diagonal stripes is achieved with repetitive linear gradients, and there is no need to think hard about creating a repeating unit that directly changes the angle and size of the gradient, compared to a linear gradient.

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

5 written at the end

If want to improve their csss level, recommended "CSS secret", very good amount.

Thanks for reading and hope to help you.