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?

6 thoughts on “Chenare cu mesaje (CSS)”

  1. dude 🙂 linkul de la “Scriptul in functiune arata asa” este la scala 1:1, ce sa vezi cum arata? e greu sa dai copy/paste la putin css si html si sa le pui intr’un .html si sa vezi cum merge? dar nu prea inteleg la ce te referi cu “cum functioneaza”. Nu te’ai prins de idee? si cum functioneaza?

Leave a Reply

Your email address will not be published. Required fields are marked *