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

h e simplest form of boxpunching is to put one box in the corner of another (see Figure
5-13), and make sure its background matches the surrounding content instead of its parent's.
body { background : #C0FFEE ;}
div.main { background : #BAD ;}
.punch { background : #C0FFEE ; font-size : 500% ;
float : left ; margin : 0 0.1em 0.1em 0 ; padding : 0.1em ;}
< div class="main">
< h1 class="punch">Wow.< / h1>
( …content…)
</ div>
170
Figure 5-13: A boxpunched greeting.
If you want to make things a little more complex, you can set a background for the punch and
use a nice thick border to separate it from the rest of the box, as in Figure 5-14.
body { background : #C0FFEE ;}
div.main { background : #BAD ;}
.punch { background : #987 ; font-size : 500% ;
float : left ; margin : 0 0.1em 0.1em 0 ; padding : 0.1em ;
border : 0.2em solid #C0FFEE ; border-width : 0 0.2em 0.2em 0 ;}
h at's all i ne so long as your main box doesn't have any borders. h e minute you add a
border, as in Figure 5-15, it goes around the punching element, which no longer looks so
punchy.
body { background : #C0FFEE ;}
div.main { background : #BAD ; border : 3px solid black ;}
.punch { background : #C0FFEE ; font-size : 500% ;
float : left ; margin : 0 0.1em 0.1em 0 ; padding : 0.1em ;}