Kayıtlar
Herkese yeniden merhabalar,
Artık gelişen Web 2.0 Teknolojisi ile web alemi yeni ve farklı görünümlü web sitelerine ev sahipliği yapmaya başladı.
CSS Teknolojileri de bu yeni akımın vaz geçilmez bir parçası oldu.
Bugün sizlerle artık çoğu sitede karşımıza çıkan Yükleniyor (Loading) imajlarıyla sitelerin açılmasındaki zevksiz bekleyişi bir nebze olsun azaltan yapıyı AJAX kullanmadan nasıl yaparız bunu anlatacağım.
Örneğin web sitemizde bulunan resim galerisinde bulunan resimlerin yüklenmeleri esnasında meydana gelecek beklemeleri daha görsel hale getirebilmek için yazacağımız ufak still kodlarıyla bu işe başlayabiliriz..resim{
background-color: #FFFFFF;
background-image: url(loader.gif);
background-repeat: no-repeat;
background-position: center center;
}
şeklinde yazacağımız ufak CSS kodlarını ister bir CSS sayfasının içerisine, istersek de sayfamızın baş tarafında bulunan <head></head> etiketleri arasına oluşturacağımız <style></style> etiketleri arasına yazabiliriz.
Şimdi ise <img class="resim" src="resim.jpg" alt="Resim1" width="400" height="300" />
şeklinde <img> nesnemize resim isimli sitil class'ımızı referans gösteriyoruz.
Daha sonra sayfamızı kaydedip ve test edebiliriz.
Unutmadan sitilimiz içerisinde bulunan background-image: url(loader.gif); satırda loader.gif yerine yükleniyor resmimizin yolunu düzeltmeliyiz.
Zevkimize göre online olarak loader.gif ler oluşturmak için buraya bakabilirsiniz.
Çalışan örnek bir uygulama için ise okulumuzun web sitesinde bulunan Resim Galerisi bölümünü ziyaret edebilirsiniz.
|
|
|
|
Arama Motoru
rtyucel.wordpress.com: Mesleki Eğitim BT blogu
Perşembe, Eylül 25, 2008
CSS ile Loading.Gif Yapımı
Gönderen rtyucel zaman: 22:45
Etiketler: loading, script, web tasarımı ve programlama, yükleniyor
Kaydol:
Kayıt Yorumları (Atom)
Sudoku
0 yorum:
Yorum Gönder