Box-shadow and drop-shadow to achieve irregular projection example code

When we want to add a shadow to a rectangle or other shape that can be generated with border-radius (see some examples in the "Adaptive Ellipse" section), box-shadow performs perfectly. However, it becomes a bit powerless when the element has some pseudo-elements or semi-transparent decorations added, because border-radius will shamelessly ignore the transparent parts. Such situations include:

• Translucent images, background images, or border-images (such as old-fashioned gold frames);
• The element has a dotted, dashed, or semi-transparent border, but no background (or when background-clip is not border-box);
• Speech bubbles, whose tails are usually generated using pseudo-elements;

If we were to apply box-shadow directly to such elements, we would only get an incomplete projection. Is it possible that we can only give up the projection effect completely? Is there any way to solve this problem?

The Filter Effects specification (http://w3.org/TR/filter-effects) provides a solution to this problem. It introduces a new attribute called filter, which is also borrowed from SVG. Even though CSS filters are basically SVG filters, you don't need to have any knowledge of SVG to use them. Instead, we only need a few functions to easily specify filter effects, such as blur(), grayscale(), and, we need, drop-shadow()! If you like, you can even chain multiple filters together by separating them with spaces, for example:

filter: blur() grayscale() drop-shadow();

The drop-shadow() filter accepts the same parameters as the box-shadow property, but does not include an expansion radius, does not include the inset keyword, and does not support comma-separated multi-layer shadow syntax. For example, the projection above:

box-shadow: 2px 2px 10px rgba(0,0,0,.5);

You can write it like this:

filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5)); 

The best thing about CSS filters is that they degrade gracefully: when a browser doesn’t support them, nothing will happen, they just won’t have any effect. If you really need this effect to work in as many browsers as possible, you can also attach an SVG filter to get slightly better browser support. You can find the corresponding SVG filter version for each filter function in the Filter Effects specification (http://www.w3.org/TR/filter-effects/). You can combine SVG filters with simplified CSS filters and let the cascade decide which line gets applied:

filter: url(drop-shadow.svg#drop-shadow);
filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

Unfortunately, if the SVG filter is stored in a separate file, it can’t be configured freely in the CSS code like a concise and easy-to-use function; if it is inline, it will clutter your code. The parameters need to be hard-coded inside the file, so every time we add a new projection effect, even if it is similar, we need to prepare an extra file, which is obviously unacceptable. Of course, we can also use data URI (which will also save the extra HTTP request), but this method will still increase the file size. In general, this approach is just a fallback solution, so as long as we keep the number of SVG filters under a certain limit, it is acceptable even if their effects are similar.

Another thing to keep in mind is that anything that is not transparent will be shadowed equally, including text (if the background is transparent), as we have just seen. You may wonder, can I cancel the shadow on the text by using text-shadow: none;? In fact, text-shadow is completely unrelated to it, so doing this will not cancel the drop-shadow() effect on the text. Furthermore, if you have already used textshadow to add a drop shadow to the text, the text shadow will be shadowed by the drop-shadow() filter, which essentially adds a drop shadow to the shadow! Take a look at the following code example (please excuse the horrible results, it is just to highlight this weird problem):

color: deeppink;
border: 2px solid;
text-shadow: .1em .2em yellow;
filter: drop-shadow(.05em .05em .1em gray);

You can see its rendering effect, the text in the picture is marked with both textshadow and drop-shadow().

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.