We train box-shadow

W3C developers made box-shadow a very flexible feature. Due to this, very interesting results can be obtained if this property is used in a non-trivial way. In this article I will write about some of the effects that I managed to get with the help of "shadow technologies".

While I was compiling examples, I suddenly discovered that browsers display them quite differently. As a result, in addition to a simple demonstration of the box-shadow capabilities, there was also a small browser test for CSS 3 support. All examples are provided with CSS code and a picture (the total size of all PNGs is 161 KB). In the article, I did not prescribe the properties with the vendor prefixes -moz- and -webkit-, so as not to impair readability. In the summary page with all the examples, these prefixes are there (I warn you that Opera has a bug with drawing external box-shadow when scrolling).

Clone (loop)

The box-shadow property allows you to create multiple shadows, which can be used in a very peculiar way. Below is a div-element with a kind of plume (in some games, shells describe approximately such “tails”).


')
How did I do? It took just to create several “shadows” with different positioning and color. I recall the linear dimensions of the box-shadow property: the indent on the X axis (the positive value is to the right, the negative is to the left), the indent on the Y axis, the blur radius and the last is the scale.

How does the browsers go? Opera and Firefox had no problems. As for webkit browsers, they seem to like to play whistleblowers. "Shadows" they drew square, revealing the true essence of the circle: the square with the maximum rounding of the corners. This, of course, is interesting, but FAIL. By the way, it is quite remarkable that they did draw the latest “shadow” round (if you don’t see it at all, then it’s time to deal with the scale of your monitor).

#trail { background: #d0d0d0; border: 1px solid #c0c0c0; border-radius: 40px; box-shadow: #d8d8d8 110px -25px 0 -10px, #e0e0e0 210px 15px 0 -15px, #e8e8e8 310px -10px 0 -20px, #f0f0f0 410px 5px 0 -25px, #f4f4f4 510px 0px 0 -30px; height: 75px; margin: 20px; width: 75px; } 

Glow

Any shadow that can be colored bright and blurred can be used for a glow effect. Since the CSS box-shadow allows it, why not use it?



How did I do? I filled the circle (square) with a light red color and started 2 red blurred “shadows”: one inside, the other outside. Thus, I got a glow effect, in which the central part seems brighter. In any case, the stars usually draw.

How does the browsers go? No browser has done it perfectly. For Opera and Firefox (and also for Safari, but not so pronounced) for some reason, a thin light stroke appeared around the element. The higher the gamma of the monitor, the more noticeable it is. In principle, this stroke can be avoided by making the element transparent and leaving only the outer “shadow”. But then there will be no effect of a brighter area in the center. But no. It turns out that the standard prescribes to cut the shadow under the element, so that transparency does not help. Now it’s clear where the edging came from: this anti-aliasing Safari and Chrome made the glow not round enough. Chrome is just a mess.

 #glow { background: #ff8080; border-radius: 40px; box-shadow: inset #ff0000 0 0 40px 10px, #ff0000 0 0 24px 12px; height: 75px; margin: 45px; width: 75px; } 

Multiple border

You may sometimes need to use two or more lines around the element. Outline will give only one extra, and not in all browsers round it out. And the border-style fantasy is limited. In this case, box-shadow will help. This example shows a treadmill.



How did I do? It is necessary to impose several "shadows" in a row with different scales (sizes). For brown tracks, I zoomed in by 3 pixels compared to the previous shadow (or frame). For the white line - one pixel. It must be remembered that the deeper layers must be last in the list, since the order matters).

How does the browsers go? Opera and Firefox rendered almost identical. But Chrome and Safari showed something hypnotic. Here, by the way, you can find the reason for the insufficiently rounded “shadow” in the previous example (glow). It turns out that Webkits do not increase or decrease border-radius for a shadow in proportion to the increase / decrease of the shadow itself. Annoying jamb.

 #multi-border { background: #804020; border: 1px solid #ffffff; border-radius: 40px; box-shadow: /*   */ inset #804020 0 0 0 3px, inset #ffffff 0 0 0 4px, inset #804020 0 0 0 7px, inset #ffffff 0 0 0 8px, /*   */ #804020 0 0 0 3px, #ffffff 0 0 0 4px, #804020 0 0 0 7px, #ffffff 0 0 0 8px, #804020 0 0 0 15px; height: 75px; margin: 35px; width: 150px; } 

Volume effect (bulge)

With the help of box-shadow it is quite possible to make an element quite volumetric. Many people are abusing pseudo-volumetric graphics today, but in this article we are not talking about the good tone design rules.



How did I do? It was necessary to create two internal "shadows": one light, the other dark. Light - with a shift to the right down, dark - to the left up. At the same time, light and dark "shadows" should be created using the translucency of white and black colors. Due to the translucency (if the alpha channels are properly adjusted), the places where the dark and light “shadows” merge acquire a color that is close to the background color. Otherwise, one of the “shadows” will prevail, which will reduce the realism. If in the example the blur of “shadows” is zeroed out, then it will be easier to understand how the code works.

How does the browsers go? We assume that Opera, Firefox and Safari have drawn a volumetric rectangle in the same way. As for Chrome, that is where we find the cause of some of the jambs in the previous examples: internal “shadows” always crawl beyond the borders of the border-radius.

 #embossment { background: #404040; border-radius: 20px; box-shadow: inset rgba(255,255,255,0.2) 8px 8px 18px 5px, inset rgba(0,0,0,0.5) -8px -8px 18px 5px; height: 75px; margin: 20px; width: 150px; } 

Gradient

Insanity grows stronger. Now draw a rainbow gradient using box-shadow. In general, gradients are provided for in a W3C draft , but Opera does not yet support them. So there is a practical benefit in this, oddly enough.



How did I do? First filled the rectangle with a red background. Then alternately imposed the “shadows” of the desired colors (for convenience, first without blurring): yellow, green, blue, blue, purple, red again. Each subsequent color had to be higher in depth and to the right offset so that the previous color was visible. Then applied a blur: the radius should match the length of the color in the gradient. As soon as I saw the result, I remembered that the illumination was going in all directions, and not only on the sides, because of which the upper and lower parts of the entire gradient let through a red background. To get rid of this effect, we had to increase all the “shadows” and then shift them to the right by the same amount in order to compensate for the resizing. To control checked without blur. Is done.

How does the browsers go? Opera and Firefox again showed an identical result. Chrome showed a more saturated color in places with minimal blur of shadows. I do not undertake to say who did the right thing. It seems that the truth lies in the middle. Safari blurred the “shadows” very weakly, so the gradient came out obviously wrong. All browsers, except Chrome, slowed down while scrolling the page to the desired block with a gradient. Safari braked incomparably enchanting.

 #gradient { background: #ff0000; border: 1px solid #000000; box-shadow: inset #FF0000 -150px 0 100px -100px, inset #FF00FF -250px 0 100px -100px, inset #0000FF -350px 0 100px -100px, inset #00FFFF -450px 0 100px -100px, inset #00FF00 -550px 0 100px -100px, inset #FFFF00 -650px 0 100px -100px; height: 200px; margin: 20px; width: 600px; } 

Flame!

And now the apotheosis of freak-coding: fire with box-shadow! He probably killed 2 hours, as he had to be redone all the time. In this example, a burning match is shown, which is parallel to the ground and turned head towards the viewer. It turned out, of course, not too believable. But this is a flame in CSS!



How did I do? No comments, see the code immediately :)

How does the browsers go? Opera and Firefox have minimal differences. In Safari, the “shadows” are again too square, so the flames are wider. Behind the match head is a strange black square. Chrome also made the fire too wide, but in addition it also blurred quite roughly.

 <div id="black-background"> <div id="burning"></div> </div> 

 #black-background {background: #000000;} #burning { background: #402000; border-radius: 40px; box-shadow: /*  */ inset #806040 0 0 10px 2px, /* --  */ #102030 0px 0px 20px 6px, #c8d8e0 0px -10px 17px 4px, #d8e8f0 0px -20px 15px -2px, #e0f0f8 0px -30px 14px -6px, #e8f8ff 0px -40px 12px -9px, #ffffff 0px -50px 10px -12px, #ffffe0 0px -55px 10px -14px, #ffffc0 0px -60px 10px -20px, #ffffa0 0px -62px 10px -22px, #ffff80 0px -64px 10px -24px, /* -  */ #ffff40 0px 0px 15px 4px, #ffff30 0px -10px 13px 6px, #ffff20 0px -20px 12px 8px, #ffff10 0px -30px 11px 6px, #ffff00 0px -40px 10px 4px, #fff000 0px -50px 10px 2px, #ffe000 0px -60px 10px 0px, #ffd000 0px -70px 10px -4px, #ffc000 0px -80px 10px -6px, #ffa000 0px -90px 10px -10px, #ff8000 0px -100px 10px -14px, #ff6000 0px -110px 10px -16px, #ff4000 0px -120px 10px -20px, #ff2000 0px -124px 10px -22px, #ff0000 0px -127px 10px -24px; height: 60px; margin: 125px 35px 30px 35px; width: 60px; } 

UPD: From the kindly provided screenshot from IE9 PP4 , we can say that the new IE is quite good.