CSS ile basit bir ilerleme durum çubuğu yapımı

14 Ocak 2007, 18:34 tarihinde yazılmış olup, 2,966 kez okunmuş ve 5 yorum almış

Etiketler:

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 :)

3.08
Yazı ebatı büyüt Yazı ebatı küçült Arkadaşına yolla Bu yazıyı paylaş Yorum yap Yazının geri izleme adresi Yazıyı XML ile takip et


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.

PLAIN TEXT
HTML:
  1. <div class="progress-container">         
  2.     <div style="width: 95%"></div>
  3. </div>

Ve css kodları ise şöyle.

PLAIN TEXT
CSS:
  1. div.progress-container {
  2.   border: 1px solid #ccc;
  3.   width: 100px;
  4.   margin: 2px 5px 2px 0;
  5.   padding: 1px;
  6.   float: left;
  7.   background: white;
  8. }
  9.  
  10. div.progress-container> div {
  11.   background-color: #ACE97C;
  12.   height: 12px
  13. }

Sonuç olaraksa alttaki gibi grafikler elde ediyoruz :)

%95

%100

%60

%40, artalan turuncu

Bunu okuyanlar, alttakileri de okudu

Bu yazılar da ilginizi çekebilir ;)

Wordpress.Org Lisans Kullanım Şartları Dmry.net Hakkında

Kullanım şartları yerine getirilmeden hiçbir şekilde kopyala-yapıştır yapılamaz.
Dmry.net Vital Teknoloji tarafından desteklenmektedir.
eXTReMe Tracker