Yazdığımız web uygulamalarında, uyarı / bilgilendirme mesajı vermeye her zaman ihtiyaç duyarız.

Gelelim, CSS tekniklerini kullanarak, bu mesaj kutularını nasıl yapabileceğimize.

Öncelikle style’larımızı yazdığımız css dosyasına, şu satırları ekleyelim;

.alert { background: #fff6bf url(exclamation.png) 15px 50% no-repeat; text-align: left; padding: 5px 20px 5px 45px; border-top: 2px solid #ffd324; border-bottom: 2px solid #ffd324; } .info { background: #f8fafc url(information.png) 15px 50% no-repeat; text-align: left; padding: 5px 20px 5px 45px; border-top: 2px solid #b5d4fe; border-bottom: 2px solid #b5d4fe; }</pre> Şimdi tek yapmamız gereken, paragraf tagları arasına mesajımızı yazmak ve paragraf tagına ilgili class’ı atamak.

Örnek;

<p class="alert">Uyarı mesajı buraya gelecek.</p>

<p class="info">Bilgilendirme mesajı buraya gelecek.
Birden fazla satır olabilir.</p>

İşte sonuç;

![CSS_Mesaj_Kutulari](/assets/uploads/2009/11/CSS_Mesaj_Kutulari.png "CSS_Mesaj_Kutulari")

Demo sayfasını görmek ve kodları indirmek için tıklayın.

Şu adreste, bu tekniğin uygulandığı, download edilebilir kodları bulabilirsiniz.

Yazının orjinaline ise şu kaynaktan ulaşabilirsiniz.