Teknik | Engin Polat\'ın Windows 8 , Windows Phone 8 ve C# içerikli programcılık sitesi

Arşiv

Etiketlenen yazılar teknik

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

21 November 2009 Yorum yapılmamış

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ç;

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.