4 פסי התקדמות CSS שבהם אתה יכול להשתמש באתר שלך

גוף {
גופן: 13px/20px "לוסידה גרנדה", Tahoma, Verdana, sans-serif;
צֶבַע: #404040;
רקע כללי: #2a2a2a;
}

.מְכוֹלָה {
שוליים: 60px אוטומטי;
רוחב: 400 פיקסלים;
יישור טקסט: מרכז;
}

.מְכוֹלָה.התקדמות {
שוליים: 0 אוטומטי;
רוחב: 400 פיקסלים;
}

.התקדמות {
ריפוד: 4 פיקסלים;
רקע כללי: rgba(0, 0, 0, 0.25);
border-radius: 6px;
-webkit-box-shadow: הַבלָעָה 0 1פיקסלים 2פיקסליםrgba(0, 0, 0, 0.25), 0 1פיקסליםrgba(255, 255, 255, 0.08);
צל קופסא: הַבלָעָה 0 1פיקסלים 2פיקסליםrgba(0, 0, 0, 0.25), 0 1פיקסליםrgba(255, 255, 255, 0.08);
}

סרגל התקדמות {
גובה: 16 פיקסלים;
border-radius: 4px;
תמונת רקע: -webkit-linear-gradient(חלק עליון, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
תמונת רקע: -moz-linear-gradient(חלק עליון, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
תמונת רקע: -o-linear-gradient(חלק עליון, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
תמונת רקע: שיפוע ליניארי(לתַחתִית, rgba(255, 255, 255, 0

.3), rgba(255, 255, 255, 0.05));
-webkit-transition: 0.4 שניותליניארי;
-moz-transition: 0.4 שניותליניארי;
-o-מעבר: 0.4 שניותליניארי;
מַעֲבָר: 0.4 שניותליניארי;
-webkit-transition-property: רוחב, צבע רקע;
-moz-transition-property: רוחב, צבע רקע;
-o-transition-property: רוחב, צבע רקע;
מאפיין מעבר: רוחב, צבע רקע;
-webkit-box-shadow: 0 0 1פיקסלים 1פיקסליםrgba(0, 0, 0, 0.25), הַבלָעָה 0 1פיקסליםrgba(255, 255, 255, 0.1);
צל קופסא: 0 0 1פיקסלים 1פיקסליםrgba(0, 0, 0, 0.25), הַבלָעָה 0 1פיקסליםrgba(255, 255, 255, 0.1);
}

#חָמֵשׁ:בָּדוּק ~ .התקדמות > סרגל התקדמות {
רוחב: 5%;
צבע רקע: #f63a0f;
}

#עשרים וחמש:בָּדוּק ~ .התקדמות > סרגל התקדמות {
רוחב: 25%;
צבע רקע: #f27011;
}

#חמישים:בָּדוּק ~ .התקדמות > סרגל התקדמות {
רוחב: 50%;
צבע רקע: #f2b01e;
}

#שבעים וחמש:בָּדוּק ~ .התקדמות > סרגל התקדמות {
רוחב: 75%;
צבע רקע: #f2d31b;
}

#מאה:בָּדוּק ~ .התקדמות > סרגל התקדמות {
רוחב: 100%;
צבע רקע: #86e01e;
}

.רָדִיוֹ {
אל תציג דבר;
}

.תווית {
תצוגה: בלוק מוטבע;
שוליים: 0 5px 20px;
ריפוד: 3px 8px;
צֶבַע: #aaa;
text-shadow: 0 1px שחור;
border-radius: 3px;
סמן: מצביע;
}