/*
If you have any questions or comments feel free to shoot
be an email at galen@galengidman.com.
Cheers!
*/
/* ============================================================================ */
/*
This is just some code to make the page look nice, but
it's not at all essential to making the progress bars
work. Feel free to ignore it.
*/
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);*{margin:0;padding:0}body{width:640px;margin:auto;padding:100px 0 50px 0;background: #222}#container{font:16px/24px 'Droid Serif',Georgia,serif;text-align:center;color:#fff;text-shadow:0 1px 0 #000}h1{font-size:36px;line-height:36px}h3{margin-top:50px}a{color:#fff}#bars-container{margin:50px 0}.progress-bar{float:left;margin:10px 0}.alt{float:right}.clear{clear:both}
/* ============================================================================ */
/*
This is where all the fun begins. From here on the code
is essential to making the progress bars work.
*/
/* progress bar base */
.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;
}
/* code for the inner (colorful) part of the bar */
.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;
}
/* code to stripe the bars */
.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;
}
/* code for the colors */
.blue:before {
background: #099;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#099), to(#006A6B));
background: -moz-linear-gradient(top, #099, #006A6B);
}
.pink:before {
background: #f09;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f36), to(#AC2246));
background: -moz-linear-gradient(top, #f36, #AC2246);
}
.green:before {
background: #7EBD01;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7EBD01), to(#568201));
background: -moz-linear-gradient(top, #7EBD01, #568201);
}
.orange:before {
background: #f90;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f90), to(#f60));
background: -moz-linear-gradient(top, #f90, #f60);
}
حمایت شده: