Pro HTML5 and CSS3 Design Patterns

CHAPTER 20 ■ ALERTS

Graphical Alert

HTML

<h1>Graphical Alert</h1>

<p>Text above the alert.</p>

<div class="alert tip">

<h3><em>Tip</em><span></span></h3>

<p>The Graphical Alert design pattern combines the Left Marginal design pattern

and the Text Replacement design pattern to display a graphic

on top of the heading.</p></div>

<p>Text below the alert.</p>

CSS

*.alert { position:relative; margin:20px 0 20px 120px; }

*.alert h3 { margin:10px 0; font-weight:bold; font-size:1.3em;

text-transform:uppercase; }

*.alert p { margin:10px 0; }

*.alert.tip p { color:green; border:4px ridge green; padding:20px; }

*.alert.tip h3 { position:absolute; left:-100px; top:-15px;

width:71px; height:117px; padding:0; overflow:hidden; }

*.alert.tip h3 em { position:absolute; left:20px; top:25px; }

*.alert.tip span { position:absolute; left:0; top:0; margin:0;

width:71px; height:117px; background:url("tip.jpg") no-repeat; }