Shulou(Shulou.com)06/01 Report--

1. Stop location

The stop position, which is where the gradient begins.

1) different stop locations

There will be a transition effect. The starting position of # fb3 is 20%. Before 20%, there is only # fb3, and to 80% is # 58a.

Div.transition1 {background: linear-gradient (# fb3 20%, # 58a 80%);}

2) stop has the same location

There will be no transition effect, because # 58a starts the transition in the same position as # fb3, so there is no gap between the two colors.

Div.transition2 {background: linear-gradient (# fb3 50%, # 58a 50%);}

3) stop position is 0

It will be the same as the stopvalue of the previous group, and the following code is the same as the 50% above.

Div.transition3 {background: linear-gradient (# fb3 50%, # 58a 0);}

4) the stripe color is realized by setting 0

The initial gradient of # fb3 is 33.3%, set the second color # 58a to 0, so that there is no gap between the two colors, and the third color yellowgreen is set to 0, which is displayed in all the following colors.

Div.transition4 {background: linear-gradient (# fb3 33.3%, # 58a 0, # 58a 66.6%, yellowgreen 0);}

Second, direction or angle

1) set the stripe display direction

There are four values, left, right, top, bottom.

The values of to top, to bottom, to left and to right are converted to angles 0deg, 180deg, 270deg, 90deg.

Left: sets the Abscissa value of the starting point of the gradient on the left. Right: sets the Abscissa value of the starting point of the gradient on the right.

Top: sets the ordinate value at the top to the starting point of the gradient. Bottom: sets the ordinate value where the bottom is the starting point of the gradient.

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

2) oblique stripes

1. If the angle is set to 45 °, the whole body will tilt over and a triangle will appear, but it is not a stripe.

Div.angle2 {background: linear-gradient (45deg, # fb3 50%, # 58a 0); background-size: 30px 30px;}

two。 If you want to set the stripes, you have to look like the first picture below, there are two positions showing × ×, two positions showing blue, and the second picture is a panorama.

Within 25%, it is blue, then it is blue, then it is 75%, and finally it is blue.

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

3) the calculation method of stripes

The above effect is just a way to show the stripes, but it can be calculated that the following picture is a 30-to-30 square.

In the figure above, it is assumed that the side length of the first right triangle is 15px and equilateral, and the height corresponding to the right angle, that is, the value of the first gradient, is calculated.

According to Pythagorean theorem, the value of oblique edge can be obtained as 15 √ 2. According to the calculation of area, we can get 15 √ 2, and finally get the value in the diagram.

The diagonal length of the square is 30 √ 2, and the height just calculated divided by this value equals 25%, which is the value in the code above.

Third, complex stripes

1) Grid

By combining multiple sets of gradient, you can combine the tablecloth effect.

Div.complex1 {background: white; background-image: linear-gradient (90deg, rgba (200,0,0,0.5) 50%, transparent 0), linear-gradient (rgba (200,0,0,0.5) 50%, transparent 0); background-size: 30px 30px;}

The first group of gradient rotates 90 °, the transparent is transparent and vertical, and the second group is horizontal.

2) Polka dot

By setting two "background-position" to achieve the polka dot effect, where tan is the color value, the new channel TOEFL I mistook for the tangent tan in the trigonometric function.

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

According to the above syntax, there are multiple properties.

Shape: the shape of the gradient, circle (circle) and ellipse (ellipse), is not enough for me to set ellipse in the above code, it is still a circle.

Position: similar to background-position or transform-origin. If default, the default is the center point.

Size: the size of the gradient. The parameters are shown in the table below.

3) Chessboard

The picture above is a chessboard, and you can see that the chessboard effect can be achieved by repeatedly drawing dotted squares.

So we are going to use the linear-gradient combination to create the shape in this square.

If you draw two squares directly, it will be more difficult, but if you draw four right triangles and then shift them, it will be easier to achieve.

Merge the first triangle in the red square with the second triangle in the green square, and then merge the remaining two together so that you can make two squares.

Div.complex3 {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, 15px 15px, 15px 15px, 30px 30px; background-size: 30px 30px;}

The above code is implementing the puzzle, which is offset by setting background-position.

4) online texture background example

On the css3patterns site, there are many examples, as well as source code.

IV. Ring

The circle looks like a circle by drawing a pie chart and then drawing a circle with the same color as the background.

The above is the HTML code, very concise.

1) draw a circle

First through the "linear-gradient", the drawing is half green and half gray.

.pie {width: 100px; height: 100px; border-radius: 100%; background: yellowgreen; background-image: linear-gradient (to right, transparent 50%, # 655 0); transform: rotate (20deg); / * just to rotate * /}

2) Mask

Add a mask to the pseudo element ":: before". The mask can cover the circle on the right side.

.pie:: before {content:'; display: block; margin-left: 50%; height: 100%; border-radius: 0% 100% 0 / 50%; background-color: inherit; transform-origin: left; transform: rotate (.1turn);}

"border-radius": sets the fillet radius of the four corners of the quadrilateral. The above values can be divided into four properties. After this setting, the shape of the mask is a semicircle.

The first is the horizontal radius and the second is the vertical radius.

.pie:: before {border-top-left-radius: 0 50%; border-top-right-radius: 100% 50%; border-bottom-right-radius: 100% 50%; border-bottom-left-radius: 0 50%;}

"transform-origin": to allow the mask to rotate around the center of the circle, "left" is set.

"rotate": there are four units of rotation

3) rotation

You can display the parts you want to display by rotating the mask. As shown in the following figure, you can rotate different "turn" to show different parts.

But when it's over 50%, that is, when you set ".6turn", it looks like this.

Not like this, so we need to make some small adjustments here.

The first thing is to set the mask gray, and the second thing to rotate is not ".6turn", but ".1turn".

.pie:: before {transform: rotate (.1turn); background: # 655;}

4) Inner circle

Draw a circle in the pseudo object ":: after" that is the same as the background color.

5. Arrow shape

1) Angl

The angles in linear-gradient are rotated clockwise. In the following table, the first two are clockwise and the last two are counterclockwise.

H4 {background:linear-gradient (10deg, transparent 15px, # 2bbf85 0);} 10 °170 °- 10 °

-170 °

You can pick up your phone and spin it.

2) to

In addition to the angle, you can also set the values of to top, to bottom, to left and to right, which will be converted to angles of 0,180,270 and 90 degrees.

H4 {background:linear-gradient (to left bottom, transparent 15px, # 2bbf85 0);}

You can also use it in combination:

Left bottomleft topright bottom

Right top

3) make arrowheads

Set two angles to the two linear-gradient, and set the value of background-size, and the last two background images are put together to form an arrow.

H4 {width: 200px; height: 100px; background: linear-gradient (- 60deg, transparent 20%, # 2bbf85 0) bottom right, linear-gradient (- 120deg, transparent 20%, # 2bbf85 0) top right; background-size: 100% 50%, 100% 50%; background-repeat: no-repeat, no-repeat;}

Recently, I applied linear-gradient to one of my actual projects, which surrounded the circle of competition and enclosed the arrows of the words discrimination.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.