CSS3 Box Shadows
One of the CSS3 features that has been implemented in Firefox 3.5+ is the -moz-box-shadow effect.
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
Other browsers
This will also work in Safari if you change -moz to -webkit
It will not work yet in Opera or Internet Explorer. So for those of you looking at this page with either of those browsers the image below shows what everyone else can see:
CSS
The box-shadow takes the following parameters:
- horizontal length of the shadow
- vertical length of the shadow
- the blur radius of the shadow
- the spread radius of the shadow
- the colour of the shadow
There are a number of effects that 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; |
.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;
}
.shbox-blur {
-moz-box-shadow: 3px 3px 5px gray;
}
.shbox-spread {
-moz-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;
}
.shbox-negative {
-moz-box-shadow: 0 5px 5px -3px black;
}
.shbox-inset {
-moz-box-shadow: inset 1px 1px 10px #888;
}
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
page_revision: 72, last_edited: 1280001070|%e %b %Y, %H:%M %Z (%O ago)
