"nav"
Bootstrap 3.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: