Chenare cu mesaje (CSS)

Lucrand la cate un script, la un moment dat aveam nevoie de un chenar in care sa afisez o eroare sau sa atentionez user-ul ca urmeaza o sectiune importanta ce trebuie tratata ca atare. De inceput ma multumeam cu un div simplu unde eroarea sau informatia era scrisa boldat si cu rosu. Totusi am vazut pe multe website-uri chenare frumos colorate, si mi-am zis ca e cazul sa folosesc si eu asa ceva.

style.css

body {
	font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
	font-size: 12px; 
	color: #678197;
	width: 600px; 
	margin: 20px auto;
}

div#eroare, 
div#verificat, 
div#atentie, 
div#informatii {
	margin-bottom: 15px;
	padding: 10px 15px 10px 60px; 
	border-bottom: 2px solid #FFFFFF; 
	border-top: 2px solid #FFFFFF;
}

div#eroare {
	background: url(ICON-EROARE) 25px center no-repeat; 
	background-color: #FBE3E4;
	border-color: #E0011B; 
	color: #444444;
}

div#eroare a {
	color: #D12F19;
}

div#verificat {
	background: url(ICON-VERIFICARE) 25px center no-repeat; 
	background-color: #E9FFDD;
	border-color: #72C868; 
	color: #444444;
}

div#verificat a {
	color: #529214;
}

div#atentie {
	background: url(ICON-ATENTIE) 25px center no-repeat; 
	background-color: #FFF6BF;
	border-color: #FFD324; 
	color: #444444;
}

div#atentie a {
	color: #817134;
}

div#informatii {
	background: url(ICON-INFORMATII) 25px center no-repeat; 
	background-color: #E2ECEE;
	border-color: #9DDAE6; 
	color: #444444;
}

div#informatii a {
	color: #2D7BA2;
}

<div id="eroare">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="#">Ut enim ad minim veniam</a>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

<div id="verificat">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="#">Ut enim ad minim veniam</a>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

<div id="atentie">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="#">Ut enim ad minim veniam</a>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

<div id="informatii">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="#">Ut enim ad minim veniam</a>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

Cele 4 iconuri se pot descarca usor dintr-un pack cu iconuri, e plin internetul de ele.

Intrebari?