4 CSS-etenemispalkkia, joita voit käyttää verkkosivustollasi

body {
fontti: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
väri: #404040;
tausta: #2a2a2a;
}

.container {
marginaali: 60px auto;
leveys: 400px;
tekstin tasaus: keskellä;
}

.container.edistystä {
marginaali: 0 auto;
leveys: 400px;
}

.edistystä {
täyte: 4px;
tausta: rgba(0, 0, 0, 0.25);
reunan säde: 6px;
-webkit-box-shadow: upotettu 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
laatikko-varjo: upotettu 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
}

.edistymispalkki {
korkeus: 16px;
reunan säde: 4px;
taustakuva: -webkit-lineaarinen-gradientti(alkuun, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
taustakuva: -moz-lineaarinen gradientti(alkuun, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
taustakuva: -o-lineaarinen gradientti(alkuun, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
taustakuva: lineaarinen gradientti(kohtaanpohja, rgba(255, 255, 255, 0

.3), rgba(255, 255, 255, 0.05));
-webkit-siirtymä: 0.4slineaarinen;
-moz-siirtymä: 0.4slineaarinen;
-o-siirtymä: 0.4slineaarinen;
siirtyminen: 0.4slineaarinen;
-webkit-transition-property: leveys, taustaväri;
-moz-transition-property: leveys, taustaväri;
-o-siirtymäominaisuus: leveys, taustaväri;
siirtymäominaisuus: leveys, taustaväri;
-webkit-box-shadow: 0 0 1px 1pxrgba(0, 0, 0, 0.25), upotettu 0 1pxrgba(255, 255, 255, 0.1);
laatikko-varjo: 0 0 1px 1pxrgba(0, 0, 0, 0.25), upotettu 0 1pxrgba(255, 255, 255, 0.1);
}

#viisi:tarkistettu ~ .edistystä > .edistymispalkki {
leveys: 5 %;
taustaväri: #f63a0f;
}

#kaksikymmentäviisi:tarkistettu ~ .edistystä > .edistymispalkki {
leveys: 25 %;
taustaväri: #f27011;
}

#viisikymmentä:tarkistettu ~ .edistystä > .edistymispalkki {
leveys: 50 %;
taustaväri: #f2b01e;
}

#seitsemänkymmentäviisi:tarkistettu ~ .edistystä > .edistymispalkki {
leveys: 75 %;
taustaväri: #f2d31b;
}

#sata:tarkistettu ~ .edistystä > .edistymispalkki {
leveys: 100 %;
taustaväri: #86e01e;
}

.radio {
näyttö: ei mitään;
}

.label {
näyttö: inline-block;
marginaali: 0 5px 20px;
täyte: 3px 8px;
väri: #aaa;
tekstivarjo: 0 1px musta;
reunan säde: 3px;
kohdistin: osoitin;
}