<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/timothyrourke/pen/Lwnza?limit=all&page=60&q=gradient" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-family: 'Oswald', sans-serif;
min-height: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#777), to(#444));
background: linear-gradient(to bottom, #777, #444);
background-repeat: no-repeat;
background-position: fixed;
background-size: cover;
line-height: 1.4;
color: #222;
overflow-x: hidden;
}
@media all and (max-width: 600px) {
html {
font-size: 14px;
}
}
body {
height: 100%;
min-height: 100%;
}
form {
max-width: 30em;
margin: 4rem auto;
text-align: center;
}
fieldset {
position: relative;
border: none;
width: 16rem;
height: 16rem;
margin: 0 auto;
}
fieldset legend {
position: absolute;
top: -4rem;
left: 0;
width: 100%;
}
fieldset label {
position: absolute;
display: block;
margin: 0 auto;
padding-top: 1rem;
width: 1rem;
left: 7.5rem;
-webkit-transform-origin: 50% 7.5rem;
transform-origin: 50% 7.5rem;
}
fieldset label:hover {
cursor: pointer;
}
fieldset input {
position: absolute;
width: 2rem;
left: 7rem;
display: block;
margin: 1rem auto 0 auto;
padding: 0;
-webkit-transform-origin: 50% 7.5rem;
transform-origin: 50% 7.5rem;
opacity: 0;
}
fieldset input:hover {
cursor: pointer;
}
fieldset #radio-choice-1, fieldset label[for="radio-choice-1"] {
-webkit-transform: rotateZ(-48deg);
transform: rotateZ(-48deg);
}
fieldset #radio-choice-2, fieldset label[for="radio-choice-2"] {
-webkit-transform: rotateZ(-24deg);
transform: rotateZ(-24deg);
}
fieldset #radio-choice-3, fieldset label[for="radio-choice-3"] {
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
fieldset #radio-choice-4, fieldset label[for="radio-choice-4"] {
-webkit-transform: rotateZ(24deg);
transform: rotateZ(24deg);
}
fieldset #radio-choice-5, fieldset label[for="radio-choice-5"] {
-webkit-transform: rotateZ(48deg);
transform: rotateZ(48deg);
}
fieldset input[type="radio"]:checked + label {
color: #2f5;
text-shadow: 0px 0px 4px #2f5;
}
input[type="radio"]:checked#radio-choice-1 ~ .dial {
-webkit-transform: rotateZ(-48deg);
transform: rotateZ(-48deg);
}
input[type="radio"]:checked#radio-choice-1 ~ .dial::before {
-webkit-transform: rotateZ(48deg);
transform: rotateZ(48deg);
}
input[type="radio"]:checked#radio-choice-1 ~ .dial::after {
-webkit-transform: rotateZ(48deg);
transform: rotateZ(48deg);
}
input[type="radio"]:checked#radio-choice-2 ~ .dial {
-webkit-transform: rotateZ(-24deg);
transform: rotateZ(-24deg);
}
input[type="radio"]:checked#radio-choice-2 ~ .dial::before {
-webkit-transform: rotateZ(24deg);
transform: rotateZ(24deg);
}
input[type="radio"]:checked#radio-choice-2 ~ .dial::after {
-webkit-transform: rotateZ(24deg);
transform: rotateZ(24deg);
}
input[type="radio"]:checked#radio-choice-3 ~ .dial {
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
input[type="radio"]:checked#radio-choice-3 ~ .dial::before {
-webkit-transform: rotateZ(0);
transform: rotateZ(0);
}
input[type="radio"]:checked#radio-choice-3 ~ .dial::after {
-webkit-transform: rotateZ(0);
transform: rotateZ(0);
}
input[type="radio"]:checked#radio-choice-4 ~ .dial {
-webkit-transform: rotateZ(24deg);
transform: rotateZ(24deg);
}
input[type="radio"]:checked#radio-choice-4 ~ .dial::before {
-webkit-transform: rotateZ(-24deg);
transform: rotateZ(-24deg);
}
input[type="radio"]:checked#radio-choice-4 ~ .dial::after {
-webkit-transform: rotateZ(-24deg);
transform: rotateZ(-24deg);
}
input[type="radio"]:checked#radio-choice-5 ~ .dial {
-webkit-transform: rotateZ(48deg);
transform: rotateZ(48deg);
}
input[type="radio"]:checked#radio-choice-5 ~ .dial::before {
-webkit-transform: rotateZ(-48deg);
transform: rotateZ(-48deg);
}
input[type="radio"]:checked#radio-choice-5 ~ .dial::after {
-webkit-transform: rotateZ(-48deg);
transform: rotateZ(-48deg);
}
.dial {
position: relative;
text-align: center;
line-height: 0;
font-size: 65%;
color: #082;
text-shadow: 0px 0px 7px #2f5;
display: block;
width: 8rem;
height: 8rem;
padding: 1rem;
background: radial-gradient(#272727 30%, #333 50%, #222 65%, #111 90%, black 98%);
margin: 3rem auto;
border-radius: 50%;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6);
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
.dial::before {
position: absolute;
content: '';
display: block;
width: 6rem;
height: 6rem;
border-radius: 50%;
background: radial-gradient(circle at 50% 80%, rgba(15, 15, 15, 0.4) 40%, rgba(15, 15, 15, 0.1) 70%);
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.45);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.45);
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
.dial::after {
position: absolute;
content: '';
display: block;
width: 8rem;
height: 8rem;
border-radius: 50%;
top: 0;
left: 0;
background: radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {
display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* close commented backslash hack */
</style></head><body>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Single Element Dial</title>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
</head>
<body>
<form action="#">
<div>
<fieldset>
<legend><h1>Dial it in!</h1></legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" />
<label for="radio-choice-1">1</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">2</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">3</label>
<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">4</label>
<input type="radio" name="radio-choice" id="radio-choice-5" value="choice-5" />
<label for="radio-choice-5">5</label>
<div class="dial">▲</div>
</fieldset>
</form>
</body>
</html>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body></html>
