Created
June 26, 2014 19:30
-
-
Save toddpress/bf23c4abecbf20ae3dc8 to your computer and use it in GitHub Desktop.
CSS only knob
This file contains 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
/* | |
Note: | |
1) THERE MUST BE A BETTER WAY TO DO THIS | |
2) The colored portion of the gradients must be the same as their parent's background | |
3) The hover state was only added for demonstration | |
*/ | |
* {margin: 0; padding: 0;} | |
body { | |
background: #0c8; | |
text-align: center; | |
position: relative; | |
padding: 100px; | |
} | |
.knob { | |
width: 500px; | |
height: 500px; | |
background: white; | |
display: inline-block; | |
vertical-align: middle; | |
position: relative; | |
background: radial-gradient( | |
transparent 50%, | |
transparent 50%, | |
white 50%, | |
white | |
) no-repeat, | |
linear-gradient(to top, | |
white 51%, | |
transparent 51% | |
) no-repeat, | |
radial-gradient( | |
white 30%, | |
white 30%, | |
transparent 30%, | |
transparent | |
) no-repeat; | |
background-size: 100%; | |
background-position: center center; | |
} | |
.knob:before { | |
content: ' '; | |
position: absolute; | |
display: block; | |
top: 50%; | |
left: 50%; | |
margin-left: -37.5%; | |
margin-top: -37.5%; | |
width: 75%; | |
height: 75%; | |
border-radius: 50%; | |
background: linear-gradient(to top, | |
#08c 50%, | |
transparent 50% | |
) no-repeat; | |
transform: rotate(0deg); | |
transition: transform .5s ease-in-out; | |
z-index: -1; | |
} | |
.knob:hover:before { | |
transform: rotate(180deg); | |
} | |
.knob:after { | |
content: 'Hover Me'; | |
display: block; | |
position: absolute; | |
color: #bbb; | |
width: 100%; | |
height: 100%; | |
line-height: 475px; | |
font-family: sans-serif; | |
font-size: 25px; | |
font-weight: 100; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment