Abridged from Ryan Boudreaux's post here
See also another page.
The box-shadow property allows elements to have multiple and unlimited numbers of shadows, which are divided by a comma-separated list. The syntax for the CSS3 box-shadow is written in the form:
box-shadow: Xpx Ypx Bpx Lpx #abc;
Where:
- Xpx = x-axis horizontal offset
- Ypx = y-axis vertical offset
- Bpx = blur effect
- Lpx = spread length
- #abc = color
When more than one shadow is specified, the shadows are layered from front to back in the order in which they are listed, as in the example CSS3 code below, utilizing code prefixes for-moz- and -webkit- followed by the standard element reference box-shadow. The example CSS3 code below shows six shadows specified in the following order: first a purple shadow with an offset to the bottom left and a blur effect of 11px and a spread distance of 5px, second a khaki shadow offset to the top right with a 5px blur, third a coral shadow offset to the bottom right with a 50px blur effect applied, fourth a goldenrod shadow offset to the bottom left with a 5px blur, fifth a turquoise shadow offset to the top left with a blur effect of 50px applied, and sixth a chartreuse shadow with a bottom left offset with a blur effect applied:
.Multiple_Shadow {
-moz-box-shadow: 5px 5px 11px 5px purple, 40px -30px 5px khaki, 40px 30px 50px coral, -40px 30px 5px goldenrod, -40px -30px 60px turquoise, -70px 50px 50px chartreuse;
-webkit-box-shadow: 5px 5px 11px 5px purple, 40px -30px 5px khaki, 40px 30px 50px coral, -40px 30px 5px goldenrod, -40px -30px 50px turquoise, -70px 50px 50px chartreuse;
box-shadow: 5px 5px 11px 5px purple, 40px -30px 5px khaki, 40px 30px 50px coral, -40px 30px 5px goldenrod, -40px -30px 50px turquoise, -70px 60px 50px chartreuse;
width:500px;
padding: 10px 10px;
margin:120px;
}
Here, it is classified for the following HTML5 section:
<section class="Multiple_Shadow">
<p><strong>Multiple Shadow Example</strong> <br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui.</p>
</section>Figure A shows the result displayed in Firefox 7.0:
Figure A
Next, more fun with shadow layering in this example, utilizing just four layered colors within the CSS3 box-shadow styling element using similar HTML:
.Multiple_Shadow2 {
-moz-box-shadow: -20px -10px 11px 15px purple, -50px -40px 5px 10px goldenrod, 20px 10px 11px 15px blue, 50px 40px 5px 10px orange;
-webkit-box-shadow: -20px -10px 11px 15px purple, -50px -40px 5px 10px goldenrod, 20px 10px 11px 15px blue, 50px 40px 5px 10px orange;
box-shadow: -20px -10px 11px 15px purple, -50px -40px 5px 10px goldenrod, 20px 10px 11px 15px blue, 50px 40px 5px 10px orange;
width:500px;
height: 600px;
padding: 5px 5px;
margin:120px;
}This results in Figure B as displayed in Firefox 7.0:
Figure B
In future CSS3 segments, I will review 3D text, text-shadow, transitioning properties, and other styling options that can be implemented in most modern browsers today.
