[CSS advanced] detailed explanation of CSS color system and css Advanced System

[CSS advanced] detailed explanation of CSS color system and css Advanced System

Speaking of CSS color, it is no stranger to everyone. This article is a systematic summary and learning of CSS color system.

First, use a picture to intuitively see what content is covered in CSS color.

The content of the next article will probably follow this order. The content is very basic and can be selectively jumped to the corresponding content for reading.

Color keywords

Well, color keywords are easy to understand. It indicates a specific color value and is case insensitive. For examplecolor:redRed is a color keyword.

Before CSS3, CSS Standard 2 contains 17 basic colors:

In CSS3, the color keywords have been greatly expanded to 147. The following is only a part of the list:

View the complete CSS3 color keyword stamp

It is worth noting that unknown keywords will invalidate CSS attributes.

Here, test3 is used to describe that when the entered color keyword is incorrect, the CSS attribute will be invalid instead of using the currentcurrentColor.currentColorIt will be described below.

Which attributes can set colors?

All the places where the color value can be used can be replaced by the color keyword. In CSS, Where can the color value be used?

• Text colorcolor:red

• Background Color of the elementbackground-color:red(Including various gradient)

• Element borderborder-color:red

• Box shadows or text shadows of Elementsbox-shadow:0 0 0 1px red|text-shadow:5px 5px 5px red

• Apply to some Filtersfilter: drop-shadow(16px 16px 20px red)

• Horizontal line color

Some attributes cannot be set directly, but can be obtained or inherited from the current element currentColor:

• . That is, when the image cannot be displayed, the text that appears in the image will inherit the color value.

• The dot of the ul list item

Some of the more common ones will not be used as an example.,Alt text and ul list item smaller points.

Tested,You can set the color value of border.

The alt text and ul list entries of the inherits the attributes of the current element currentColor.

For Form Controls<input type="radio"> <input type="checkbox">At the moment, there is no good way to change the color directly. If you know it, please kindly advise.

Transparent

The literal meaning of transparent is transparency. It is used to indicate a completely transparent color, that is, the color looks like a background color.

It can also be understoodrgba(0,0,0,0).

It is worth noting that:

• Before CSS3, the transparent keyword is not a real color and can only be usedbackground-colorAndborder-colorIndicates a transparent color. In browsers that support CSS3, It is redefined as a real color, and transparent can be used for anycolorValue, such as the color attribute.

So what is the use of this transparent value? Simple examples:

Transparent is used for border to draw triangles.

This is one of the most common transparent usage and is used to draw triangles.

Combined with figure 1 and figure 2, we can see that a div with a high width of 0 is used to set its border. When the border color on any three sides is transparent, you can obtain a triangle with any orientation.

As mentioned above, since transparent can be used in earlier browsers (IE78) in border and background, this method is compatible and can be used in many scenarios.

Transparent is used for border to increase the click hot zone

Buttons are an important part of our webpage design, and the design of buttons is closely related to the user experience. Making it easier for users to click a button can undoubtedly improve the user experience, especially on mobile terminals, the buttons are usually very small, but sometimes due to design constraints, we cannot directly change the height and width of the button element. In this case, is there any way to increase the click hot zone without changing the original size of the button?

Here, the transparent border can be easily implemented for US (I wrote in a previous article, and can also be implemented using pseudo elements), using a transparent layerborder:20px solid transparentWe can write as follows:

Try to move the cursor closeBtnBefore the color area is reached, the interactive response event of the mouse is triggered.hoverTo expand the clickable area of the button on the mobile end without changing the shape of the button. Like this:

Well, here we willborderIt is used to expand the mouse click area. However, the actual situation is that sometimes our buttons must use border, while border can only set one weight (not likebox-shadowAndGradientSet multiple border). If you need to use this method, you can use the inner shadow.box-shadowSimulate a layer of border, like this:

Transparent is used for background to draw background images

Transparent is used for background and can usually produce a variety of background images. Here is a simple example to use a transparent gradient to implement a corner chart:

PassLinear gradient linear-gradientTo change from transparent color to solid color, the four 1/4 sizes (background-size: 50% 50%.

The combination of transparent and gradient can also generate a variety of wonderful images. You can stamp the following:

• CSS3 whimsy

• CSS3 Patterns Gallery

Transparent for text color

With box-shadow, transparent can be used in the text to create a text glow effect. Try the text below the hover:

Transparent actually has a lot to do, so I will talk so much about it now. Welcome to continue the discussion.

CurrentColor

Many people do not knowcurrentColorThis stuff. Like transparent, it is also a keyword. As the name suggests, it indicates the current color. It comes from a self-attribute or its parent attribute.

It can be simply understood as the text color inherited or set by the current CSS label, that is, the value of color.

Then how can it be used? According to the principle of CSS writing, DRY (Don't Repeat Yourself) can be used to reduce the workload of CSS modification. Let's look at an example:

In the above example, I only wrote the color in color and used the currentColor attribute in border and box-shadow. We can see that the color values of these two attributes are set to the value set in color. When we need to use the same color, it is better to use currentColor for later modification.

However, currentColor is newly added in CSS3 and cannot be identified in earlier browsers. So is it impossible to use it in the old version of the browser? There are still some special cases. Let's take a look at the following:

As you can see, I only wrote the color in the color above, and the value of border is1px solid, Box-shadow is the same, and the color value is not included, but it is still represented as the currentColor value. This is because the border color and shadow color are the text color of the current box by default. border is compatible with each other and supports ie6.

Of course, border and box-shadow are special cases. Not all attributes that need to be filled in the color value will inherit the text value by default.

Which of the following elements will get or inherit the color value of the element:

CurrentColor compatibility

Rgb () and rgba ()

Color indicates the model.

Rgb () indicates the red-green-blue (RGB) mode. rgba () has one more a, indicating its transparency. The value ranges from 0 to 1.

The color model of rgb is usually represented by a cube:

We know that we usually use hexadecimal notation # RRGGBB if we do not use the abbreviation,

In # RRGGBB, RR indicates the red depth, GG indicates the green depth, and BB indicates the blue depth. The value ranges from 00 to FF. The larger the value, the deeper the color.

If the format is rgb (RR, GG, BB), the RR value ranges from 0 ~ 255 or percentage, 255 is equivalent to 100%, and F or FF in hexadecimal notation.

If you understand the meaning of rgb (), it is easy to remember the commonly used color values. For example, the RR mentioned above indicates the red depth, so you can understand the memory.#FF0000So easy if it is red.#00FF00Green,#0000FFIt indicates blue.

Remember the color superposition principle:

We can easily remember,#FF00FFRed-Blue superposition indicates purple,#FFFF00Red-Green superposition indicates yellow,#00FFFFBlue-green superposition indicates blue.

Hsl () and hsla ()

In addition to rgb notation, colors can also be represented by hsl. Hsl () is defined as Hue-saturation-lightness. hsla () has one more a, indicating its transparency. The value is 0-1 ..

Hsl is more intuitive than rgb: You can estimate the color you want and then fine-tune it. It also makes it easier to create a set of commensurate colors.

The hsl color model is usually represented by a cylinder:

• The color phase (H) is the basic attribute of the color, which is commonly referred to as the color name, such as red and yellow.
• Saturation (S) refers to the purity of the color. The higher the color, the more pure it is. The lower it is, the more gray it is. The value 0-100% is used.
• Brightness (V), brightness (L), 0-100%.

In fact, for our front end, it is more convenient to use hsl to represent the color.

Taking a button as an example, we use hsl color notation to represent the background color value in the normal state of the button. We hope that the background color will be darker during hover, while the background color will be brighter when active. If the rgb representation is used, we need three completely different colors. In hsl notation, we only need to change the l (Light, brightness) value. Take a look at the example shown above:

Herebackground:hsl(200, 60%, 60%)During hover and active, I only changed the third value of the hsl color value to achieve our desired effect.

Conversion from rgb to hsl

There is a small tips that some people may not know. in the development stage, we only have one rgb value, but we want to convert it to an hsl value. It is very convenient to use the chrome developer tool. For example, we only need to select the color value we want to convert, and press and hold on the left of the keyboardshift, Click the color box to convert:

This article ends with a basic understanding. If you have any questions or suggestions, you can have a lot of discussions, original articles, and only a few articles. If there are any mistakes in this article, please let us know.

If this article is helpful to you, click here for recommendations. It is not easy to write articles.