Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Adding drop-shadow effects without images

Thursday, October 31st, 2013 by Servage
 Values: 'horizontal offset' 'vertical offset' 'blur distance' 'spread distance' color inset | none
Default: none
Applies to: all elements
Inherits: no

The value of the box-shadow property should seem familiar after working with text-shadow: specify the horizontal and vertical offset distances, the amount the shadow should blur, and a color. For box shadows, you can also specify a spread amount, which increases (or decreases with negative values) the size of the shadow. By default, the shadow color is the same as the foreground color of the element, but specifying a color overrides it.

-webkit-box-shadow: 6px 6px 5px 10px #666;
-moz-box-shadow: 6px 6px 5px 10px #666;
box-shadow: 6px 6px 5px 10px #666;/* 5px blur, 10px spread */

You can make the shadow render inside the edges of the visible element box by adding the inset keyword to the rule. This makes it look like the element is pressed into the screen.

-webkit-box-shadow: inset 6px 6px 5px #666;
-moz-box-shadow: inset 6px 6px 5px #666;
box-shadow: inset 6px 6px 5px #666;

3 drop shadow

As for text-shadow, you can specify multiple box shadows on an element by providing the values in a comma-separated list. The values that come first get placed on top, and subsequent shadows are placed behind it in the order in which they appear in the list.

The box-shadow property is supported by all current version browsers, with the exception of Opera Mini for mobile. To accommodate recent Webkit browsers (Safari and Mobile Safari, Chrome, and Android) and older versions of Firefox, as of this writing, it is recommended that you include the vendor-prefixed properties as shown in the previous examples. Internet Explorer 9 and higher support the standard property, but IE6 through 8 don’t support it at all. My opinion is that it isn’t the end of the world if users of those old browsers don’t see a nifty little drop shadow. If you must have shadows in old IE versions, you will need to use the proprietary IE filter property.

Box shadows, text shadows, and gradients take a lot of processor power because you are shifting the burden of interpreting and rendering them onto the browser. The more you use, the slower performance will be, and as we all know, performance is everything on the Web. So go easy on them.
References for further reading

Adding drop-shadow effects without images, 4.0 out of 5 based on 3 ratings
Categories: Guides & Tutorials


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.