[Morning Reading Meeting] Shanghai @瑞心扉雪 "CSS Revealed" Notes
Preface
This note is from Shanghai @瑞心扉雪's notes on Chapter 4 of "CSS Revealed".
The text starts here~
1. One-sided projection
1. The regular box-shadow implementation syntax is not written.
2. Unilateral projection
Using a 4px blur radius for the element means that the projected size will be about 8px larger than the size of the element itself. How to solve this?
The final solution comes from the little-known fourth length parameter of box-shadow. It comes after the blur radius parameter and is called the expansion radius.
This parameter will expand or (when specifying a negative value) reduce the size of the projection according to the value you specify.
For example, an expansion radius of -5px will reduce the width and height of the projection by 10px (that is, 5px on each side). Such as Demo Figure 1.
Sorry, if the expansion radius is set to a negative blur value, the projection will not be visible. Then use the offset to move, or it will form a unilateral projection.
3. Neighboring projection
Tip 1: We should not shrink the projection too small, but just hide the shadow on one side and expose the other side naturally. Therefore, the dilation radius should not be set to the opposite value of the blur radius, but should be half of this opposite value.
Tip 2: Need to specify two offsets, because we want the projection to move in the horizontal and vertical directions at the same time. Their value needs to be greater than or equal to half of the blur radius, because we want to hide the projection within the other two sides.
4. Double-sided projection
Because the expansion radius has the same effect in the four directions (that is, we cannot specify that the projection is enlarged in the horizontal direction and reduced in the vertical direction). The only way is to use two projections (one on each side). Achieve their goals. Then basically use the technique in "one-side projection" twice.
2. Irregular projection
1. Box-shadow does not support irregular projection.
(After adding some pseudo-elements or translucent decoration to the element) The specific situation is as follows:
Translucent images, background images, or border-images (such as old-fashioned gold picture frames);
The element has a dotted, dashed or semi-transparent border, but no background (or when the background-clip is not a border-box);
The speech bubble, its small tail is usually generated with pseudo elements;
The chamfered shape we saw in the "Chamfering Effect" section;
Almost all corner chamfering effects, including the examples mentioned in the section "Corner chamfering effects";
Shapes generated by clip-path, such as the diamond image mentioned in the "diamond image" section.
2. Solution (using CSS filters)
For example, the acceptable parameters of the drop-shadow() filter are basically the same as the box-shadow attribute, but it does not include the expansion radius, does not include the inset keyword, and does not support the comma-separated multilayer projection syntax.
For example, box-shadow: 2px 2px 10px rgba(0,0,0,.5); You can write filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));
The biggest advantage of CSS filters: they can degrade smoothly: when the browser does not support it, there will be no problems, but no effect.
If you really need this effect to be displayed in as many browsers as possible, you can attach an SVG filter at the same time to get slightly better browser support.
3. Dyeing effect
1. Use filters
sepia() will add a de-saturation orange-yellow coloring effect to the image, and the hue value of almost all pixels will be converged to 35~40.
If we want the saturation of the main hue to be higher than this, we can use the saturate() filter to increase the saturation of each pixel.
The hue-roatate() filter shifts the hue of each pixel by a specified degree. In order to change the original hue value of 40 to 335, it is necessary to increase about 295 degrees (335-40).
2. Solution based on mixed mode
The "mixing mode" controls the way the colors of the upper element are mixed with the colors of the lower layer.
When using it to achieve a dyeing effect, the blending mode that needs to be used is luminosity.
This luminosity blending mode retains the HSL brightness information of the upper element, and absorbs the hue and saturation information from its lower layer.
To set a blend mode on an element, two properties can come in handy:
mix-blend-mode can set the blend mode for the entire element
background-blend-mode can specify the blending mode separately for each layer of background
There are two options for using this strategy:
The first option: we need to wrap the image in a container and set the background color of the container to the main color we want.
The second option: instead of using a picture element, use a div element-set the background of the first layer of this element to the image to be dyed, and set the background of the second layer to the main color we want.
Finally, the Demo link involved in the article
http://runjs.cn/code/h7z1dee8
http://runjs.cn/code/rwlu3nsx
http://runjs.cn/code/6iynubsr