Progress bar در CSS
#1
Note 
Progress bar ساده با CSS:

[CSS]
.progress-bar {
width: 300px;
height: 24px;
padding: 4px;
background-color: #191919;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
box-shadow: inset 0 1px 2px #000,0 1px 0 #2b2b2b;
-webkit-box-shadow: inset 0 1px 2px #000,0 1px 0 #2b2b2b;
-moz-box-shadow: inset 0 1px 2px #000,0 1px 0 #2b2b2b;
}

/*Parte interna de la barra */
.progress-bar:before {
content: '';
display: block;
position: absolute;
width: 200px;
height: 24px;
background: #999;
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 3px rgba(0, 0, 0, 0.4),0 1px 1px #000;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),inset 0 -1px 3px rgba(0, 0, 0, 0.4),
0 1px 1px #000;
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),inset 0 -1px 3px rgba(0, 0, 0, 0.4),
0 1px 1px #000;
}

/* las barras inclinadas */
.progress-bar:after {
content: '|||||||||||||';
display: block;
position: absolute;
width: 200px;
height: 24px;
overflow: hidden;
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
transform: skewX(-30deg);
-webkit-transform: skewX(-30deg);
-moz-transform: skewX(-30deg);
-o-transform: skewX(-30deg);
font:bold 120px/80px sans-serif;
letter-spacing: -6px;
color: #000;
opacity: 0.06;
}

/* el color de la barra */
.azul:before {
background: #099;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#099), to(#006A6B));
background: -moz-linear-gradient(top, #099, #006A6B);
}
[/CSS]

پاسخ
#2
Note 
html هم میزاشتی :|

پاسخ
#3
Note 
saber2 نوشته است:html هم میزاشتی :|
سلام
html با توجه به css معلومه!

پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

کاربرانِ درحال بازدید از این موضوع:   1 مهمان