CSS Gradients (Thematic)

“Directory”

CSS Gradients (Thematic)
- Linear Gradient
  - The first parameter (direction, negligible)
    - 1. By default, the first parameter is written from top to bottom
    - 2. If the first argument (top/left/bottom/right)
    - 3. You can also use Angle (Angle value deg) to control
  - Second parameter (color)
    - 1. Can use English letters for color control
    - 2. You can use hexadecimal #RRGGBB for color control
    - 3. You can use hexadecimal and transparency #RRGGBBAA for color control
    - 4. Use RGB/RGBA color control
    - 5. Use multiple color controls
    - 6. Use multiple color controls with a specified range
  - Linear gradient total writing method
- Radial gradient
  - The first parameter of the first parameter (radius, negligible)
    - 1. If the first parameter is not written, it starts from the middle by default, and the style is circle
    - 2. If pass a value radius
    - 3. If pass two radius values
    - 4. judging by the closest survey /closest corner/ mad side/ mad corner
      - 4.1 If it is circular
      - 4.2 If ellipse
  - Two arguments in the first argument (shape, negligible)
    - Shape (circle,ellipse)
    - 2. If so, add length, range and shape
  - The third argument in the first argument (direction, negligible)
    - 1. If the first parameter (center/top/bottom/left/right)
    - 2. If the direction is specific value, determine the center of the circle
    - 3. Center the circle if the direction is a percentage
  - Second parameter (color)
  - Radial gradient general writing method
- compatibility
- Special effects
  - The progress bar
  - Animated stereo ball
- reference

Css3 defines two Gradients: Linear Gradients **or Radial Gradients

This property is only compatible with IE10 and above, so let’s discuss the compatibility of gradients.

A gradient is one of the background images, so in the CSS property, you can write ==background== background-image==, or you can use background.

Linear Gradient

== Features == : is the color gradient in one direction, up/down/left/right/diagonal

== Elements == : Direction, color (start, end, intermediate color)

== syntax == : background: Linear gradient(to direction, color-start, color-stop1,… , color-end);

== Use == :

The first parameter (direction, negligible)

1. By default, the first parameter is written from top to bottom

background: linear-gradient(hotpink, darkblue);
Copy the code

Effect:

2. If the first argument (top/left/bottom/right)

If you’re writing it native, you have to add to it, so it’s the other way around, and if you’re writing it diagonally, you can switch between up and down and left and right

To the bottom

Start from the left

Start from the right

To the top

To top left(from bottom right corner)

To top right(from bottom left)

To bottom left

To the bottom right

background: linear-gradient(to bottom,hotpink, darkblue);
background: linear-gradient(to right,hotpink, darkblue);
background: linear-gradient(to left,hotpink, darkblue);
background: linear-gradient(to top,hotpink, darkblue); 
background: linear-gradient(to right bottom,hotpink, darkblue); 
background: linear-gradient(to top right,hotpink, darkblue);
background: linear-gradient(to left bottom,hotpink, darkblue);
background: linear-gradient(to top left,hotpink, darkblue);
Copy the code

3. You can also use Angle (Angle value deg) to control

All colors start from the center, 0deg is the direction to top, clockwise is positive, counterclockwise is negative

0deg / 360deg (bottom to top)

90deg (left to right)

180deg (top to bottom)

270deg / -90deg (right to left)

45deg (bottom left to top right diagonal)

background: linear-gradient(0deg.#fc466b.#3f5efb);
background: linear-gradient(90deg.#fc466b.#3f5efb);
background: linear-gradient(180deg.#fc466b.#3f5efb);
background: linear-gradient(270deg.#fc466b.#3f5efb);
background: linear-gradient(360deg.#fc466b.#3f5efb);
background: linear-gradient(-90deg.#fc466b.#3f5efb);
background: linear-gradient(-180deg.#fc466b.#3f5efb);
background: linear-gradient(45deg.#fc466b.#3f5efb);
Copy the code

Effect:

Second parameter (color)

1. Can use English letters for color control

   background: linear-gradient(slateblue, cornflowerblue);
Copy the code

Effect:

Of course, if you use Transparent, you can see a full transparent gradient

   background: linear-gradient(transparent, cornflowerblue);
Copy the code

Effect:

2. You can use hexadecimal #RRGGBB for color control

background: linear-gradient(#fc466b.#3f5efb);
Copy the code

Effect:

3. You can use hexadecimal and transparency #RRGGBBAA for color control

The so-called hexadecimal plus transparency is generally not used and not recommended, so why not? That is, == can cause a big compatibility problem ==, but sometimes it has to be used because of transparency compatibility issues.

What’s the problem?

> Chrome and Firefox are supported in the form ==#rrggbbaa== but this form is not supported in IE. What about Internet Explorer? ==#aarrggbb== #aarrggbb== #aarrggbb== Therefore == is not recommended.Copy the code

>AA indicates transparency, 00 indicates full transparency, and FF indicates complete opacity. > >RR indicates the red value > >GG indicates the green value > >BB indicates the blue valueCopy the code

How does ==0~1 transparency translate to 00-FF hex transparency? = =

Math.round(256 * opacity).toString(16)

Let’s try the code in 2 at 50% transparency:

background: linear-gradient(#7ffc466b, #7f3f5efb);
Copy the code

Here are the renderings for Chrome and Firefox:

4. Use RGB/RGBA color control

background: linear-gradient(rgb(255.237.188), rgb(237.66.100));   /*rbg*/
background: linear-gradient(rgb(255.237.188.5), rgb(237.66.100.5));  /*rgba*/
Copy the code

Effect:

5. Use multiple color controls

You just have to add to it

background: linear-gradient(#3a1c71.#d76d77.#ffaf7b);
Copy the code

Effect:

6. Use multiple color controls with a specified range

By adding a percentage to the color, you can control how many percent of the entire width to reach a certain color value

background: linear-gradient(#3a1c71.#d76d77.#ffaf7b); 
background: linear-gradient(#3a1c71.#d76d77 20% ,#ffaf7b 70%); 
background: linear-gradient(#3a1c71.#d76d77 80% ,#ffaf7b 90%); 
Copy the code

Effect:

Linear gradient total writing method

background: linear-gradient(to bottom,#3a1c71.#d76d77 80% ,#ffaf7b 90%); 
Copy the code

Radial gradient

== Features == : A center point is shaded to the periphery

== Elements == : Direction, shape, size, color (start, end, intermediate color)

== syntax == : background: radial-gradient(size shape at position,start-color,… , last-color);

== = : == = both use a 200px * 200px div==

The first parameter of the first parameter (radius, negligible)

1. If the first parameter is not written, it starts from the middle by default, and the style is circle

background: radial-gradient(hotpink, darkblue);
Copy the code

Effect:

2. If pass a value radius

background: radial-gradient(300px,hotpink, darkblue);
background: radial-gradient(200px,hotpink, darkblue);
Copy the code

= = = =

Effect:

3. If pass two radius values

== pass two values default to ellipses, one is the horizontal length, the other is the vertical length ==

background: radial-gradient(200px 50px,hotpink, darkblue);
background: radial-gradient(50px 100px,hotpink, darkblue);
Copy the code

Effect:

4. judging by the closest survey /closest corner/ mad side/ mad corner

The size is determined by the position ==

4.1 If it is circular

/*closest-side*/
background: radial-gradient(closest-side,#ffaf7b.#d76d77 ,#3a1c71);
/*40% : 40%, 50%*/
background: radial-gradient(closest-side circle at 40%.#ffaf7b.#d76d77 ,#3a1c71);  
background: radial-gradient(closest-side circle at 20% 30%.#ffaf7b.#d76d77 ,#3a1c71);
/*closest-corner*/
background: radial-gradient(closest-corner,#ffaf7b.#d76d77 ,#3a1c71);
background: radial-gradient(closest-corner circle at 40%.#ffaf7b.#d76d77 ,#3a1c71);
background: radial-gradient(closest-corner circle at 20% 30%.#ffaf7b.#d76d77 ,#3a1c71);
/*farthest-side*/
background: radial-gradient(farthest-side,#ffaf7b.#d76d77 ,#3a1c71);
background: radial-gradient(farthest-side circle at 40%.#ffaf7b.#d76d77 ,#3a1c71);
background: radial-gradient(farthest-side circle at 20% 30%.#ffaf7b.#d76d77 ,#3a1c71);
/*farthest-corner*/
background: radial-gradient(farthest-corner,#ffaf7b.#d76d77 ,#3a1c71);
background: radial-gradient(farthest-corner circle at 40%.#ffaf7b.#d76d77 ,#3a1c71);
background: radial-gradient(farthest-corner circle at 20% 30%.#ffaf7b.#d76d77 ,#3a1c71);
Copy the code

Effect:

4. 2 If it is an ellipse

/*closest-side*/
background: radial-gradient(closest-side ellipse,#ffaf7b.#d76d77 ,#3a1c71);
/*40% : 40%, 50%*/
background: radial-gradient(closest-side ellipse at 40%.#ffaf7b.#d76d77 ,#3a1c71);  
background: radial-gradient(closest-side ellipse at 20% 30%.#ffaf7b.#d76d77 ,#3a1c71);
/*closest-corner*/
background: radial-gradient(closest-corner ellipse,#ffaf7b.#d76d77 ,#3a1c71);
background: radial-gradient(closest-corner ellipse at 40%.#ffaf7b.#d76d77 ,#3a1c71);
background: radial-gradient(closest-corner ellipse at 20% 30%.#ffaf7b.#d76d77 ,#3a1c71);
/*farthest-side*/
background: radial-gradient(farthest-side ellipse,#ffaf7b.#d76d77 ,#3a1c71);
background: radial-gradient(farthest-side ellipse at 40%.#ffaf7b.#d76d77 ,#3a1c71);
background: radial-gradient(farthest-side ellipse at 20% 30%.#ffaf7b.#d76d77 ,#3a1c71);
/*farthest-corner*/
background: radial-gradient(farthest-corner ellipse,#ffaf7b.#d76d77 ,#3a1c71);
background: radial-gradient(farthest-corner ellipse at 40%.#ffaf7b.#d76d77 ,#3a1c71);
background: radial-gradient(farthest-corner ellipse at 20% 30%.#ffaf7b.#d76d77 ,#3a1c71);
Copy the code

Effect:

Two arguments in the first argument (shape, negligible)

Shape (circle,ellipse)

If div is square then there is no difference between circle and ellipse, but if div is rectangular then ellipse is compressed by length ==

background: radial-gradient(circle,hotpink, darkblue); /* Figure 1 and 3*/
background: radial-gradient(ellipse,hotpink, darkblue); /* Figure 2 and 4*/
Copy the code

Renderings (two on the left are 200px by 200px and two on the right are 200px by 100px)

2. If so, add length, range and shape

== This example states that the radius should be written before the shape and that the radius is more important than the shape ==

background: radial-gradient(300px circle,hotpink, darkblue);
background: radial-gradient(200px circle,hotpink, darkblue);
background: radial-gradient(100px circle,hotpink, darkblue);
background: radial-gradient(50px circle,hotpink, darkblue);
background: radial-gradient(0px circle,hotpink, darkblue);

/* If you add the size of the long and short axes and then write circle, then circle will not work, and you will still get an ellipse */
background: radial-gradient(200px 50px ellipse,hotpink, darkblue);
Copy the code

Effect:

The third argument in the first argument (direction, negligible)

1. If the first parameter (center/top/bottom/left/right)

== if you’re writing it in the native way remember to add at, and you can swap up and down and left and right when you’re diagonals

background: radial-gradient(at center,hotpink, darkblue);
background: radial-gradient(at top,hotpink, darkblue);
background: radial-gradient(at bottom,hotpink, darkblue);
background: radial-gradient(at left,hotpink, darkblue);
background: radial-gradient(at right,hotpink, darkblue);
background: radial-gradient(at center center,hotpink, darkblue);
background: radial-gradient(at top left,hotpink, darkblue);
background: radial-gradient(at top right,hotpink, darkblue);
background: radial-gradient(at bottom right,hotpink, darkblue);
background: radial-gradient(at bottom left,hotpink, darkblue);
Copy the code

Effect:

2. If the direction is specific value, determine the center of the circle

== can be positive or negative, can be out of range ==

background: radial-gradient(circle at 0 0,hotpink, darkblue);
background: radial-gradient(circle at 50px 50px,hotpink, darkblue);
background: radial-gradient(circle at 100px 50px,hotpink, darkblue);
background: radial-gradient(circle at 50px 100px,hotpink, darkblue);
background: radial-gradient(circle at 100px 100px,hotpink, darkblue);
Copy the code

Effect:

3. Center the circle if the direction is a percentage

== can be an integer or a negative number, can be out of range, same direction ==

background: radial-gradient(circle at 0 0,hotpink, darkblue);
background: radial-gradient(circle at 25% 25%,hotpink, darkblue);
background: radial-gradient(circle at -25% 50%,hotpink, darkblue);
background: radial-gradient(circle at 50% 150%,hotpink, darkblue);
background: radial-gradient(circle at 50% 50%,hotpink, darkblue);
Copy the code

Effect:

Second parameter (color)

Colors have been discussed in linear gradients. Radial gradients are the same as linear gradients. Here are only the different parts:

Only when the radial gradient is calculated as a percentage, the color transition is done from the inside out

background: radial-gradient(#ffaf7b.#d76d77.#3a1c71); 
background: radial-gradient(#ffaf7b.#d76d77 20% ,#3a1c71 70%); 
background: radial-gradient(#ffaf7b.#d76d77 80% ,#3a1c71 90%); 
Copy the code

Effect:

Radial gradient general writing method

background: radial-gradient(100px circle at 75% 75%.#ffaf7b.#d76d77 20% ,#3a1c71 60%); 
background: radial-gradient(200px 100px ellipse at 25% 25%.#ffaf7b.#d76d77 60% ,#3a1c71 90%); 
Copy the code

Effect:

compatibility

The compatibility problem is the compatibility problem of various browsers.

The first step is simply to add a private prefix.

== Note that the standard syntax is written at the bottom, the private prefix is not added to, and the direction is the starting point ==

/* Linear gradient */
background: -webkit-linear-gradient(left, hotpink , darkblue); /* Safari 5.1-6.0 */
background: -o-linear-gradient(left, hotpink, darkblue); /* Opera 11.1-12.0 */
background: -moz-linear-gradient(left, hotpink, darkblue); /* Firefox 3.6-15 */
background: linear-gradient(to right, hotpink , darkblue); /* Standard syntax */
/* Radial gradient */
background: -webkit-radial-gradient(center, hotpink , darkblue); /* Safari 5.1-6.0 */
background: -o-radial-gradient(center, hotpink, darkblue); /* Opera 11.1-12.0 */
background: -moz-radial-gradient(center, hotpink, darkblue); /* Firefox 3.6-15 */
background: radial-gradient(at center, hotpink , darkblue); /* Standard syntax */
Copy the code

The second step is mainly aimed at Internet Explorer 9 below the browser, is not support gradient effect.

The solution is to use IE’s private gradient filter ==

filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=hotpink,endcolorstr=darkblue,gradientType=1);
/** @ First argument: startColorstr (startcolorstr) @second argument: endcolorstr (endcolorstr) @third argument: GradientType indicates direction (1 for horizontal gradients, 0 for vertical gradients) */
Copy the code

If you want white transparency, use an 8-character hexadecimal notation, as mentioned above, and the rule is ==#AARRBBGG==

So if you want to be compatible with browsers below IE9, write:

/*50% transparency #fc466b and 50% transparency #3f5efb*/
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7ffc466b,endcolorstr=#7f3f5efb,gradientType=1);/* Compatible with IE9 and below */
background: -webkit-linear-gradient(left, rgba(252.70.107.5),rgba(63.94.251.5)); /* Standard syntax */
background: -o-linear-gradient(left, rgba(252.70.107.5),rgba(63.94.251.5)); /* Standard syntax */
background: -moz-linear-gradient(left, rgba(252.70.107.5),rgba(63.94.251.5)); /* Standard syntax */
background: linear-gradient(to right, rgba(252.70.107.5),rgba(63.94.251.5)); /* Standard syntax */
Copy the code

Effect:

Special effects

Progress bar animation

What’s the effect? Screenshots:

Analysis: Set the Angle, color and range of the color gradient. Then set the animation from left to right.

Implementation:

body{
  margin:0;
  padding:0;
  /* Use a gray background */ for display purposes
  background-color:#ccc;  
}

.load{
  width:500px;
  height:100px;
  /* If the gradient doesn't come out, there will be a background color */
  background:#fff;  
  margin:100px auto;
  /* Key code for spacing colors */
  background-image:linear-gradient(
  	45deg.#fff 0%.#fff 25%.# 000 25%.# 000 50%.#fff 50%.#fff 75%.# 000 75%.# 000 100%
  );
  /* compress the background to 100px * 100px, not set not to repeat */
  background-size: 100px 100px; 
  /* Live animation */
  animation: move 1s linear infinite; 
}

@keyframes move{
  0%{}100%{
    background-position:100px;  /* The stop state is to move to 100px, and then the next second start moving from 0px */}} <div class="load"></div>
Copy the code

Three-dimensional ball

Effect:

Analysis: The background color is set to one, the gradient is black and transparent to opaque gradient, and the outside outline is round.

body {
  margin: 0;
  padding: 0;
  background-color: #F7F7F7;
}

.radial-gradient {
  width: 200px;
  height: 200px;
  margin: 40px auto;
  border-radius: 100px;
  background-color: hotpink; /* The left one has no background color and the right one has a background color */
  background-image: radial-gradient(
    200px at 50px 60px.rgba(0.0.0.0),
    rgba(0.0.0.0.6)); } <div class="radial-gradient"></div>
Copy the code

reference

And linear gradient

And radial gradient

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

CSS – Gradients

CSS Gradients (Thematic)

Linear Gradient

The first parameter (direction, negligible)

1. By default, the first parameter is written from top to bottom

2. If the first argument (top/left/bottom/right)

3. You can also use Angle (Angle value deg) to control

Second parameter (color)

1. Can use English letters for color control

2. You can use hexadecimal #RRGGBB for color control

3. You can use hexadecimal and transparency #RRGGBBAA for color control

4. Use RGB/RGBA color control

5. Use multiple color controls

6. Use multiple color controls with a specified range

Linear gradient total writing method

Radial gradient

The first parameter of the first parameter (radius, negligible)

1. If the first parameter is not written, it starts from the middle by default, and the style is circle

2. If pass a value radius

3. If pass two radius values

4. judging by the closest survey /closest corner/ mad side/ mad corner

4.1 If it is circular

4. 2 If it is an ellipse

Two arguments in the first argument (shape, negligible)

Shape (circle,ellipse)

2. If so, add length, range and shape

The third argument in the first argument (direction, negligible)

1. If the first parameter (center/top/bottom/left/right)

2. If the direction is specific value, determine the center of the circle

3. Center the circle if the direction is a percentage

Second parameter (color)

Radial gradient general writing method

compatibility

Special effects

Progress bar animation

Three-dimensional ball

reference

CSS – Gradients

CSS Gradients (Thematic)

Linear Gradient

The first parameter (direction, negligible)

1. By default, the first parameter is written from top to bottom

2. If the first argument (top/left/bottom/right)

3. You can also use Angle (Angle value deg) to control

Second parameter (color)

1. Can use English letters for color control

2. You can use hexadecimal #RRGGBB for color control

3. You can use hexadecimal and transparency #RRGGBBAA for color control

4. Use RGB/RGBA color control

5. Use multiple color controls

6. Use multiple color controls with a specified range

Linear gradient total writing method

Radial gradient

The first parameter of the first parameter (radius, negligible)

1. If the first parameter is not written, it starts from the middle by default, and the style is circle

2. If pass a value radius

3. If pass two radius values

4. judging by the closest survey /closest corner/ mad side/ mad corner

4.1 If it is circular

4. 2 If it is an ellipse

Two arguments in the first argument (shape, negligible)

Shape (circle,ellipse)

2. If so, add length, range and shape

The third argument in the first argument (direction, negligible)

1. If the first parameter (center/top/bottom/left/right)

2. If the direction is specific value, determine the center of the circle

3. Center the circle if the direction is a percentage

Second parameter (color)

Radial gradient general writing method

compatibility

Special effects

Progress bar animation

Three-dimensional ball

reference

Related Posts

Js Judge mobile phone Android, iOS, wechat browser

Rem notes

21 front-end operation project – dy (you will get different details here ~)