Kimi zaman istatistik grafiklerinden kimi zamanda yüklenme grafiklerinde, ilerleme durum çubukları oluşturabiliyoruz. Bunlar için genelde resim dosyaları kullanmaktayız ya da tablolar. Fakat resim dosyadan olmadan bu işi css ile basit bir şekilde halledebilirsiniz 
Super simple CSS bars başlığında bu yöntem anlatılmış. Oradan örnek alacak olursak yapmamız gerekenler şöyle.
Öncelikle kullanacağımız html kodumuz şunlar.
<div class="progress-container">
<div style="width: 95%"></div>
</div>
Ve css kodları ise şöyle.
div.progress-container {
border: 1px solid #ccc;
width: 100px;
margin: 2px 5px 2px 0;
padding: 1px;
float: left;
background: white;
}
div.progress-container > div {
background-color: #ACE97C;
height: 12px
}
Sonuç olaraksa alttaki gibi grafikler elde ediyoruz
%95
%100
%60
%40, artalan turuncu
Benzer Yazılar
CSS ile resim kullanmadan oval köşeli tablolar
71 tane tab navigasyon menüsü
Favori Simgesiz Site Çiçeksiz Bahçeye Benzer
CSS: Katmandan daha geniş resimlerden oluşan problemler
Tutkun
“Yalnız nasıl çalışacak bunlar, yani % güncellemeyi nasıl yapacak, onu anlamadım? Şu anki hali statik duruyor…”
Yerine sanrımca,
echo ‘
‘ ;
şeklinde de çalıştırabilir. 
Ayrıca geçenlerde bir PHP dosyasına CSS kodlarının yazılıp işletildiğini görmüştüm; wampserver dosyasını incelerken. 
@fuducuk; Hareket edebilmesi ancak javascript ile 
Yalnız nasıl çalışacak bunlar, yani % güncellemeyi nasıl yapacak, onu anlamadım? Şu anki hali statik duruyor… 
Bir araştırma yaptım dediğim gibi IE6 child selectorları kabul etmiyor. Bıktım bu IE6′ dan inan ki. Her şeyi bir yana bırakıp sırf onun için saatlerim geçiyor bazen. 
Haklısındır Kadir ama inan o konuda benim de bir bilgim yok 
Hakancım Merhaba,
#
div.progress-container > div {
#
background-color: #ACE97C;
#
height: 12px
#
}
Yanlış hatırlıyor olabilirim ama yok yok child selectorlar “>” IE6 tarafından desteklenmiyor.
Tam da sardalya‘yı periyodik bakıma aldığım zamana denk geldi.
Bunu da yapılacaklar listesine ekliyorum
Küçükte olsa bu tip uygulamalarda kullanılan gifler gereksiz. Bu şekilde uygulamalar bence çok güzel. 1 saniye fark olması bile bence yeterlidir imaj yerine CSS ile color kullanmak
buda işime yarayacak
teşekkürler..
CSS için en iyi kitap bu:
http://www.amazon.com/CSS-Mast.....40?ie=UTF8
Haber Kategorileri
- 9 Yorum Acemilik bitti
- 293 Yorum Wordpress Sayfa Sayaç Eklentisi 2.0
- 14 Yorum Fiat Punto Evo 2010
- 14 Yorum Fiat Punto Evo 2010
- 14 Yorum Fiat Punto Evo 2010
- 64 Yorum Türkçe SolidWorks Kullanım Kitabı
- 9 Yorum Acemilik bitti
- 24 Okuma Microsoft Windows XP Service Pack 3 (SP3) Tür...
- 23 Okuma Kumsal veya Duvara Yazı Yazmak İsteyenler
- 13 Okuma Bedava web sitesi tema ve şablonları
- 10 Okuma Bedava 3D akvaryum ekran koruyucusu
- 9 Okuma Kadın ve erkeğin neden iki eli var
- 9 Okuma Sevgililer Günü Çılgınları TOP 10
- 9 Okuma Dr. Haydar Dümen Yazıları Okunur
- 877517 defa ADSL Kota 1.1 ile Kota Bilginiz
- 676015 defa Kumsal veya Duvara Yazı Yazmak İsteyenler
- 559017 defa NFS Underground 2 ile En Yüksek Hızı Yapma Ta...
- 419880 defa Need For Speed (nfs) Carbon Şifreleri (Hilele...
- 376466 defa Internet Explorer 7 Türkçe İndir
- 360243 defa 5000 üstü MSN Messenger Görüntü Resimleri
- 357125 defa YouTube, Google Video gibi video sitelerinden...
Kullanım şartları yerine getirilmeden hiçbir şekilde kopyala-yapıştır yapılamaz, yazılar ve bilgiler kullanılamaz.