benjamincharity
3/12/2012 - 11:18 PM
Audio Toggle
Audio Toggle
{"view":"split-vertical","seethrough":"","prefixfree":"","page":"css"}<div id="threeway">
<div id="toggle">
<ul>
<li class="">
<a class="on" href="#">On</a>
</li>
<li class="active">
<a class="stand" href="#">Stand</a>
</li>
<li class="">
<a class="off" href="#">Off</a>
</li>
</ul>
</div>
</div>
/**
* Audio Toggle
*/
html {
background: #333;
}
div {
padding: 0;
}
#threeway {
background-color: #505050;
background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 3px), -webkit-gradient(radial, cover ellipse, 0, cover ellipse, 100, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(255, 255, 255, 0)));
background: -webkit-repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 3px), -webkit-radial-gradient(cover ellipse, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
background: -moz-repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 3px), -moz-radial-gradient(cover ellipse, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
background: -o-repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 3px), -o-radial-gradient(cover ellipse, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
background: -ms-repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 3px), -ms-radial-gradient(cover ellipse, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 3px), radial-gradient(cover ellipse, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
padding-top: 100px;
height: 300px;
text-align: center;
width: 400px;
}
#threeway #toggle {
background: #393939;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: inset 2px 3px 2px rgba(0, 0, 0, 0.8), inset 0 -1px 2px 0 rgba(0, 0, 0, 0.5), 4px 0 4px -1px rgba(0, 0, 0, 0.4), 0 1px 1px 0 rgba(255, 255, 255, 0.3);
-webkit-box-shadow: inset 2px 3px 2px rgba(0, 0, 0, 0.8), inset 0 -1px 2px 0 rgba(0, 0, 0, 0.5), 4px 0 4px -1px rgba(0, 0, 0, 0.4), 0 1px 1px 0 rgba(255, 255, 255, 0.3);
-o-box-shadow: inset 2px 3px 2px rgba(0, 0, 0, 0.8), inset 0 -1px 2px 0 rgba(0, 0, 0, 0.5), 4px 0 4px -1px rgba(0, 0, 0, 0.4), 0 1px 1px 0 rgba(255, 255, 255, 0.3);
box-shadow: inset 2px 3px 2px rgba(0, 0, 0, 0.8), inset 0 -1px 2px 0 rgba(0, 0, 0, 0.5), 4px 0 4px -1px rgba(0, 0, 0, 0.4), 0 1px 1px 0 rgba(255, 255, 255, 0.3);
height: 31px;
margin: 0 auto;
position: relative;
width: 75px;
}
#threeway #toggle ul {
height: 100%;
white-space: nowrap;
}
#threeway #toggle ul li {
display: inline-block;
height: 85%;
position: relative;
top: 3px;
width: 30%;
}
#threeway #toggle ul li.active::after {
background: -webkit-gradient(linear, 0, 0, color-stop(0%, #161616), color-stop(40%, #282828), color-stop(45%, #585858), color-stop(47%, #ffffff), color-stop(51%, #ffffff), color-stop(54%, #ffffff), color-stop(56%, #585858), color-stop(62%, #282828), color-stop(100%, #161616));
background: -webkit-linear-gradient(0, #161616, #282828 40%, #585858 45%, #ffffff 47%, #ffffff 51%, #ffffff 54%, #585858 56%, #282828 62%, #161616 100%);
background: -moz-linear-gradient(0, #161616, #282828 40%, #585858 45%, #ffffff 47%, #ffffff 51%, #ffffff 54%, #585858 56%, #282828 62%, #161616 100%);
background: -o-linear-gradient(0, #161616, #282828 40%, #585858 45%, #ffffff 47%, #ffffff 51%, #ffffff 54%, #585858 56%, #282828 62%, #161616 100%);
background: -ms-linear-gradient(0, #161616, #282828 40%, #585858 45%, #ffffff 47%, #ffffff 51%, #ffffff 54%, #585858 56%, #282828 62%, #161616 100%);
background: linear-gradient(0, #161616, #282828 40%, #585858 45%, #ffffff 47%, #ffffff 51%, #ffffff 54%, #585858 56%, #282828 62%, #161616 100%);
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 1px 2px 2px rgba(255, 255, 255, 0.3);
-moz-box-shadow: inset 1px 2px 2px rgba(255, 255, 255, 0.3);
-ms-box-shadow: inset 1px 2px 2px rgba(255, 255, 255, 0.3);
-o-box-shadow: inset 1px 2px 2px rgba(255, 255, 255, 0.3);
box-shadow: inset 1px 2px 2px rgba(255, 255, 255, 0.3);
content: "";
display: block;
height: 100%;
position: absolute;
left: 0;
top: 0;
width: 24px;
}
#threeway #toggle ul li.active::before {
background: -webkit-gradient(linear, -90deg, -90deg, color-stop(0%, rgba(0, 0, 0, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
background: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
background: -o-linear-gradient(-90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
background: -ms-linear-gradient(-90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
background: linear-gradient(-90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
content: "";
display: block;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
height: 90%;
opacity: 0.5;
position: absolute;
left: 5px;
top: 90%;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
width: 100%;
}
#threeway #toggle ul li:first-child.active::after {
left: 13px;
}
#threeway #toggle ul li:first-child.active::before {
left: 18px;
-webkit-transform: rotate(-16deg);
-moz-transform: rotate(-16deg);
-ms-transform: rotate(-16deg);
-o-transform: rotate(-16deg);
transform: rotate(-16deg);
width: 100%;
}
#threeway #toggle ul li:last-child.active::after {
left: -16px;
}
#threeway #toggle ul li:last-child.active::before {
left: -10px;
top: 85%;
-webkit-transform: rotate(-24deg);
-moz-transform: rotate(-24deg);
-ms-transform: rotate(-24deg);
-o-transform: rotate(-24deg);
transform: rotate(-24deg);
width: 105%;
}
#threeway #toggle ul li a {
color: rgba(255, 255, 255, 0.8);
display: inline-block;
font-size: 0.53em;
font-weight: bold;
position: relative;
top: -28px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
text-transform: uppercase;
width: 100%;
}
#threeway #toggle ul li a.on {
-webkit-transform: translate(-10px, 0);
-moz-transform: translate(-10px, 0);
-ms-transform: translate(-10px, 0);
-o-transform: translate(-10px, 0);
transform: translate(-10px, 0);
}
#threeway #toggle ul li a.on::after {
border-right: 2px solid rgba(255, 255, 255, 0.8);
border-top: 2px solid rgba(255, 255, 255, 0.8);
content: "";
display: block;
height: 3px;
position: absolute;
left: 3px;
top: 10px;
width: 32px;
}
#threeway #toggle ul li a.off {
-webkit-transform: translate(10px, 0);
-moz-transform: translate(10px, 0);
-ms-transform: translate(10px, 0);
-o-transform: translate(10px, 0);
transform: translate(10px, 0);
}
#threeway #toggle ul li a.off::after {
border-left: 2px solid rgba(255, 255, 255, 0.8);
border-top: 2px solid rgba(255, 255, 255, 0.8);
content: "";
display: block;
height: 3px;
position: absolute;
right: 3px;
top: 10px;
width: 32px;
}
#threeway #toggle ul li a.stand {
-webkit-transform: translate(0, -5px);
-moz-transform: translate(0, -5px);
-ms-transform: translate(0, -5px);
-o-transform: translate(0, -5px);
transform: translate(0, -5px);
}
#threeway #toggle ul li a.stand::after {
background: rgba(255, 255, 255, 0.8);
content: "";
display: block;
height: 6px;
position: absolute;
left: 50%;
top: 13px;
width: 2px;
}