CodePen

HTML

            
              <div class="badge">
  <div class="top"> Making Websites Better</div>
  <div class="title">CSS-Tricks</div>
  <div class="bottom">Since 2007</div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @for $i from 1 through 100 {
  .top .char#{$i} { 
  	transform: rotate(($i*6)+deg);
  }
  .bottom .char#{$i} { 
  	transform: rotate(($i*-6+28)+deg);
  }
}

$rootColor: #ccc;

.badge {
	margin: 30px auto;
  width: 260px;
  height: 260px; 
  background: $rootColor;
  position: relative;
  border-radius: 50%; 
  text-align: center;
  border: 15px solid lighten($rootColor, 10%);
  box-shadow: 3px 3px 3px rgba(black, 0.4);
  span {
    position: absolute;
    width: 12px;
    height: 105px;
    text-align: center;
    top: 10px;
    left: 50%;
    margin-left: -3px;
    transform-origin: bottom center;
    z-index: 100;
    font: bold 14px Courier, MonoSpace;
  }
  div {
  	width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  &:before {
    content: "";
    position: absolute;
    top: 15%;
    left: 15%;
    width: 65%;
    height: 65%;
    border: 8px solid darken($rootColor, 20%);
    background: darken($rootColor, 40%);
    border-radius: 50%;
  }
}
.top {
  transform: rotate(-73deg);
}
.bottom {
	transform: translateY(110px);
  span {
    padding-top: 85px;
    transform-origin: top center;
  }

}
.title {
  position: relative;
  z-index: 1;
  text-transform: uppercase;
  color: lighten($rootColor, 10%);;
  font: bold 26px/230px 'Open Sans Condensed', sans-serif;
}

body { 
  background: url(http://subtlepatterns.com/patterns/exclusive_paper.png);
}

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700);
* { box-sizing: border-box; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(".top, .bottom").lettering();
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................