EFFECTS - CSS: Professional Techniques for Modern Layout - page 197

img.flake1 { background-image : url(flake1.png) center no-repeat ;}
img.flake2 { background-image : url(flake2.png) center no-repeat ;}
img.flake3 { background-image : url(flake3.png) center no-repeat ;}

< img src="flake-a.png" class="flake1" alt="">
< img src="flake-a.png" class="flake2" alt="">
< img src="flake-a.png" class="flake3" alt="">
< img src="flake-b.png" class="flake1" alt="">
< img src="flake-b.png" class="flake2" alt="">
< img src="flake-b.png" class="flake3" alt="">

199

Figure 5-54: Combining snowfl akes.

Padding can be applied to images just as easily. In fact, with a
combination of padding, background color, and a border, you can
make your images look like they have a two-tone border (see Figure
5-55).

Figure 5-55: A two-tone
frame with padding and
borders.

img.twotone { background : #C40 ; padding : 5px ; border : 5px
solid #4C0 ;}