Skip to content

Instantly share code, notes, and snippets.

Created September 11, 2012 22:48
Show Gist options
  • Save anonymous/3702750 to your computer and use it in GitHub Desktop.
Save anonymous/3702750 to your computer and use it in GitHub Desktop.
Playing with an icon-based radial control; next step is to add some interactivity and make it spin!
div.bevel
a.center l
div.bezel
ul.dial
li#a a
li#b c
li#c e
li#d j
li#e m
li#f p
li#g r
li#h f
li#i 1
li#j 2
li#k 6
li#l.active u
@import "compass";
/* loading Pictos from CodePen; hope that's ok for this demo */
@font-face{font-family:'Pictos Custom';src:url("/fonts/pictos_custom-webfont.eot");src:url("/fonts/pictos_custom-webfont.eot?#iefix") format("embedded-opentype"),url("/fonts/pictos_custom-webfont.woff") format("woff"),url("/fonts/pictos_custom-webfont.ttf") format("truetype"),url("/fonts/pictos_custom-webfont.svg#PictosRegular") format("svg");
}
body {
background: #343434 url(http://subtlepatterns.com/patterns/dark_matter.png);
}
div.bevel {
height: 200px;
margin: 40px auto;
padding: 10px;
position: relative;
width: 200px;
@include border-radius(110px);
@include background-image(radial-gradient(center top, 160px 210px, rgba(17, 17, 17, .4), rgba(51, 51, 51, .3)));
a.center {
background: #888;
border: 1px solid #444;
color: #3a3a3a; /*rgba(0, 95, 160, 0.7); */
display: block;
font-family: 'Pictos Custom';
font-size: 36px;
height: 80px;
left: 50px;
padding-top: 40px;
position: absolute;
text-align: center;
top: 50px;
width: 120px;
z-index: 2;
@include border-radius(100px);
@include background-image(radial-gradient(center top, 120px 120px, #333, #222));
@include box-shadow(#111 0 0 8px);
@include text-shadow(#1c1c1c 0 -1px 1px, #5c5c5c 0 1px 1px);
}
}
div.bezel {
background: #282828;
border: 1px solid #181818;
height: 200px;
overflow: hidden;
width: 200px;
@include border-radius(100px);
@include background-image(radial-gradient(center center, 160px 210px, #292929, #292929, #222, #1c1c1c));
}
ul.dial {
border-radius: 100px;
color: #4c4c4c;
float: left;
font-family: 'Pictos Custom';
height: 200px;
padding-left: 120px;
width: 480px;
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
li {
border-right: 1px solid #212121;
display: block;
float: left;
font-size: 20px;
height: 92px;
padding-top: 8px;
width: 39px;
-webkit-transform-origin: bottom center;
@include text-shadow(#000 0 0 3px);
@include single-transition(color, 0.1s, linear, 0);
}
li.active {
color: #fff;
font-weight: bold;
}
li:hover {
color: #fcc793;
@include text-shadow(rgba(251, 223, 124, 0.8) 0 0 5px);
@include single-transition(color, 0.3s, linear, 0);
}
@for $i from 1 through 12 {
li:nth-child(#{$i}) {
text-align: center;
-webkit-transform:
translateX(-40px * $i)
rotate(30deg * $i)
translateY(-0px);
cursor: pointer;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment