ENHANCING BOXES WITH CSS3 BLING - Practical CSS3: Develop and Design - page 130

FIGURE 4.28 An attractive bling box.

aside article {
.
background: repeating-linear-gradient(45deg, rgba(0,0,0,0.1) 1px,
p rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.1) 3px, rgba(0,0,0,0) 4px,
p rgba(0,0,0,0) 5px);
background-color: rgba(255,255,255,0.4);
border-radius: 4px;
box-shadow: 2px 2px 10px black;
}

FIGURE 4.29 A pleasing alter-
native set of styling provided
for older versions of IE.

The result is a rather nice container with a shadow, rounded corners, and a
textured repeating gradient pattern ( Figure 4.28 ).
To a d d I E s u p p To r t a f t e r yo u' ve p l ace d t h e P I E . ht c fi l e , yo u c a n a d d t h e fo l l To w i n g
two lines, which include a far simpler gradient without an alpha channel that is
still in keeping with the color scheme ( Figure 4.29 ):

-pie-background: linear-gradient(45deg, #6988af, #a6b9cf);
behavior: url(/cmills/arthur/script/PIE.htc);