A Pen by Exnius.

A-Pen-by-Exnius.markdown

A Pen by Exnius

A Pen by Exnius on CodePen.

License.

index.html

<div class="metal">
  
  <div class="knob-wrap">  
    <div class="knob">
      <i class="icon-home icon"></i>
      <i class="icon-cloud-download icon"></i>
      <i class="icon-suitcase icon"></i>
      <i class="icon-user icon"></i>
      <i class="icon-envelope icon"></i>
    </div>
  </div>
</div>

script.js

// http://dribbble.s3.amazonaws.com/users/4697/screenshots/675270/navigation_knob.png

style.scss

@import "compass";
html {
  height: 100%;
}

body {
  height: 100%;
  @include background-image(
    radial-gradient(rgba(0,0,0,0), black),
    url(http://subtlepatterns.com/patterns/dark_leather.png)
  );
}

.metal {
  position: relative;
  display: block;
  width: 100%;
  height: 250px;
  background-color: #bdc6d2;
  @include background-image(radial-gradient(circle at bottom, #8a8e99, #242833 60%));
  box-shadow: 0px 3px 4px 1px black;
  &:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    @include background-image(
    url(http://subtlepatterns.com/patterns/white_plaster.png)
    );
    opacity: 0.4;
  }
}

@mixin circle($size) {
  position: absolute;
  width: $size;
  height: $size;
  border-radius: 50%;
  left: calc(50% - #{$size/2});
  top: calc(50% - #{$size/2});
}

.knob-wrap {
  background-image: url(http://subtlepatterns.com/patterns/dark_leather.png);
  position: relative;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  top: 50%;
  box-shadow: inset 0px 1px 4px -2px black;
}

.knob {
  @include circle (180px);
  background-color: gray;
  @include background-image(linear-gradient(gray, darken(gray, 60%)));
  box-shadow: 0px 5px 9px 2px black;
  &:before {
    content: "";
    @include circle (165px);
    @include background-image(linear-gradient(darken(gray, 20%), gray, darken(gray, 40%)));
  }
  &:after {
    content:"";
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 10px solid black;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    top: 15px;
    left: 50%;
    margin-left: -5px;
  }
}

.icon {
  position: absolute;
  font-size: 24px
}

.icon-home {
  top: 44%;
  left: -56px;
}
.icon-cloud-download {
  top: -23px;
  left: -23px;
}
.icon-suitcase {
  top: -56px;
  left: 44%;
}
.icon-user {
  top: -23px;
  right: -23px;
}
.icon-envelope {
  top: 44%;
  right: -56px;
}