Box-shadow and Filter:drop-shadow detailed and artifice

Like the markdown version can be poked here.

Box-shadow General Usage

When it comes to Box-shadow, the first thing to think about is that it can generate shadows, so call it Shaodow and simply look at its syntax:

Base attribute Syntax

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

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

In addition to this box-shadow: 10px 10px 5px #888888; , we need to know that Box-shadow is exceptionally shadow and inner shadow, with the inner shadow adding inset to the attribute.

OK, this article has assumed that you have a certain understanding of Box-shadow, on this basis, we look at what other magical box-shadow.

Box-shadow Analog Multi-border

In general, we will add a border to many elements border , but when a multi-border is required, this time, due to border the single-weight limit, Box-shadow will be able to shine. We can easily use an outer shadow or an inner shadow to simulate a border effect.

As you can see, from the inside out, the Box-shadow is used here to set the white, black, gray three-layer border and the outermost shadow with Blur.

Box-shadow has a parameter is set blur, that is, fuzzy distance, in the above example, that is the second shadow of the 0 0 0 10px #333, third 0, when the value of the blur is 0, then the shadow itself is not blurred, it is easy to simulate the effect of the border.

Also, elements can set multiple shadows, and they have cascading relationships, and the most recent cascade precedence from Box-shadow is the highest, decreasing in turn, and this control code is well understood.

Of course, it is worth noting that:

• Shadows are not borders, they do not occupy the actual space, nor do they belong to box-sizing the range. However, you can simulate by occupying additional space by using padding or margins (depending on whether the shadow is internal or external).

• The above example simulates a border that is outside the element. It cannot capture mouse events like hover and click. If the event is important, you can make the shadow appear inside the element by adding the inset keyword. Note that you may need to add extra padding to expand the space.

Box-shadow simulating translucent matte layers

Many times, we need to use a mask layer like this to darken the background with a translucent matte layer, highlighting some UI components to enhance the user experience.

Conventional practice usually uses an extra element, which is used as a mask layer, or at least a pseudo-element, before or after .

Not considering the compatibility of the lower version, in fact, using Box-shadow can also simulate the effect of mask layer.

Here is another example, hover the use of scale amplification elements, Box-shadow generated masks, focusing on the user's focus on the field of vision.

demo– poke at me.

Of course, it is worth noting that:

• Using this approach inevitably requires compatibility, and ie9+, Firefox 4, Chrome, Opera, and Safari 5.1.1 support Box-shadow properties.

• Because each person's browser viewport size is inconsistent, in all cases Box-shadow generated shadows can cover the entire page, you may need to spread set the size of the shadow very large.

• If you really want to try this method, Box-shadow from a performance point 耗性能样式 of view, different styles are different in terms of consumption performance, Box-shadow is very performance-consuming from a rendering perspective, because their drawing code takes too long to execute compared to other styles. Although there is a 3D acceleration of the GPU, it is worth considering when it is used in detail. But you know, there are no immutable things, in today's poor performance style, may be optimized tomorrow, and there are differences between browsers.

Let's talk about what multiple Box-shadow can do:

Simple graphics of multiple Box-shadow

Essentially, Box-shadow is projecting itself to another place, and in many cases we can use Box-shadow to replicate itself!

With this feature, we can use Box-shadow to make some simple graphics, in my single-label graphics Demo, there is a graph:

One of the clouds is the use of 多重box-shaodw a pseudo-element generated within. Below I use different colors, intuitively express how to draw this graph using Box-shadow:

When all shades of color are the same color, it naturally becomes a cloud:

Of course, the brain hole is big enough, more complex is also possible, to see the following figure, is also done by a single label:

One of the more difficult is the circle around the letter e and the irregular angle of the cut-in, see how to make it out of the shadow, using the two box-shadow:

Well, of course, you ask me what these graphs are for. I think the practicality is really not strong, I personally is interested, to get to the fun, but also learned a lot of things, the property itself is more profound impression, encountered a lot of CSS problems, the idea is more open.

More interesting graphics that can be poked here –demo

Multi-Box-shadow realizes three-dimensional

This method can also be used in Text-shadow, can realize the three-dimensional character.

The use of multiple Box-shadow, constantly offset 1px, it can produce a very three-dimensional feeling.

Apply on button:

Use in text:

Multiple Box-shadow for any image conversion

Well, really, I think this is the most interesting.

What else can you do with multiple Box-shadow? Because of the multiplicity of Box-shadow, that is 无论多少重都可以 , then theoretically any picture, each pixel point can be represented by a heavy 1px*1px box-shadow.

To complete this task, canvas just provide a way CanvasRenderingContext2D.getImageData to get the RGBA value of each pixel of the picture, then it is perfectly feasible to convert the image to a picture that is completely represented by Box-shadow.

For this, I daoteng for a long time, wrote such a small plug-in, you can convert any image into a single div tag represented by Box-shadow.

demo– poke me to experience it.

If the above points are still useful, then this function I think in addition to seemingly strong outside really is not practical, above also said, Box-shadow is more cost-effective, because even a 100px*100px graph, after the transformation has a 10000 heavy shadow, whether for performance or readability, It's devastating, but it's fun to tell.

Box-shadow first said these, Box-shadow must also have some other magical, careful people can continue to dig.

Filter:drop-shadow

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

Of course here we only say Filter:drop-shadow.

Filter:drop-shadow is also very fun, I would like to continue the lengthy discussion, but found that 张鑫旭 the great God two articles have put all I want to say, walnuts, posterity, I will no longer caught dead.

Two articles that are well worth reading:

• CSS3 Filter:drop-shadow filter differs from Box-shadow application

• PNG format small icon CSS any color coloring technology

In addition, "CSS SECRET" (CSS Secrets) This masterpiece also filter:drop-shadow has a detailed description, you can go to see.

Box-shadow and Filter:drop-shadow detailed and artifice