How to achieve gradient gradient of background image color through CSS3_html/css_WEB-ITnose

With the increasing popularity of websites, CSS3 and HTML5 will surely become the mainstream direction of website front-end development, especially on the mobile side. High-end browsers have brought untold challenges to front-end engineers. table experience.

In layman’s terms, CSS3 can be said to be an upgraded version of CSS technology, and CSS3 language development is developing towards modularization. The previous specification was too large and complex as a module, so it was broken down into smaller modules and more new modules were added. These modules include: box model, list module, hyperlink method, language module, background and border, text effects, multi-column layout, etc. So, the first thing I want to share with you on Ma Haixiang’s blog today is CSS3 Gradients.

First, let’s take a look at the new gradient syntax. The new syntax contains four gradient functions:

linear-gradient()
radial-gradient ()
Repeating-linear-gradient()
Repeating-radial-gradient()

These function names do not require too much explanation. I will talk more about loops on Ma Haixiang’s blog later. Gradient web design.

Because the specification is still in draft form, we are prefixing these gradient functions with -webkit-. When specifications are no longer in the draft stage in the future, we will be able to use them without prefixes.

1. Linear Gradients (Linear Gradients)

It is most commonly used to fill linear gradients for the element box model. You just need to consider which direction the gradient starts from. According to Ma Haixiang, there are two ways to specify it.

First, you can specify which direction or corner the gradient starts from:

linear-gradient(left, white, black)

linear-gradient(top right, white, black)

You can even omit the first parameter, it will default to top and give a vertical gradient.

Second, you can specify the gradient angle:

linear-gradient(135deg, white, black)

The angle rotates counterclockwise, from left to right at 0 degrees.

Note that in all of these cases the gradient is large enough to fill the element box model.

2. Radial Gradients (radial gradient gradient)

Radial gradients are more complex and have more options when filling.

Ma Haixiang thinks that the simplest form is to start the gradient from the center of the element box model and fill it outward to every corner:

radial-gradient(white, black )

This is equivalent to radial-gradient(center, ellipse cover, white, black).

The first parameter is optional, defaulting to center, or it can be a point (just like background-position), which allows you to place the origin elsewhere:

radial-gradient(10% 30%, white, black)

The parameters after the origin position are used to specify the shape and size of the gradient. This is one of two ways.

This method uses some keywords to describe the shape (circle, ellipse) and size (closest-side, closest-corner, farthest-side, farthest-corner, contain, cover). For example:

radial-gradient(30% 30%, closest-corner, white, black)

radial-gradient(30% 30%, circle closest-corner , white, black)

If you wish, you can also specify the horizontal and vertical end radius of the radial gradient separately:

radial-gradient(center, 5em 40px , white, black)

3. Repeating Gradients (repeating gradient gradient)

Cycling gradient repeating-linear-gradient() and repeating-radial-gradient()

has exactly the same shorthand syntax, and the entire gradient will be filled in a loop:

repeating-linear-gradient(left, red 10%, blue 30%)

These stops will be cycled to adjust as they are placed end to end, which often results in strong transitions between colors.

You can avoid the color at the end of the loop:

repeating-radial-gradient(top left, circle, red, blue 10%, red 20%)

4. Color Stops

It’s easy to specify color stops for a gradient; in the simplest case, you just need to provide a list of colors:

linear-gradient(left, red, green, blue)

This will make all colors evenly distributed on the gradient. web frontend

If you want, you can also target specific stops for individual colors and let the browser allocate the rest:

linear-gradient(bottom left, red 20px, yellow, green, blue 90%)

Those gradient axes may be diagonal lines; then the percentage corresponds to the length of the diagonal line.

Stops with the same color will result in a strong transition between colors:

linear-gradient(top left, red, yellow, green 60%, purple 60%, blue)