TransparentThe 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 trianglesThis 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 zonesbutton 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 mapTransparent 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:
transparent for text colorWith 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.
CurrentColorMany 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?
- The text content of the element
- Outline of text
- The border of the element
- The box shadow of the element
- Filter:drop-shadow ()
The alt text. That is, when an image cannot be displayed, the text that appears in place of the image inherits the color value.
- Small black dots and borders for list items
- The border color of some browsers (such as chrome) horizontal lines (
). (Without a border, the color will not be affected).
compatibility of CurrentColorRGB () 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 conversionHere'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