Blog’umun 200. yazısını beni kırmayarak sevgili Daron Yöndem yazdı. Aslında tek bir yazı yazacaktı, fakat Microsoft‘un Build Konferans‘ına katıldığı için bir yazı serisine dönüştü. Hergün izlenimlerini sizlerle paylaşıyor olacağım. Yazıların orjinallerini Daron Yöndem‘in kendi blog’undan da takip edebilirsiniz. Ayrıca twitter‘dan da takip etmenizi öneririm; @daronyondem

Söz Daron’da… Devamını oku…

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();
}