CSS3 प्रगति बार

आज हम एडोब फ्लैश प्लेयर इंस्टॉलर से CSS3 का उपयोग कर ग्रेडिएंट और शैडो का उपयोग करके प्रगति बार को फिर से बनाएंगे।



Habrakat के तहत सभी कोड और एक काम कर रहे उदाहरण के लिए एक कड़ी।


सबसे पहले, एक सरल मार्कअप बनाएं:

<div class="bar_wrap"> <div class="bar" style="width:76%"></div> </div> <div class="captions"> <div class="left">2324k / 3019k</div> <div class="right">76%</div> </div> 

अब शैलियों को लिखते हैं:

 body { background: #4D4D4D; } .bar_wrap { border: 1px solid #1C1C1C; background-color: #313131; -webkit-box-shadow: 0 0 1px #666, inset 0 1px 1px #222; -moz-box-shadow: 0 0 1px #666, inset 0 1px 1px #222; -o-box-shadow: 0 0 1px #666, inset 0 1px 1px #222; box-shadow: 0 0 1px #666, inset 0 1px 1px #222; background-image: -webkit-linear-gradient(#323232, #2E2E2E 50%, #323232); background-image: -moz-linear-gradient(#323232, #2E2E2E 50%, #323232); background-image: -o-linear-gradient(#323232, #2E2E2E 50%, #323232); } .bar { height: 30px; max-width: 100%; background-color: #5387BA; border-right: 1px solid #282828; -webkit-box-shadow: inset 0 0 1px #ddd; -moz-box-shadow: inset 0 0 1px #ddd; -o-box-shadow: inset 0 0 1px #ddd; box-shadow: inset 0 0 1px #ddd; background-image: -webkit-linear-gradient(#66A3E2, #5387BA 50%, #4B79AF 51%, #385D87); background-image: -moz-linear-gradient(#66A3E2, #5387BA 50%, #4B79AF 51%, #385D87); background-image: -o-linear-gradient(#66A3E2, #5387BA 50%, #4B79AF 51%, #385D87); } .captions { color: #FDFDFD; padding: 5px 2px 0; font: 11px/14px sans-serif; text-shadow: 0 1px 0 #000; } .left { float: left; } .right { float: right; } 

नतीजतन, हम प्राप्त करते हैं:

हां, यह लेख की शुरुआत से स्क्रीनशॉट नहीं है, यह फ़ायरफ़ॉक्स 7 में प्रदर्शित परिणाम है!
इसके अलावा सफारी 5.1, ओपेरा 11.52 और क्रोम 15 में परीक्षण किया गया।

पुराने ब्राउज़र में भी अच्छा लगता है


एक काम करने वाला उदाहरण यहां पाया जा सकता है।

UPD: मैंने उदाहरण के लिए मसाले को जोड़ने के लिए होवर एनीमेशन जोड़ा।
जावास्क्रिप्ट एनीमेशन के बारे में अच्छी तरह से यहाँ लिखा गया है , मैं इसे दोहराना नहीं चाहता।