[CSS advanced] box-shadow and filter: detailed descriptions of drop-shadow and their tricks, and boxshadow

[CSS advanced] box-shadow and filter: detailed descriptions of drop-shadow and their tricks, and boxshadow

Box-shadow must be very common in front-end CSS writing. In addition to its conventional usage, box-shadow still has many unknown tricks.

If you like the markdown version, click here.

Box-shadow General Usage

When it comes to box-shadow, the first thing that comes to mind is that it can generate shadows, so it is called shaodow. Let's just look at its syntax:

Basic Property syntax

box-shadowProperty to add one or more shadows to the box.

Box-shadow: h-shadow v-shadow blur spread color inset;

Like thisbox-shadow: 10px 10px 5px #888888;In addition, we need to know that box-shadow is an external shadow and an internal shadow, and inset is added to the attribute.

OK. This article assumes that you have some knowledge about box-shadow. On this basis, let's take a look at other useful functions of box-shadow.

Box-shadow simulates Multiple Borders

Generally, we add borders to many elements.borderBut if multiple borders are requiredborderThe box-shadow can be launched with single-weight restrictions. We can easily use the outer or inner shadows to simulate the border effect.

As you can see, from the inside to the outside, the box-shadow is used here to set the white, black, and gray three-layer border and the outermost layer with Blurred shadows.

Box-shadow has a parameter that sets blur, that is, the fuzzy distance. In the above example, it is the second shadow.0 0 0 10px #333,In the third 0, when the blur value is 0, the shadow itself will not be blurred, so it is easy to simulate the border effect.

In addition, the elements can be set with Multiple shadows, and they have cascade relationships. The most recent set of stack priorities is box-shadow, which are in descending order. This is well understood by the Code.

Of course, it is worth noting that:

• Shadows are not borders, and they do not occupy the actual space or belongbox-sizing. However, you can use the padding or margin (depending on whether the shadow is internal or external) to occupy additional space for simulation.

• The border simulated in the preceding example is located outside the element. It cannot capture mouse events like hovering and clicking. If an event is important, you can add the inset keyword to make the shadow appear inside the element. Note: you may need to add extra padding to expand the space.

Box-shadow simulate translucent Mask Layer

Most of the time, we need to use a mask layer similar to this, and use a translucent mask layer to obscure the background, highlighting some UI components and improving the user experience.

Generally, an additional element is used as the mask layer, which is at least a pseudo element,beforeOrafter.

Without considering the compatibility of earlier versions, you can use box-shadow to simulate the effect of the mask layer.

Here is another example. hover uses the scale-up element to generate a mask for box-shadow and focus on the user's field of view.

Demo-stamp me to see.

Of course, it is worth noting that:

• To use this method, compatibility is inevitable. IE9 +, Firefox 4, Chrome, Opera, and Safari 5.1.1 support the box-shadow attribute.

• Because the size of each browser's view is inconsistent, you may need to set the size of the shadow in order to overwrite the entire page with the shadow generated by box-shadow in all cases.spreadThe setting is large.

• If you really want to try this method, box-shadow belongsPerformance consumption styleDifferent styles have different performance consumption. box-shadow is very performance-consuming in terms of rendering, because it takes too much time to draw code than other styles. Although GPU 3D acceleration is available, it is worth considering when using it. But you need to know that there is no change. Today's poor performance style may be optimized tomorrow, and there are also differences between browsers.

Next, let's talk about what Multiple box-shadow functions can do:

Simple graphics with multiple box-shadow

In essence, box-shadow projects itself to another place. In many cases, we can use box-shadow to copy ourselves!

With this feature, we can use box-shadow to create some simple images. In my single-label graphics Demo, there is such a image:

The cloud layer is used.Multiple box-shaodwGenerated within a pseudo element. Next I will use different colors to intuitively express how to use box-shadow to draw this image:

When the colors of all shadows are the same, they naturally become a cloud:

Of course, if the brain hole is large enough, it is more complicated. Let's take a look at the figure below, which is also completed by a single Tag:

What is more difficult is the circle around the letter e and the irregular corner of the cut-in. Let's see how to use the shadow to make it and use the two boxes-shadow:

Well, of course, you asked me how to use these images. I think it is really not practical. I am personally interested and have fun with it. At the same time, I have learned a lot and I am more impressed with attributes, when encountering many CSS problems, the idea is more open.

For more interesting images, click here-Demo

Multi-box-shadow for Stereoscopic Effect

This method can also be used on text-shadow to realize the stereoscopic effect of text.

With the use of multiple box-shadow and constant offset of 1 px, you can have a very three-dimensional feeling.

Button used:

Used in text:

Multi-box-shadow for Arbitrary Image Conversion

Well, tell the truth ~~ I think this is the most interesting.

What can I do with multiple box-shadow statements. Because of the diversity of box-shadow, that isIt can be used regardless of the number of duplicates.In theory, each pixel of any image can be represented by a box-shadow of 1px * 1px.

To complete this task,canvasA method is provided.CanvasRenderingContext2D.getImageDataYou can obtain the rgba value of each pixel in the image. Therefore, it is feasible to convert the image into an image completely represented by box-shadow.

For this reason, I spent a long time writing such a small plug-in to convert any image into a single div tag represented by box-shadow.

Demo-stamp me to try it out.

If the above points are useful, I think this function is not practical except for seemingly powerful ones. As mentioned above, box-shadow is performance-consuming, because even100px*100pxAfter conversion, there are10000Shadow is devastating in terms of performance and readability, but it is really interesting.

Box-shadow: Let's talk about this first. box-shadow must have some other advantages. Careful users can continue to explore it.

Filter: drop-shadow

In fact, when it comes to box-shadow, we have to mention another CSS 3 attribute that is very similar to it.filter:drop-shadowFilters are CSS filters that provide effects for element rendering, such as blur and color transfer, before an element is rendered. Filters are often used to adjust the rendering of images, backgrounds, and borders.

Of course, here we only talk about filter: drop-shadow.

Filter: drop-shadow is also very fun. I wanted to continue to discuss it for a long time, but I had no choice but to find it.Zhang xinxuThe two articles of the great God have covered all the things I want to talk about. The predecessors have planted trees, and the future generations are enjoying the cold, so I will not show ugliness any more.

Two articles worth reading:

• CSS3 filter: difference between drop-shadow filter and box-shadow filter

• CSS color assignment technology for small icons in PNG format

In addition, css secret (css secret) is also a masterpiecefilter:drop-shadowFor more information, see.

 

I hope this article will be helpful to you, especially in the aspect of thinking about solving the problem.

At the end of this article, if you have any questions or suggestions, you can talk a lot about them and it is not easy to write articles. I hope you can give me some suggestions.

The original article is limited in writing, so it is easy to learn. If there is anything wrong with the article, please let us know.