<div class="container">
<h1>BLACK HAWKS #77 Kirby Dach</h1>
<input type="radio" class="radio" name="progress" value="zero" id="zero" checked>
<label for="zero" class="label half">5</label>
<input type="radio" class="radio" name="progress" value="" id="ten">
<label for="ten" class="label">10</label>
<input type="radio" class="radio" name="progress" value="ten-half" id="ten-half">
<label for="ten-half" class="label half">5</label>
<input type="radio" class="radio" name="progress" value="twenty" id="twenty">
<label for="twenty" class="label">20</label>
<input type="radio" class="radio" name="progress" value="twenty-half" id="twenty-half">
<label for="twenty-half" class="label half">5</label>
<input type="radio" class="radio" name="progress" value="thirty" id="thirty">
<label for="thirty" class="label">30</label>
<input type="radio" class="radio" name="progress" value="thirty-half" id="thirty-half">
<label for="thirty-half" class="label half">5</label>
<input type="radio" class="radio" name="progress" value="fourty" id="fourty">
<label for="fourty" class="label">40</label>
<input type="radio" class="radio" name="progress" value="fourty-half" id="fourty-half">
<label for="fourty-half" class="label half">5</label>
<input type="radio" class="radio" name="progress" value="fifty" id="fifty">
<label for="fifty" class="label">50</label>
<input type="radio" class="radio" name="progress" value="fifty-half" id="fifty-half">
<label for="fifty-half" class="label half">5</label>
<input type="radio" class="radio" name="progress" value="sixty" id="sixty">
<label for="sixty" class="label">60</label>
<input type="radio" class="radio" name="progress" value="sixty-half" id="sixty-half">
<label for="sixty-half" class="label half">5</label>
<input type="radio" class="radio" name="progress" value="seventy" id="seventy">
<label for="seventy" class="label">70</label>
<input type="radio" class="radio" name="progress" value="seventy-half" id="seventy-half">
<label for="seventy-half" class="label half">5</label>
<input type="radio" class="radio" name="progress" value="eighty" id="eighty">
<label for="eighty" class="label">80</label>
<input type="radio" class="radio" name="progress" value="eighty-half" id="eighty-half">
<label for="eighty-half" class="label half">5</label>
<input type="radio" class="radio" name="progress" value="ninety" id="ninety">
<label for="ninety" class="label">90</label>
<input type="radio" class="radio" name="progress" value="ninety-half" id="ninety-half">
<label for="ninety-half" class="label half">5</label>
<input type="radio" class="radio" name="progress" value="onehundred" id="onehundred">
<label for="onehundred" class="label">100</label>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
/*
* Copyright (c) 2012-2013 Thibaut Courouble
* http://www.cssflow.com
* Licensed under the MIT License
*
* Sass/SCSS source: https://goo.gl/UhXKg
* PSD by Vin Thomas: https://goo.gl/n1M2e
*/
body {
font: 18px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
color: #404040;
background: #2a2a2a;
}
h1 {
color: #ccc;
text-align: center;
font-size: 40px;
margin-bottom: 30px;
}
input {
text-align: center;
font-size: 24px;
margin: 0 5px 30px;
background-color: #aaa;
border: none;
border-radius: 10px;
}
.container {
margin: 60px auto;
width: 60%;
text-align: left;
}
.radio {
display: none;
}
.half {
font-size: 14px;
color: #7c7c7c;
}
.label {
display: inline-block;
margin: 0 0 20px 0;
padding: 5px 0;
width: 52px;
color: #aaa;
text-shadow: 0 1px black;
border-radius: 3px;
cursor: pointer;
text-align: center;
}
.radio:checked + .label {
color: white;
background: rgba(0, 0, 0, 0.25);
}
.progress {
margin: 0 auto;
margin-left: -3%;
width: 100%;
}
.progress {
padding: 4px;
background: rgba(0, 0, 0, 0.25);
border-radius: 6px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.progress-bar {
height: 30px;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
-webkit-transition: 0.4s linear;
-moz-transition: 0.4s linear;
-o-transition: 0.4s linear;
transition: 0.4s linear;
-webkit-transition-property: width, background-color;
-moz-transition-property: width, background-color;
-o-transition-property: width, background-color;
transition-property: width, background-color;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}
/*
* Note: using adjacent or general sibling selectors combined with
* pseudo classes doesn't work in Safari 5.0 and Chrome 12.
* See this article for more info and a potential fix:
* https://css-tricks.com/webkit-sibling-bug/
*/
#zero:checked ~ .progress > .progress-bar {
width: 5%;
background-color: #f21111;
}
#ten:checked ~ .progress > .progress-bar {
width: 10%;
background-color: #f21111;
}
#ten-half:checked ~ .progress > .progress-bar {
width: 15%;
background-color: #f21111;
}
#twenty:checked ~ .progress > .progress-bar {
width: 20%;
background-color: #f23711;
}
#twenty-half:checked ~ .progress > .progress-bar {
width: 25%;
background-color: #f23711;
}
#thirty:checked ~ .progress > .progress-bar {
width: 30%;
background-color: #f25c11;
}
#thirty-half:checked ~ .progress > .progress-bar {
width: 35%;
background-color: #f25c11;
}
#fourty:checked ~ .progress > .progress-bar {
width: 40%;
background-color: #f28211;
}
#fourty-half:checked ~ .progress > .progress-bar {
width: 45%;
background-color: #f28211;
}
#fifty:checked ~ .progress > .progress-bar {
width: 50%;
background-color: #f2a711;
}
#fifty-half:checked ~ .progress > .progress-bar {
width: 55%;
background-color: #f2a711;
}
#sixty:checked ~ .progress > .progress-bar {
width: 60%;
background-color: #f2cc11;
}
#sixty-half:checked ~ .progress > .progress-bar {
width: 65%;
background-color: #f2cc11;
}
#seventy:checked ~ .progress > .progress-bar {
width: 70%;
background-color: #f2f211;
}
#seventy-half:checked ~ .progress > .progress-bar {
width: 75%;
background-color: #f2f211;
}
#eighty:checked ~ .progress > .progress-bar {
width: 80%;
background-color: #cdf211;
}
#eighty-half:checked ~ .progress > .progress-bar {
width: 85%;
background-color: #cdf211;
}
#ninety:checked ~ .progress > .progress-bar {
width: 90%;
background-color: #a7f211;
}
#ninety-half:checked ~ .progress > .progress-bar {
width: 95%;
background-color: #a7f211;
}
#onehundred:checked ~ .progress > .progress-bar {
width: 100%;
background-color: #82f211;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.