"CSS Advanced" CSS Color system detailed

Speaking of CSS color, compared to everyone is not unfamiliar, this is my personal CSS color system of a systematic summary and learning, share to everyone.

First, use a graph to intuitively feel what the CSS color relates to what is probably covered.

The following text will probably be in this order, the content is very basic, you can selectively jump to the appropriate content to read.

color Key Words

Well, the color keyword is well understood. It represents a specific color value, and it is not case-sensitive. For example color:red , red is a color keyword.

Before CSS3, which is the CSS standard 2, altogether contains 17 basic colors, namely:

And to the CSS3, the color keyword has been greatly expanded to reach 147. The following are just a few of the listed parts:

Full CSS3 color keyword stamp I view

It is important to note that the Unknown keyword makes the CSS property invalid.

Here the test test3 is to illustrate that when the incoming color keyword is wrong, the CSS property will be invalid instead of using the current currentColor override. currentColorwill be described below.

which properties can set the color

All can use the color value place, can use the color keyword substitution, then in the CSS, where can use the color value?

• The color of the textcolor:red

• The background color of the element background-color:red (contains various gradients)

• The border of the elementborder-color:red

• Element's box shadow or text Shadow box-shadow:0 0 0 1px red |text-shadow:5px 5px 5px red

• Used in some filtersfilter: drop-shadow(16px 16px 20px red)

• The color of the horizontal line

Some properties that cannot be set directly, but can be obtained or inherited from the current element CurrentColor:

• The alt text. That is, when an image cannot be displayed, the text that appears in place of the image inherits the color value.

• The dot of the UL list item

Some of the more common are not examples, say , alt text and UL list items dot.

After testing, the color value can be expressed by setting its border color value.

The alt text and the dot of the UL list item inherit the properties of the current element CurrentColor.

For the form control <input type="radio"> <input type="checkbox"> , there is no good way to change the color directly, if you have to know the need to enlighten.

Transparent

The literal meaning of transparent is transparency. It is used to represent a completely transparent color, that is, the color will look like a background color.

It can also be understood as rgba(0,0,0,0) the shorthand for it.

It is worth noting that:

• Before CSS3, the transparent keyword is not a true color and can only be background-color used border-color in and, representing a transparent color. In a browser that supports CSS3, it is redefined as a real color, and transparent can be used anywhere a color value is needed, like the color property.

So what's the use of this transparent value? Simply list some examples:

transparent for border, drawing triangles

This is one of the most common usages of transparent, which is used to draw triangles.

Combined with Figure 1, Figure 2, you can see the use of a div aspect 0, set its border, when any three-side border color is transparent, you can get any direction of a triangle.

As mentioned above, because transparent in the low-version browser (IE78) can be used in border, background, so this method is good compatibility, can be used in many scenarios.

transparent for border, for increased click-to-hot zones

button is a very important part of our web design, and the design of the button is also closely related to the user experience. Making it easier for users to click to the button will undoubtedly be a good way to increase the user experience, especially on the mobile side, the buttons are usually small, but sometimes due to design limitations, we can not directly change the height of the button element width. So what's the way to increase his click-Hot zone without changing the size of the button?

Here, with the help of a transparent border, we can easily do it (as I wrote in a previous article, using pseudo-elements), using a layer of transparency that border:20px solid transparent we could write:

If you try to close the cursor Btn , you will notice that the mouse's interactive response event has been triggered before the color area has been reached hover , making it possible to expand the clickable area of the button on the mobile side without changing the shape of the button itself. Like this:

Well, here we will be border used to enlarge the mouse click area, but the real situation is sometimes our button must use border, and border can only set a weight (can't like box-shadow and 渐变 set multiple border), If you need to use this method at this time, you can use an inner shadow to box-shadow simulate a layer of border, like this:

transparent for background, drawing a background map

Transparent is used for background and can often produce a variety of background images. Here is a simple example of using a transparent gradient to achieve a tangent shape:

By 线性渐变 linear-gradient Combining the graphs of four One-fourth-size () shapes from transparent to solid, background-size: 50% 50% a tangent shape is generated.

Using the transparent with the gradient can also produce a variety of wonderful graphics, can be poked below to see:

• CSS3 's thoughts and ideas

• CSS3 Patterns Gallery

transparent for text color

With Box-shadow, in the text of the use of transparent, can create a text-emitting effect, the mouse hover the following text to try:

Transparent actually has a lot of role, for the moment to say so much, welcome to continue the discussion.

CurrentColor

Many people do not know that there is currentColor this stuff. Like Transparent, it is also a keyword, as the name implies, it represents the current color. It comes from a self-attribute or inherits from its parent property.

You can simply understand the color of the text that is inherited or set for the current CSS tag, that is, the value of color.

How it can be used in particular, according to our principles of writing CSS DRY (Don ' t Repeat yourself), using this keyword can be very good to reduce the amount of work to change CSS. Look at an example:

In the example above, I only wrote colors in color, using the CurrentColor attribute in border and Box-shadow. As you can see, the color values of both properties are set to the value set in color, and when we need to use this same color representation, the currentcolor is better and easier to change later.

However, CurrentColor is CSS3 new and is not recognized under the old version of the browser. Then whether in the old version of the browser can not be used, or not, or there are some exceptions, look at the following:

As you can see, I only wrote the color in color, the value of border 1px solid , Box-shadow also, and did not bring a color value, but still behave in order to CurrentColor value. This is because the border color and shadow color default is the text color of the current box, where border compatibility is good and can be supported to IE6.

Of course border and Box-shadow are special cases, not all attributes that need to fill in the color value are not filled in by default to inherit the value of the text.

So what are the elements that will get or inherit the color value of the element?

1. The text content of the element
2. Outline of text
3. The border of the element
4. The box shadow of the element
5. Filter:drop-shadow ()
6. The alt text. That is, when an image cannot be displayed, the text that appears in place of the image inherits the color value.
7. Small black dots and borders for list items
8. The border color of some browsers (such as chrome) horizontal lines ( ). (Without a border, the color will not be affected).

compatibility of CurrentColor

RGB () and Rgba ()

Color represents the model, just a quick look.

RGB () represents the color of the red-green-blue (Red-green-blue (RGB)) mode, RGBA () more than one a, indicating its transparency, with a value of 0-1.

The RGB color model is usually represented by a cube:

We know that usually when we use the hexadecimal notation #RRGGBB, without using abbreviations,

In the #RRGGBB, the RR represents a red shade, GG represents a green shade, and BB represents the shades of blue. The value is from 00-FF, the larger the value, the darker the color.

If you use RGB (RR,GG,BB) notation, RR takes a value of 0~255 or percent, 255 is equivalent to 100%, and the hexadecimal symbol F or FF.

Understand the meaning of the RGB (), remember that the commonly used color values are actually very easy, like the above-mentioned RR represents the red shades, then the understanding of memory #FF0000 expressed as red so easy, the same can be #00FF00 represented by green, #0000FF Blue.

Then remember the superposition principle of color:

We can easily remember that the #FF00FF red and blue overlay represents purple, the #FFFF00 red and green overlay represents yellow, and the #00FFFF blue-green overlay represents cyan.

HSL () and Hsla ()

In addition to RGB notation, colors can also be represented using HSL (). HSL () is defined as hue-saturation-lightness (hue-saturation-lightness), Hsla () more than one A, which represents its transparency, with a value of 0-1.

The advantage of HSL compared to RGB is more intuitive: You can estimate the color you want and then fine-tune it. It is also easier to create a matching set of colors.

The HSL color model is usually represented by a cylinder:

• Hue (H) is the basic attribute of color, which is the name of the color, such as red, yellow, etc.
• Saturation (S) refers to the purity of the color, the higher the color purer, the lower is gradually gray, take 0-100% value.
• Lightness (V), Brightness (L), take 0-100%.

In fact, for our front-end, it is more convenient to use HSL to represent colors.

Taking a button as an example, we use the HSL color notation to represent the background color value of the button's normal state, and we want the background color to be darker when hover, while active is lit a bit. In the case of RGB notation, we need 3 completely different colors, and with HSL notation, we only need to change the value of the L (that is, light, brightness) of the color values at the time of hover and active. Use one of the examples shown above to see:

Here background:hsl(200, 60%, 60%) at hover and active, I changed only the third value of the HSL color value to achieve the effect we wanted.

RGB to HSL conversion

Here's a little tip. Some people may not know that we have only one RGB value in the development phase, but want to convert to HSL value, using the Chrome developer tool can be very convenient to do, for example, we just need to select the color values we want to convert, press and hold the keyboard left shift , click on the Color representation box, can be converted:

To this end of this article, compare the basics and hope someone will look. If there are any questions or suggestions, can be a lot of communication, original articles, writing limited, Caishuxueqian, if there is not in the text, million hope to inform.

If this article is helpful to you, please click on the recommendation, write the article is not easy.

"CSS Advanced" CSS Color system detailed