CodePen

HTML

            
              <section class="main">
<div class="mask">
  <div class="spec">
  </div>
  <div class="seam seam1">
  </div>
  <div class="seam seam1 cover">
  </div>
  <div class="seam seam2">
  </div>
  <div class="seam seam3">
  </div>
</div>


<section class="model">
</section>
<section class="ty">
  <h1>Thank You!</h1>
  <p><a href="http://dribbble.com/dribbble">@Dribbble</a> for drafting me!</p>
  <p>&larr; Some <strong>CSS</strong> love!</p>
  <small>For best results... use Chrome</small>
</section>
  
</section>
            
          
!

CSS

            
              @import url('http://fonts.googleapis.com/css?family=Amatic+SC:400,700');

@diameter: 157px;
@seam: #c9306b;
@seam1:#cc3a70;

.absolute(@top:auto, @right:auto, @bottom:auto, @left:auto) {
  position:absolute;
  top:@top;
  right:@right;
  bottom:@bottom;
  left:@left;
}

a, a:visited, a:hover, a:active {
  font-weight:700;
  text-decoration:none;
  color:@seam1;
}
body {
  background:#e7e7e7;
}

.main {
  width:550px;
  height:200px;
  .absolute(50%, 0, 0, 50%);
  margin-top:-100px;
  margin-left:-225px;
}
.ty {
  .absolute(0,0,0,210px);
  font-family:'Amatic SC', sans-serif;
  font-size:2rem;
  line-height:1.8rem;
  color:@seam;
  padding-top:10px;
  h1 {
    line-height:3rem;
    font-size:3.5rem;
    font-weight:700;
    margin: 0 10px;
    padding:0;
    
  }
  p, small {
    margin:10px;
  }
  small {
    font-size:1.2rem;
    font-weight:700;
    opacity:.5;
  }
}
.mask {
  .absolute();
  width:@diameter;
  height:@diameter;
  overflow:hidden;
  border-radius:50%;
  border:13px solid @seam;  
background: #f978a7; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #f978a7 49%, #ed548e 76%); /* FF3.6+ */
background: -webkit-gradient(radial, top left, 0px, center center, 100%, color-stop(55%,#f978a7), color-stop(76%,#ed548e)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(top left, ellipse cover,  #f978a7 55%,#ed548e 80%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(top left, ellipse cover,  #f978a7 55%,#ed548e 80%); /* Opera 12+ */
background: -ms-radial-gradient(top left, ellipse cover,  #f978a7 55%,#ed548e 80%); /* IE10+ */
background: radial-gradient(ellipse at top left,  #f978a7 55%,#ed548e 80%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f978a7', endColorstr='#ed548e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.spec {
  width:119px;
  height:74px;
  .absolute(12px,auto,auto,20px);
/*  opacity:.4;*/
  background: -moz-radial-gradient(center, ellipse cover,  rgba(252,165,196,1) 0%, rgba(248,150,186,1) 70%, rgba(248,150,186,0) 71%, rgba(246,144,182,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(252,165,196,1)), color-stop(70%,rgba(248,150,186,1)), color-stop(71%,rgba(248,150,186,0)), color-stop(100%,rgba(246,144,182,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(252,165,196,1) 0%,rgba(248,150,186,1) 70%,rgba(248,150,186,0) 71%,rgba(246,144,182,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(252,165,196,1) 0%,rgba(248,150,186,1) 70%,rgba(248,150,186,0) 71%,rgba(246,144,182,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(252,165,196,1) 0%,rgba(248,150,186,1) 70%,rgba(248,150,186,0) 71%,rgba(246,144,182,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(252,165,196,1) 0%,rgba(248,150,186,1) 70%,rgba(248,150,186,0) 71%,rgba(246,144,182,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fca5c4', endColorstr='#00f690b6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


}
.seam {
  position:absolute;
  border-radius:50%;
  border:14px solid @seam1;
  background-color:transparent;
}

.seam1, .seam1:before {
  width:4*@diameter;
  height:4*@diameter;
  left:-530px;
  top:-127px;
  &.cover {
    z-index:100;
    &:before {
      display:none;
    }
  }
}

.seam1:before {
  content:'';
  .absolute(-8px,0,0,9px);
  z-index:0;
  border-radius:50%;
  display:block;
  border:3.55px solid #ec90b3;
  width:4*@diameter;
  height:3.95*@diameter;
}
.seam2, .seam2:before {
  width:2.2*@diameter;
  height:2.2*@diameter;
  left:-170px;
  top:-295px;
}
.seam2:before {
  content:'';
  .absolute(-8px,0,0,0);
  z-index:0;
  border-radius:50%;
  border:3px solid #f19fbd;
  width:2.24*@diameter;
  height:2.31*@diameter;
}
.seam3, .seam3:before {
  width:1.36*@diameter;
  height:1.36*@diameter;
  .absolute(74px,auto,auto,3px);
}
.seam3:before {
  content:'';
  .absolute(-1px,0,0,0);
  opacity:.65;
  z-index:0;
  border-radius:50%;
  border:3px solid #ec90b3;
  width:1.36*@diameter;
  height:1.36*@diameter;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................