Browser

CSS3: Layering multiple shadows creates lightweight pages

In Ryan Boudreaux's series on CSS3 updates, he illustrates how layering multiple shadows with the box-shadow property, instead of using images, can result in attractive, more lightweight pages.

This installment in the CSS3 series will cover layering multiple shadows within the box-shadow property which can be applied and viewed in most modern browsers today. The amazing feature about this is the ability to utilize CSS3 to specify areas where shadow colors create a palate on web pages without the use of images; this results in more lightweight pages, which load faster. Overall, it's cleaner than having to rely only on background images.

Layering multiple shadows

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.

Also:

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments