Bu makalede sadece CSS kullanılarak oluşturulmuş bir ilerleme çubuğunun nasıl oluşturulabileceğini anlatmaya çalışacağım. Aslında hile çok basit. İhtiyacımız olanlar 3 element, bir kapsayıcı (container) ve 2 içiçe geçmiş element.
Konsept
Kapsayıcının arkaplanına güzel görünümlü bir resim yerleştirip kapsayıcının sabit yüksekliğini ve genişliğini belirteceğiz. İlk astımız (SPAN) ilerleme çubuğu görevini üstlenecek. İkinci astımızı (EM) ise ilerleme çubuğunun üzerine mutlak (absolute) konumlandıracağız ve onu sola doğru kaydırarak istediğimiz seviyeye çekeceğiz. EM, kapsayıcı ile aynı arkaplana sahip, bu sayede ilerleme çubuğunun bir süre sonra durduğu izlenimini vermiş olacağız.
Biçimlendirme
Kodu mümkün olduğu kadar anlamlı tutabilmek için bazı değerlerde tanımlama listesi (Definition List - DL) kullandım. Tek bir ilerleme çubuğu için istediğiniz elementi kullanabilrsiniz. Ben paragrafları sevdiğim için örneğimde P kullandım.
<dd>
<span><em style="left:100px">50%</em></span>
</dd>Sol EM konumlandırması için satıriçi stil kullandım. Her iki değeri de aynı yere bir kerede yazmak daha elverişli.
Animasyon
Peki bu nasıl oluyor? Elbette animasyonlu gif imajı kullanarak. Onları hatırlıyorsunuz deÄŸil mi? SPAN elementinin 200px geniÅŸliÄŸinde arkaplan imajı var ve bu imaj “sıfır”dan 200px’e kadar animasyon içeriyor. Hangi yüzdeyi kullanırsak kullanalım, imaj 200px’in sonuna kadar gidiyor ve sonra duruyor. Durma efekti ise daha önce bahsettiÄŸim EM ile yapılıyor.
EM Konumlandırması
ÖrneÄŸimde 200px geniÅŸliÄŸinde ilerleme çubuÄŸu kullandım. EM elementinin geniÅŸliÄŸi de 200px. Buradan her bir yüzdenin 2px geniÅŸliÄŸinde olduÄŸu anlamını çıkarmışsınızdır. EÄŸer EM’i doÄŸru olarak itelemek istiyorsanız o zaman yüzde deÄŸerinizi 2 ile çarpmanız gerek. ÖrneÄŸin %50′nin anlamı 100px geniÅŸliÄŸinde, %24′ün anlamı 48px geniÅŸliÄŸinde, %75′in anlamı 150px geniÅŸliÄŸinde olacak… Buradan ne demek istediÄŸimi anlamışsınızdır.
Kaynak: CSS Globe
