Boxes with Shadows

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

Tags: boxes css shadows

rating: +12+x

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:

Simple box with shadow



Adding a blur to the shadow



Spreading the shadow round the box




Adding multiple effects




Creating a "negative" shadow



Creating an "inset" shadow

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.

simple shadow -moz-box-shadow: 3px 3px gray;
add a blur -moz-box-shadow: 3px 3px 5px gray;
spread the shadow round the whole box -moz-box-shadow: 0 0 5px 5px aqua;
multiple shadows -moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;
negative shadows -moz-box-shadow: 0 5px 5px -3px black;
inset shadows -moz-box-shadow: inset 1px 1px 10px #888;

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]]


Text inside the div will use the multiple box shadow



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:

boxshadows.png

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:
aleksandr_sm.jpg

Author

RobElliottRobElliott. Please visit his/her userPage.

Rate this solution

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

rating: +12+x
Add a New Comment

Related articles

Comments

Add a New Comment
boxescssshadows
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.