Welcome

Search Center

Official Documentation

Discuss:

Support Forum (Recent)

Other Resources:

Getting Help

Community HowTo's

Code Snippets

Wikidot Applications

Glossary of Terms

Index of Sites

What is Hot

Time in Toruń, Poland

[フレーム]

Users who watch this page:

...

Posted by RobElliott on 30 Jun 2009 17:39, last edited by GoVegan on 09 May 2010 05:33

: boxes css shadows

What we are trying to achieve

Following on from the how-to on boxes and tables with rounded corners, the release this week of Firefox 3.5 has meant that we are now able to have boxes with shadows like this:

How to do this

CSS

The box-shadow has a number of values. You don't need to use all of them. In order they are:

1. horizontal length of the shadow
2. vertical length of the shadow
3. the blur radius of the shadow
4. the spread radius of the shadow
5. the colour of the shadow

By using these values in different ways a number of effects can be implemented.

Note that the inset shadow requires the word inset to be used as the first value.

In your custom CSS add selectors, properties and values. I have called the selectors .shbox- followed by the type of shadow. In the example below I have given each box the same basic values and just changed the shadow.

.shbox-simple, .shbox-blur, .shbox-spread, .shbox-multiple, .shbox-negative, .shbox-inset {
 background: #DDDDDD;
 border: 1px solid #627369;
 text-align: center;
 color: #468259;
 width: 20%;
 margin-left: 5%;
 -moz-border-radius:25px;
}
.shbox-simple {
 -moz-box-shadow: 3px 3px gray;
 -webkit-box-shadow: 3px 3px gray;
}
.shbox-blur {
 -moz-box-shadow: 3px 3px 5px gray;
 -webkit-box-shadow: 3px 3px 5px gray;
}
.shbox-spread {
 -moz-box-shadow: 0 0 5px 5px aqua;
 -webkit-box-shadow: 0 0 5px 5px aqua;
}
.shbox-multiple {
 -moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;
 -webkit-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;
}
.shbox-negative {
 -moz-box-shadow: 0 5px 5px -3px black;
 -webkit-box-shadow: 0 5px 5px -3px black;
}
.shbox-inset {
 -moz-box-shadow: inset 1px 1px 10px #888;
 -webkit-box-shadow: inset 1px 1px 10px #888;
}

Wiki syntax

To use this on your page, just add a div using the relevant selector, for example:

[[div class="shbox-multiple"]]
 text inside the div will use the multiple box shadow
[[/div]]

It would be possible to specify the box shadow values in your div using style =. This is useful for occasional use or where the box will differ from the default you have set in your CSS.

Browser Support

This requires Firefox 3.5+ or Safari 3.0+.

It will not work yet in Opera, Internet Explorer or Chrome. So for those of you looking at this page with either of those browsers the image below shows the effect:

Comment

• These box shadows are a good way of creating interesting-looking buttons, particularly if you combine the box shadow with the rounded corners.
• You do not have to have just text inside the div but can have, for example, a table or an image:

Author

RobElliott RobElliott . Please visit his/her userPage.

Rate this solution

If you think this solution is useful, please increase the rating.

Related articles

Comments