Shulou(Shulou.com)06/03 Report--

This article mainly introduces the example analysis of the CSS color system, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

First, use a picture to get a visual sense of what is covered by CSS colors.

The following text content will probably be carried out in this order, and the content is very basic and can be selectively skipped to the corresponding content to read.

Color keyword

Well, the color keyword is easy to understand. It represents a specific color value, and it is not case sensitive. For example, color:red 's red is a color keyword.

Before CSS3, CSS Standard 2, contained a total of 17 basic colors, namely:

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

It is worth noting that unknown keywords invalidate the CSS property.

The purpose of the test test3 here is to show that when the color keyword passed in is incorrect, the CSS property will be invalid instead of using the current currentColor instead. CurrentColor will be explained below.

Which properties can set the color

All the places where color values can be used can be replaced by color keywords, so where can color values be used in CSS?

The color of the text color:red

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

The border border-color:red of the element

Box shadow or text shadow of the element box-shadow:0 0 0 1px red | text-shadow:5px 5px 5px red

Used in some filters filter: drop-shadow (16px 16px 20px red)

The color of the horizontal line

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

The alt text of the That is, when the image cannot be displayed, the text that appears instead of the image inherits this color value.

Dots of ul list items

Some of the more common ones will not give examples.

The dots of the alt text and ul list items of the

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

The dots of the alt text and ul list items inherit the attributes of the current element currentColor.

For the form control, there is no good way to change the color directly, if you know, please do not hesitate to let me know.

Transparent

Transparent literally means transparent. 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 an abbreviation for rgba.

It is worth noting that:

Before CSS3, the transparent keyword was not a real color and could only be used in background-color and border-color to represent a transparent color. In browsers that support CSS3, it is redefined as a real color, and transparent can be used wherever a color value is needed, such as the color attribute.

So what is the use of this transparency value? Briefly cite some examples:

Transparent is used for border to draw triangles

This is one of the most common uses of transparent to draw triangles.

Combined with figures 1 and 2 above, we can see that using a div with a height and width of 0, we can set its border. When the border color of any three sides is transparent, we can get a triangle with any orientation.

As mentioned above, because transparent can be used in border and background in low-version browsers (IE78), this method is compatible and can be used in many scenarios.

Transparent is used for border to increase click hotspots.

Buttons are a very important part of our web design, and the design of buttons is also closely related to the user experience. There is no doubt that making it easier for users to click on the button can increase the user experience, especially on the mobile side, the button is usually very small, but sometimes due to the design limitations, we can not directly change the height and width of the button element. So is there any way to increase his click hotspot without changing the original size of the button at this time?

Here, transparent border can be easily implemented for us (as I wrote in a previous article, it can also be achieved with pseudo elements), and with a layer of transparent border:20px solid transparent, we can write:

Try to put the cursor close to the Btn, you will find that the mouse interactive response event hover has been triggered before the colored area is reached, which can be used to expand the clickable area of the button on the mobile side without changing the shape of the button itself. Like this:

Mm-hmm, here we use border to expand the mouse click area, but the real situation is that sometimes our buttons have to use border, and border can only be set to one weight (multiple border can not be set like box-shadow and gradient). At this time, if you still need to use this method, you can use inner shadow box-shadow to simulate a layer of border, like this:

Transparent is used for background to draw background images.

Transparent is used in background and can usually produce a variety of background images. Here is a simple example of using transparent gradients to achieve a chamfer graph:

The change from transparent color to solid color is realized by linear gradient linear-gradient, and four shapes of 1/4 size (background-size: 50%) are combined together to produce a chamfered figure.

Using the combination of transparent and gradient can also generate a variety of wonderful graphics, you can take a look at the following:

Transparent is used for text color

With box-shadow, you can use transparent on the text to create a text glowing effect. Try the text under the mouse hover:

As a matter of fact, transparent still has many functions, so much for the time being, welcome to continue the discussion.

CurrentColor

Many people don't know that there is such a thing as currentColor. Like transparent, it is a keyword that, as its name implies, represents the current color. It comes from its own attribute or inherits from its parent attribute.

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

How exactly can it be used? according to our principle of writing CSS DRY (Don't Repeat Yourself), using this keyword can reduce the workload of changing CSS. Look at an example:

In the above example, I only wrote colors in color and used the currentColor attribute in border and box-shadow. As you can see, the color values of both properties are set to the values set in color, and when we need to use this same color representation, it is better to use currentColor to facilitate future changes.

However, currentColor is new to CSS3 and is not recognized in older browsers. So whether it can not be used in the old version of the browser, not necessarily, there are some special cases, take a look at the following:

As you can see, I only wrote the color in color above, and the value of border is also 1px solid,box-shadow. I don't have the color value, but it still shows the value of currentColor. This is because the border color and shadow color are the text colors of the current box by default, where border is very compatible and can be supported to IE6.

Of course, border and box-shadow are special cases. Not all attributes that need to fill in color values will inherit text values by default if they are not filled in.

So what are the color values that will be obtained or inherited in the element: the text of the element, the outline of the text, the box shadow of the border element, filter:drop-shadow ()

The alt text of the That is, when the image cannot be displayed, the text that appears instead of the image inherits this color value. Small black dots and borders of list items the border color of horizontal lines () in some browsers (such as Chrome). Without a border, the color will not be affected.

Compatibility of currentColor

Rgb () and rgba ()

If the color represents the model, take a brief look at it.

Rgb () represents the red-green-blue (red-green-blue (RGB)) mode of the color, and rgba () has an extra a, indicating its transparency, with a value of 0-1.

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

We know that usually when we use it, if we don't use the abbreviation, we use the hexadecimal symbol # RRGGBB

In # RRGGBB, RR indicates the depth of red, GG represents the depth of green, and BB represents the depth of blue. Values range from 00 to FF, and a higher value indicates a darker color.

If you write rgb (RR,GG,BB), RR has a value of 0,255 or percentage, which is equivalent to 100%, and F or FF in hexadecimal symbols.

If you understand the meaning of rgb (), it is easy to remember the commonly used color values. For example, RR indicates the depth of red, so understanding that # FF0000 represents red is so easy. Similarly, you can get # 00FF00 for green and # 0000FF for blue.

And remember the principle of color superposition:

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

Hsl () and hsla ()

In addition to the rgb representation, colors can also be represented using hsl (). Hsl () is defined as hue-saturation-luminance (Hue-saturation-lightness), and hsla () has an extra a, indicating its transparency, with a value of 0-1.

The advantage of hsl over rgb is that it is more intuitive: you can estimate the color you want and fine-tune it. It is also easier to create a matching set of colors.

The color model of hsl is usually represented by a cylinder:

Hue (H) is the basic attribute of color, which is commonly referred to as the color name, such as red, yellow and so on. Saturation (S) refers to the purity of the color, the higher the color, the purer the color, and the lower the color will gradually turn gray, taking a value of 0-100%. Brightness (V), brightness (L), 0-100%.

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

Take a button as an example, we use the hsl color representation to represent the background color value of the button in the normal state. We want the background color to be darker in hover and lighter in active. If we use the rgb representation, we need three completely different colors, while with the hsl representation, we only need to change the l (that is, Light, luminance) value of the color value in hover and active. Use one of the above examples to take another look:

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

Conversion from rgb to hsl

Here is a small tips that some people may not know. In the development phase, we only have one rgb value, but we want to convert it to hsl value, which can be easily achieved by using chrome developer tools. As shown in the figure below, we just need to select the color value we want to convert, press and hold shift on the left side of the keyboard, and click on the color representation box to convert it:

Thank you for reading this article carefully. I hope the article "sample Analysis of CSS Color system" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.