CSS

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

11 yorum Beğen Paylaş CSS ile basit bir ilerleme durum çubuğu yapımı


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

14 Ocak 2007, 18.34 tarihinde yayınlanmış
Bu yazı 11 adet yorum almıştır ve bunların 11 ile 1 arası görüntülenmektedir. Yorumları RSS ile takip edebilirsiniz.
1 2
Tutkun
| 05 Aralık 2009 , 00:00
#11

“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. 8-O

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. :lol:

| 21 Aralık 2008 , 21:57
#10

@fuducuk; Hareket edebilmesi ancak javascript ile ;)

| 19 Aralık 2008 , 23:54
#9

Yalnız nasıl çalışacak bunlar, yani % güncellemeyi nasıl yapacak, onu anlamadım? Şu anki hali statik duruyor… :smile:

| 08 Kasım 2008 , 01:17
#8

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. :evil:

| 07 Kasım 2008 , 22:38
#7

Haklısındır Kadir ama inan o konuda benim de bir bilgim yok :(

| 07 Kasım 2008 , 10:22
#6

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.

| 26 Mart 2007 , 11:50
#5

Tam da sardalya‘yı periyodik bakıma aldığım zamana denk geldi.

Bunu da yapılacaklar listesine ekliyorum ;)

| 25 Mart 2007 , 17:58
#4

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

| 15 Ocak 2007 , 17:38
#3

buda işime yarayacak :)

teşekkürler..

Gfx
| 14 Ocak 2007 , 20:07
#2
1 2
© 2005 - 2010 Tüm hakları dmRy.net'e aittir.
Kullanım şartları yerine getirilmeden hiçbir şekilde kopyala-yapıştır yapılamaz, yazılar ve bilgiler kullanılamaz.
Dmry.net Vital Teknoloji tarafından desteklenmektedir
yukarı dön