Created
March 12, 2012 23:18
-
-
Save benjamincharity/2025330 to your computer and use it in GitHub Desktop.
Audio Toggle
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split-vertical","seethrough":"","prefixfree":"","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment