CSS tekniği ile uyarı / bilgi mesaj alanı

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.

İlgili diğer makaleler

blog comments powered by Disqus

Engin Polat hakkında

Senior Software Engineer, @Microsoft

Ada ve Ege'nin babası ;)

Kategoriler

İstatistik

Makale Adedi: 484

Creative Commons Lisansı