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;
}
Ş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ç;
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 başlıklar: