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

This article introduces the relevant knowledge of "what are the new functions of css3". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Gradient is a new image type added by css3 to replace pictures. CSS3 defines two types of gradients: 1, linear gradients, using the "linear-gradient ()" function definition; 2, radial gradients, using the "radial-gradient ()" function definition.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

As a new attribute of CSS3, gradients also have unlimited potential.

I. brief introduction

   gradient is a new image type added by CSS3 to replace pictures. It has the following benefits:

Speed up the loading of pages and reduce the consumption of bandwidth

More flexible.

CSS3 defines two types of gradients:

Linear gradient (Linear Gradients)-down / up / left / right / diagonal

Radial gradient (Radial Gradients)-defined by their center

Second, linear gradient

The use of    gradients is also quite common, such as the navigation bar:

Background-image: linear-gradient (90degmage 0afrem 0085ff)

   obviously, this is much better than a solid color background.

  , of course, we don't need transitions when we have time:

Background-image: linear-gradient (90degmaid blue 100px 200px)

   for linear gradients, in addition to linear-gradient, there is also repeating-linear-gradient:

$C1: # fff; $c2: # DF5646; $c3: # 1C78A4; background-image: repeating-linear-gradient (45deg, $C1, $C1 10px, $c2 10px, $c2 40px, $C1 40px, $C1 50px, $c3 50px, $c3 80px)

   shows that gradients are not that simple.

  , someone here must ask, what other tricks can you play? First of all, we need to understand that a gradient is a kind of image, so what other CSS properties are used with pictures?

$color: # 122556; background-image: linear-gradient (45deg, $color 25%, transparent 25%, transparent 75%, $color 75%), linear-gradient (- 45deg, $color 25%, transparent 25%, transparent 75%, $color 75); background-size: 30px 30px

   through this example, whether the use of gradients is more open-minded. But there is one more thing to note here:

When you declare multiple gradients, the first one to declare is closer to the user. (here we need to consider the problem of covering, usually using transparent)

   similarly, gradients can also be animated

@ mixin menuaction ($color) {background: linear-gradient ($color 100%, transparent 100%) no-repeat center bottom / 100% 10%; &: hover {background-size: 100%; color: # fff;} 3. Radial gradient

The radial gradient is defined by its center.

In order to create a radial gradient, you must also define at least two color nodes. The color node is the color you want to show a smooth transition. At the same time, you can also specify the center, shape (circle or oval) and size of the gradient. By default, the center of the gradient is center (for the center point), the shape of the gradient is ellipse (for oval), and the size of the gradient is farthest-corner (for the farthest corner).

Grammar

Background-image: radial-gradient (shape size at position, start-color,..., last-color); value description shape determines the type of circle:

Ellipse (default): specifies the radial gradient of the ellipse.

Circle: specify the radial gradient of the circle

Size defines the size of the gradient, possible values:

Farthest-corner (default): specifies that the radius length of the radial gradient is the angle farthest from the center of the circle.

Closest-side: specifies that the radius length of the radial gradient is from the center of the circle to the nearest edge of the center

Closest-corner: specifies that the radius length of the radial gradient is from the center of the circle to the nearest angle to the center of the circle

Farthest-side: specifies that the radius length of the radial gradient is the edge farthest from the center of the circle

Position defines the position of the gradient. Possible values:

Center (default): sets the ordinate value of the center of the radial gradient circle in the middle.

Top: sets the ordinate value of the center of the radial gradient at the top.

Bottom: sets the ordinate value of the center of the radial gradient at the bottom.

Start-color,..., last-color are used to specify the start and end color of the gradient.

Example:

# grad1 {height: 150px; width: 200px; background-color: red; / * display * / background-image: radial-gradient (red, yellow, green) when not supported by browsers; / * standard syntax (must be placed last) * /} # grad2 {height: 150px; width: 200px; background-color: red / * display * / background-image when the browser does not support it: radial-gradient (circle, red, yellow, green); / * Standard syntax (must be placed last) * /} Radial gradient-shape

Oval Ellipse (default):

Round Circle:

Note: gradients are not supported in Internet Explorer 9 and previous versions.

IV. Summary

What does    end with? , there are all kinds of coupons recently, so let's use the knowledge of gradual change to get a coupon:

Div {width: 300px; height: 120px Background: radial-gradient (transparent 0, transparent 5px, rgb (247,245,201) 5px) no-repeat, radial-gradient (transparent 0, transparent 5px, rgb (247,245,201) 5px) no-repeat, radial-gradient (transparent 0, transparent 5px, rgb (247,245,201) 5px) no-repeat Radial-gradient (transparent 0, transparent 5px, rgb (247,245,201) 5px) no-repeat, radial-gradient (transparent 0, transparent 5px, rgb (247,245,201) 5px) no-repeat, radial-gradient (transparent 0, transparent 5px, rgb (247,245,201) 5px) no-repeat Radial-gradient (# fff 0,# fff 10px, rgb (247,245,201) 10px) no-repeat, radial-gradient (# fff 0,# fff 10px, rgb (247,245,201) 10px) no-repeat, linear-gradient (90deg, transparent 10px, rgb (247,245) 201) 10px) Background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 60px 60px, 60px 60px, 100% 100%; background-position:-10px 0,-10px 20px,-10px 40px,-10px 60px,-10px 80px,-10px 100px, 60px-30px, 60px 90px, left center;}

This is the end of the content of "what are the new features of css3". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.