Bir programcının dünyası

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.

İstediğiniz resimleri, aşağıdaki css tekniği ile önyükleyebilirsiniz.

#preloadedImages
{
  width: 0px;
  height: 0px;
  display: inline;
  background-image: url(path/imageA.png);
  background-image: url(path/imageB.png);
  background-image: url(path/imageC.png);
  background-image: url(path/imageD.png);
  background-image: url(path/imageE.png);
  background-image: url();
}