- Boxes with Multiple Backgrounds
- Borders Consisting of Images / Borders with Rounded Corners
- Drop Shadows / Box Decoration Breaks
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Drop Shadows
You can assign one or more drop shadows to various elements to help them stand out on a page. This task can be accomplished by using the box-shadow property, which has the following syntax:
box-shadow: none | <shadow> [ , <shadow> ]*
If you specify keyword none (the default value), the element has no drop shadow. Alternatively, you can specify a comma-separated list of <shadow> specifications, which have the following syntax:
<shadow> = inset? && [ <length>{2,4} && <color>? ]
You interpret <shadow>'s components as follows:
- The first length is the shadow's horizontal offset. A positive value draws a shadow that's offset to the right of the box; a negative value draws a shadow that's offset to the left of the box.
- The second length is the vertical offset. A positive value offsets the shadow down and a negative value offsets the shadow up.
- The third length is a blur radius. Negative values are not allowed. If the blur value is zero, the shadow's edge is sharp. Otherwise, the larger the value, the more the shadow's edge is blurred.
- The fourth length is a spread distance. Positive values cause the shadow shape to expand in all directions by the specified radius. Negative values cause the shadow shape to contract. (For inner shadows, expanding the shadow [creating more shadow area] means contracting the shadow's perimeter shape.)
- The color is the shadow's color. When absent, the color that's used is taken from CSS's color property.
- The inset (specified by the inset keyword) changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it).
Listing 7 demonstrates box-shadow.
Listing 7—Demonstrating the box-shadow property
<!DOCTYPE html>
<html>
<head>
<title>
box-shadow demo
</title>
</head>
<body style="padding: 20px">
<div style="box-shadow: 10px 10px 5px 3px #888; width: 50%;">
This shadow has horizontal and vertical offsets of 10 pixels, a blur radius of 5 pixels, a
spread distance of 3 pixels, and a medium-gray color.
</div>
<p>
<br>
<div style="box-shadow: 10px 10px 5px 3px #888 inset; width: 50%;">
This shadow has horizontal and vertical offsets of 10 pixels, a blur radius of 5 pixels, a
spread distance of 3 pixels, a medium-gray color, and is inset.
</div>
<p>
<br>
<div style="background-color: #eee; height: 45px; width: 100px;
text-align: center; box-shadow: -5px -5px 5px #888;">
<span style="color: #888; font-size: 20px; position: relative; top: 10px;">CLOSE</span>
</div>
<p>
<br>
<div style="box-shadow: 5px 5px #888, 10px 10px 5px 3px #ddd inset; width: 50%;
border: solid darkgray 2px; padding: 5px; border-radius: 20px;">
A pair of shadows combined with rounded corners enhance this <code><div></code> element.
</div>
<p>
<br>
<div style="border: solid darkgray 12px;
border-image: url(border.png) 21 round stretch;
-o-border-image: url(border.png) 21 round stretch;
-webkit-border-image: url(border.png) 21 round stretch;
text-align: center; width: 50%;
box-shadow: 5px 5px #888, 10px 10px 5px 3px #ddd inset;
padding: 5px;">
Even image borders can have drop shadows.
</div>
</body>
</html>
Figure 11 shows the resulting drop shadows in the context of the Internet Explorer browser—the image border isn't shown because Internet Explorer 9 doesn't support border-image.
)
Figure 11 Drop shadows can be used with image borders as well as with styled borders
Box Decoration Breaks
Boxes can be broken into multiple pieces during layout. For example, an inline box (e.g., for a <span> element) is broken into line boxes when flowing text from one line to the next line. You can define how these boxes behave by using the box-decoration-break property.
box-decoration-break has the following syntax:
box-decoration-break: slice | clone
When slice (the default value) is chosen, nothing special happens at the break. No drop shadow is drawn at a broken edge; border-radius doesn't apply to its corners, and the image specified by border-image is rendered for the whole box as if it were unbroken. Furthermore, the background is applied to the whole box.
When clone is chosen, each box fragment is independently wrapped with the border and padding. Any border-radius, border-image, and box-shadow values are applied to each fragment independently. Furthermore, the background is drawn independently in each fragment: A no-repeat background image is rendered once in each fragment of the element.
Listing 8 demonstrates box-decoration-break.
Listing 8—Demonstrating the box-decoration-break property
<!DOCTYPE html>
<html>
<head>
<title>
box-decoration-break demo
</title>
<style type="text/css">
.hilite
{
background-color: #ff0;
/* The orange-blurred-lights.jpg image is courtesy of Petr Kratochvil at
publicdomainpictures.net. */
/* www.publicdomainpictures.net/view-image.php?image=17636&picture=orange-blurred-lights */
background-image: url(orange-blurred-lights.jpg);
border: solid darkgray 0.1em;
border-radius: 10em;
color: #fff;
font-family: Courier New;
font-size: +1em;
padding: 0.2em;
}
.hilitebrk
{
background-color: #ff0;
background-image: url(orange-blurred-lights.jpg);
border: solid darkgray 0.1em;
border-radius: 10em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
color: #fff;
font-family: Courier New;
font-size: +1em;
padding: 0.2em;
}
</style>
</head>
<body>
To specify whether box fragments are treated as broken fragments of one continuous box, or whether
each fragment is individually wrapped with the border and padding, use the <span
class="hilite">box-decoration-break</span> property.
<p>
To specify whether box fragments are treated as broken fragments of one continuous box, or whether
each fragment is individually wrapped with the border and padding, use the <span
class="hilitebrk">box-decoration-break</span> property.
</body>
</html>
Figure 12 contrasts slice with clone in the context of the Chrome browser.
)
Figure 12 The default slice effect is shown on the top. The clone effect is shown on the bottom
Conclusion
CSS 3 offers many new features for styling web pages. These features are described by various modules. In this article, I introduced you to CSS Backgrounds and Borders Module Level 3's boxes with multiple backgrounds, borders consisting of images, borders with rounded corners, drop shadows, and box decoration breaks features.
To discover more CSS 3 features for styling web pages, check out CSS Multi-column Layout Module and the other modules mentioned in the article's introduction.