Introduction to CSS3 color value RGBA and gradient color usage

Before CSS3, gradient images could only be used as background images
CSS3's gradient syntax allows us to save the cost of downloading pictures and have better effects when changing the browser resolution.

Color value RGBA

The RGB color standard we are familiar with is composed of three colors: r (red), g (green), and b (blue) to form various colors with values ​​of 0~255, or 0~100%.

RGBA adds an alpha opacity parameter to RGB.

Example 1: Normal red RGB color

.demo {
    width: 100px;
    height: 100px;
    background-color: rgb(255, 0, 0);
}

Example 2: Using RGBA to create a red translucent effect

.demo {
    width: 100px;
    height: 100px;
    background-color: rgba(255, 0, 0, 0.5);
}

The alpha value ranges from 0 to 1. The smaller the value, the more transparent it is. Generally, 0.2-0.5 is the most common value.

Linear-gradient

Gradient means "inclination", linear means "linear". Gradient color is a smooth transition between multiple colors to form a gorgeous color. The linear-gradient parameters include the direction of the gradient (optional) and any number of gradient colors.

Example 3: Red, green and blue gradient colors

.demo {
    width: 100px;
    height: 100px;
    background: linear-gradient(red,lime,blue);
}

Note that I wrote background here, not background-color
(In fact, the gradient color is a function of background-image)

If the gradient direction is not filled in, it defaults to being from top to bottom.

The gradient direction has the following property values
to top, to bottom (default), to left, to right
to top left, to top right, to bottom left, to bottom right
Or fill in the angle xxxdeg
For example, to top left means the direction is toward the upper left.

.demo {
    width: 100px;
    height: 100px;
    background: linear-gradient(to top left,red,lime,blue);
}

Angle 0deg is equivalent to to top, increasing the angle is equivalent to rotating clockwise

.demo {
    width: 100px;
    height: 100px;
    background: linear-gradient(20deg,red,lime,blue);
}

You can add the position of each color gradient after each color

.demo {
    width: 100px;
    height: 100px;
    background: linear-gradient(red 30%,lime 50%,blue 70%);
} 

If you don't fill it in, the browser will divide it equally by default. For example, the three color values ​​are 0%, 50%, and 100% by default.

There is also an unusual function repeating-linear-gradient that allows us to repeat the linear gradient

.demo {
    width: 100px;
    height: 100px;
    background: repeating-linear-gradient(red, rgba(100,100,100,0.5),blue 50%);
}

The result is this ugly gradient color.

radial-gradient

radial means "radial, radiating"
It is a gradient radiating outward from the center.

.demo {
    width: 200px;
    height: 100px;
    background: radial-gradient(red,lime,blue);
}

Similar to linear gradient, but the first parameter (optional) is the gradient shape of radial gradient. The position can be circle or ellipse (default).

.demo {
    width: 200px;
    height: 100px;
    background: radial-gradient(circle,red,lime,blue);
}

You can use the shape at position format to define the position of the gradient center.

.demo {
    width: 200px;
    height: 100px;
    background: radial-gradient(circle at 30% 30%,red,lime,blue);
}

The gradient position can be expressed in percentage or pixel form. If only one value is entered, the other value defaults to the middle position 50%.

.demo {
    width: 200px;
    height: 100px;
    background: radial-gradient(circle at 30%,red,lime,blue);
}

If you don't want to use keywords, you can also use numbers for gradient sizes.

.demo {
    width: 200px;
    height: 100px;
    background: radial-gradient(100px 100px at 50px 50px,red,lime,blue);
}

Indicates gradient size 100px*100px, gradient position 50px*50px

Radial gradient also has a repeated gradient function, which is similar to linear gradient. I won't explain it here.

.demo {
    width: 200px;
    height: 100px;
    background: repeating-radial-gradient(red 10%,lime 20%,blue 30%);
}

This is the end of this article about the use of CSS3 color value RGBA and gradient colors. For more relevant CSS3 RGBA and gradient color content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!