4 CSS-fremdriftslinjer du kan bruke på nettstedet ditt

kropp {
skrift: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
farge: #404040;
bakgrunn: #2a2a2a;
}

.container {
margin: 60px auto;
bredde: 400px;
tekst-align: center;
}

.container.framgang {
margin: 0 auto;
bredde: 400px;
}

.framgang {
polstring: 4px;
bakgrunn: rgba(0, 0, 0, 0.25);
kantradius: 6px;
-webkit-boks-skygge: innfelt 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
boks-skygge: innfelt 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
}

.progress-bar {
høyde: 16px;
border-radius: 4px;
bakgrunnsbilde: -webkit-lineær-gradient(topp, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
bakgrunnsbilde: -moz-lineær-gradient(topp, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
bakgrunnsbilde: -o-lineær-gradient(topp, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
bakgrunnsbilde: lineær gradient(tilbunn, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05

));
-webkit-overgang: 0.4slineær;
-moz-overgang: 0.4slineær;
-o-overgang: 0.4slineær;
overgang: 0.4slineær;
-webkit-transition-property: bredde, bakgrunnsfarge;
-moz-transition-property: bredde, bakgrunnsfarge;
-o-transition-property: bredde, bakgrunnsfarge;
overgangsegenskap: bredde, bakgrunnsfarge;
-webkit-boks-skygge: 0 0 1px 1pxrgba(0, 0, 0, 0.25), innfelt 0 1pxrgba(255, 255, 255, 0.1);
boks-skygge: 0 0 1px 1pxrgba(0, 0, 0, 0.25), innfelt 0 1pxrgba(255, 255, 255, 0.1);
}

#fem:sjekket ~ .framgang > .progress-bar {
bredde: 5 %;
bakgrunnsfarge: #f63a0f;
}

#tjuefem:sjekket ~ .framgang > .progress-bar {
bredde: 25 %;
bakgrunnsfarge: #f27011;
}

#femti:sjekket ~ .framgang > .progress-bar {
bredde: 50 %;
bakgrunnsfarge: #f2b01e;
}

#syttifem:sjekket ~ .framgang > .progress-bar {
bredde: 75 %;
bakgrunnsfarge: #f2d31b;
}

#ett hundre:sjekket ~ .framgang > .progress-bar {
bredde: 100 %;
bakgrunnsfarge: #86e01e;
}

.radio {
display: ingen;
}

.merkelapp {
display: inline-blokk;
margin: 0 5px 20px;
polstring: 3px 8px;
farge: #aaa;
tekst-skygge: 0 1px svart;
border-radius: 3px;
markør: peker;
}