cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="smile smile-happy">
  <div class="eyes cf">
    <div class="eye eye-right"></div>
    <div class="eye eye-left"></div>
  </div>
  <div class="shy-circles cf">
    <div class="shy shy-left"></div>
    <div class="shy shy-right"></div>
  </div>
  <div class="mouth"></div>
</div>

<div class="smile tired">
  <div class="eyes cf">
    <div class="eye eye-right"></div>
    <div class="eye eye-left"></div>
  </div>
  <div class="mouth"></div>
</div>

<div class="smile bored">
  <div class="eyes cf">
    <div class="eye eye-right"></div>
    <div class="eye eye-left"></div>
  </div>
  <div class="shy-circles cf">
    <div class="shy shy-left"></div>
    <div class="shy shy-right"></div>
  </div>
  <div class="mouth"></div>
</div>

<div class="smile replete">
  <div class="star"><span></span></div>
  <div class="eyes cf">
    <div class="eye eye-left"></div>
    <div class="eye eye-right"></div>
  </div>
  <div class="shy-circles cf">
    <div class="shy shy-left"></div>
    <div class="shy shy-right"></div>
  </div>
  <div class="mouth"><span></span></div>
</div>

<div class="smile funny">
  <div class="eyebrow"></div>
  <div class="eyes cf">
    <div class="eye eye-left"></div>
    <div class="eye eye-right"></div>
  </div>
  <div class="nose"></div>
  <div class="angry">
    <div class="right"></div>
    <div class="left"></div>
  </div>
  <div class="circles">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

<div class="smile polite">
  <div class="eyes cf">
    <div class="eye eye-right"></div>
    <div class="eye eye-left"></div>
  </div>
  <div class="shy-circles cf">
    <div class="shy shy-left"></div>
    <div class="shy shy-right"></div>
  </div>
  <div class="mouth"></div>
</div>

<div class="smile sick">
  <div class="eyes cf">
    <div class="eye eye-right"></div>
    <div class="eye eye-left"></div>
  </div>
  <div class="ring"></div>
  <div class="shy-circles cf">
    <div class="shy shy-left"></div>
    <div class="shy shy-right"></div>
  </div>
  <div class="mouth"></div>
</div>

<div class="smile stupid">
  <div class="shy-circles cf">
    <div class="shy shy-left"></div>
    <div class="shy shy-right"></div>
  </div>
  <div class="top">
    <div class="box"></div>
    <div class="box2"><span></span></div>
  </div>
  <div class="mouth"></div>
</div>

<div class="smile brat">
  <div class="eyes cf">
    <div class="eye eye-right"></div>
    <div class="eye eye-left"></div>
  </div>
  <div class="shy-circles cf">
    <div class="shy shy-left"></div>
    <div class="shy shy-right"></div>
  </div>
  <div class="mouth">
    <span class="circle"></span>
    <span class="border"></span>
  </div>
</div>

<div class="smile masked">
  <div class="ring"></div>
  <div class="eyes cf">
    <div class="eye eye-right"></div>
    <div class="eye eye-left"></div>
  </div>
  <div class="shy-circles cf">
    <div class="shy shy-left"></div>
    <div class="shy shy-right"></div>
  </div>
  <div class="mouth">
    <div class="inside"><span></span></div>
  </div>
</div>

<div class="smile summer">
  <div class="eyes">
    <div class="eye eye-left"></div>
    <div class="eye eye-right"></div>
  </div>
  <div class="shy-circles cf">
    <div class="shy shy-left"></div>
    <div class="shy shy-right"></div>
  </div>
  <div class="mouth"><span></span></div>
</div>

<div class="smile sad">
  <div class="eyes cf">
    <div class="eye eye-left"></div>
    <div class="eye eye-right"></div>
  </div>
  <div class="shy-circles cf">
    <div class="shy shy-left"></div>
    <div class="shy shy-right"></div>
  </div>
  <div class="mouth"></div>
</div>

<div class="smile suprised">
  <div class="eyes cf">
    <div class="eye eye-right"></div>
    <div class="eye eye-left"></div>
  </div>
  <div class="shy-circles cf">
    <div class="shy shy-left"></div>
    <div class="shy shy-right"></div>
  </div>
  <div class="mouth"><span></span>
  </div>
</div>

<div class="smile crazy">
  <div class="eyes cf">
    <div class="eye eye-right"></div>
    <div class="eye eye-left"></div>
  </div>
  <div class="shy-circles cf">
    <div class="shy shy-left"></div>
    <div class="shy shy-right"></div>
  </div>
  <div class="mouth"><span></span></div>
</div>

<div class="smile pixel">
     <div class="eyes cf">
         <div class="eye eye-right">
              <span class="bottom-left"></span>
              <span class="bottom-right"></span>
              <span class="top-left"></span>
              <span class="top-right"></span>
         </div>
         <div class="eye eye-left">
              <span class="bottom-left"></span>
              <span class="bottom-right"></span>
              <span class="top-left"></span>
              <span class="top-right"></span>
         </div>
     </div>
     <div class="shy-circles cf">
         <div class="shy shy-left"></div>
         <div class="shy shy-right"></div>
     </div>
     <div class="mouth">
          <span class="left"></span>
          <span class="right"></span>
     </div>
</div>

<div class="smile ring-eyes">
     <div class="eyes-wrapper cf">
         <div class="eyes">
              <div class="eye eye-right"></div>
              <div class="eye eye-left"></div>
         </div>
       </div>
       <div class="shy-circles cf">
         <div class="shy shy-left"></div>
         <div class="shy shy-right"></div>
       </div>
     <div class="mouth"></div>
</div>

<div class="smile crying">
  <div class="eyes cf">
    <div class="eye eye-right"></div>
    <div class="eye eye-left"></div>
  </div>
  <div class="shy-circles cf">
    <div class="shy shy-left"></div>
    <div class="shy shy-right"></div>
  </div>
  <div class="mouth">
       <span class="left"></span>
       <span class="right"></span>
  </div>
</div>

<div class="smile music">
     <div class="eyes cf">
         <div class="eye eye-right"></div>
         <div class="eye eye-left"></div>
     </div>
     <div class="music-note cf">
          <span class="left"></span>
          <span class="right"></span>
     </div>
     <div class="mouth"></div>
</div>

<div class="smile nerd">
     <div class="eyes cf">
          <div class="eye eye-right"></div>
          <div class="eye eye-left"></div>
     </div>
     <div class="shy cf">
          <div class="shy-left"></div>
          <div class="shy-right"></div>
     </div>
     <div class="mouth"></div>
</div>
            
          
!
            
              .cf:after {
  content: "";
  clear: both;
  display: table;
}

/* Mixins */
.inner-shadow (@x: 0, @y: 0px, @blur: 0px, @spread: 0, @color: transparent) {
    -webkit-box-shadow: inset @x @y @blur @spread @color;
    -moz-box-shadow:    inset @x @y @blur @spread @color;
    box-shadow:         inset @x @y @blur @spread @color;
}

.border-radius (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius:    @radius;
    border-radius:         @radius;
}

.transform(@string){
    -webkit-transform: @string;
    -moz-transform:      @string;
    -ms-transform:       @string;
    -o-transform:        @string;
}

.smile {
  width: 100px;
  height: 100px;
  background: #fabc24;
  .border-radius(50%);
  .inner-shadow(-11px, -9px, 0, 0, #f3ad22);
  position: relative;
  margin: 0 20px 20px 0;
  float: left;
}

/* Happy */

.smile-happy {
  .eyes {
    width: 50%;
    margin: 0 auto;
    position: relative;
    top: 25px;
    
    .eye {
      width: 16px;
      height: 16px;
      background: #edeab6;
      .border-radius(50%);
      -webkit-animation-name: openEyes;
  -webkit-animation-duration: .75s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
      -webkit-animation-delay: 1s;
    }
    
    .eye-left {float: left;}
    .eye-right {float: right;}
  }
  
  @-webkit-keyframes openEyes1 {
    from {
      transform: rotateX(0);
    }
    to {
      transform: rotateX(85deg);
    }
  }
  
  .shy-circles {
    width: 70%;
    margin: 0 auto;
    position: relative;
    top: 30px;
    
    .shy {
      width: 8px;
      height: 8px;
      .border-radius(50%);
      background: #ec9f21;
    }
    
    .shy-right {float: right;}
    .shy-left {float: left;}
  }
  
  .mouth {
    width: 54px;
    height: 30px;
    background: #ce801f;
    position: absolute;
    left: 50%;
    .transform(translateX(-50%));
    bottom: 13px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    overflow: hidden;
    
    &:after {
      content: "";
      width: 28px;
      height: 28px;
      background: #ec9f21;
      position: absolute;
      .border-radius(50%);
      left: 50%;
      .transform(translateX(-50%));
      bottom: -8px;
    }
  }
}

/* Tired */
.tired {
  .eyes {
    width: 50%;
    margin: 0 auto;
    position: relative;
    top: 30px;
    
    .eye {
      width: 18px;
      height: 4px;
      background: #edeab6;
      .transform(rotate(45deg));

      &:after {
        content: "";
        width: 18px;
        position: absolute;
        height: 4px;
        background: #edeab6;
        .transform(rotate(90deg));
      }
    }
    
    .eye-left {float: left;}
    .eye-right {float: right;}
  }
  
  .mouth {
    width: 41px;
    height: 20px;
    background: #ce801f;
    position: absolute;
    left: 50%;
    .transform(translateX(-50%) scaleY(-1));
    bottom: 27px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    
    &:after {
      content: "";
      width: 20px;
      height: 17px;
      background: #ec9f21;
      position: absolute;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 3px;
      border-bottom-left-radius: 3px;
      z-index: 5;
      top: -10px;
      left: 50%;
      .transform(translateX(-50%));
    }
  }
}

.bored {
  .eyes {
    width: 50%;
    margin: 0 auto;
    position: relative;
    top: 25px;
    
    .eye {
      width: 16px;
      height: 16px;
      background: #edeab6;
      border-radius: 50%;
    }
    
    .eye-left {float: left;}
    .eye-right {float: right;}
  }
  
  .shy-circles {
    width: 70%;
    margin: 0 auto;
    position: relative;
    top: 30px;
    
    .shy {
      width: 8px;
      height: 8px;
      .border-radius(50%);
      background: #ec9f21;
    }
    
    .shy-right {float: right;}
    .shy-left {float: left;}
  }
  
  .mouth {
    width: 20px;
    height: 4px;
    background: #ce801f;
    position: absolute;
    left: 50%;
    .transform(translateX(-50%));
    bottom: 37px;
  }
}

.replete {
  .star {
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 12px;
    .transform(translateX(-50%) scaleY(-1) rotateX(20deg));
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 10px solid #edeab6;
    
    &:after {
      content: "";
      position: absolute;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 6px solid #edeab6;
      left: -10px;
      top: -1px;
      .transform(rotate(-135deg) rotateX(45deg) scale(1.15));
    }
    
    &:before {
      content: "";
      position: absolute;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 6px solid #edeab6;
      left: -6px;
      top: 0px;
      .transform(rotate(135deg) rotateX(45deg) scale(1.15));
    }
    
    span {
      position: absolute;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 8px solid #edeab6;
      top: 9px;
      left: 50%;
      .transform(translateX(-50%) rotateY(65deg));
    }
  }
  
  .eyes {
    width: 45%;
    margin: 0 auto;
    position: relative;
    top: 28px;
    
    .eye {
      width: 16px;
      height: 16px;
      background: #edeab6;
      .border-radius(50%);
      .transform(scaleY(-1));
      overflow: hidden;
      position: relative;
      
      &:after {
        content: "";
        position: absolute;
        width: 20px;
        height: 25px;
        background: #fabc24;
        top: 8px;
      }
    }
    
    .eye-left {float: left;}
    .eye-right {float: right}
  }
  
  .shy-circles {
    width: 70%;
    margin: 0 auto;
    position: relative;
    top: 34px;
    
    .shy {
      width: 8px;
      height: 8px;
      .border-radius(50%);
      background: #ec9f21;
    }
    
    .shy-right {float: right;}
    .shy-left {float: left;}
  }
  
  .mouth {
    width: 30px;
    height: 14px;
    background: transparent;
    position: absolute;
    left: 50%;
    .transform(translateX(-50%));
    top: 55px;
    overflow: hidden;
    z-index: 15;
    
    &:before {
      content: "";
      width: 7px;
      height: 7px;
      background: #fabc24;
      position: absolute;
      left: -6px;
      top: 1px;
      .border-radius(50%);
      border: 3px solid #ce801f;
      z-index: 20;
    }
    
    &:after {
      content: "";
      width: 7px;
      height: 7px;
      background: #fabc24;
      position: absolute;
      right: -6px;
      top: 1px;
      .border-radius(50%);
      border: 3px solid #ce801f;
      z-index: 20;
    }
    
    span {
      background: #ce801f;
      display: block;
      height: 4px;
      width: 100%;
      position: absolute;
      top: 5px;
    }
  }
}

.funny {
  background: #edeab6;
  .inner-shadow(-11px, -9px, 0, 0, #f4d36d);
  
  .eyebrow {
    width: 0px;
    height: 0px;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 8px solid #fabc24;
    position: absolute;
    left: 50%;
    top: 20px;
    .transform(translateX(-50%));
  }
  
  .eyes {
    width: 50%;
    margin: 0 auto;
    position: relative;
    top: 28px;
    
    .eye {
      width: 18px;
      height: 18px;
      background: #ce801f;
      .border-radius(50%);
    }
    
    .eye-left {float: left;}
    .eye-right {float: right}
  }
  
  .nose {
    width: 8px;
    height: 8px;
    .border-radius(50%);
    background: #ec9f21;
    position: absolute;
    left: 50%;
    .transform(translateX(-50%));
    top: 50px;
    
    &:after {
      content: "";
      position: absolute;
      width: 8px;
      height: 8px;
      .border-radius(50%);
      background: #ec9f21;
      left: 30px;
    }
    
    &:before {
      content: "";
      position: absolute;
      width: 8px;
      height: 8px;
      .border-radius(50%);
      background: #ec9f21;
      left: -30px;
    }
  }
  
  .angry {
    width: 75%;
    margin: 0 auto;
    position: absolute;
    top: 60px;
    left: 15px;
    
    div {
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 6px solid transparent;
      border-top: 8px solid #fabc24;
      position: relative;
      .transform(rotate(55deg));
    }
    
    .right { 
      float: right;
      right: 4px;
    }
    .left { 
      float: left; 
      .transform(rotate(-55deg) scaleX(-1));
    }
    
  }
  
  .circles {
    div {
      width: 8px;
      height: 8px;
      .border-radius(50%);
      background: #ec9f21;
      position: relative;
      left: 35px;
      top: 44px;
      margin-bottom: 2px;
      
      &:after {
        content: "";
        width: 8px;
        height: 8px;
        .border-radius(50%);
        background: #ec9f21;
        position: absolute;
        left: 22px;
      }
    }
  }
}

.polite {
  .eyes {
    width: 50%;
    margin: 0 auto;
    position: relative;
    top: 25px;
    
    .eye {
      width: 16px;
      height: 16px;
      background: #edeab6;
      .border-radius(50%);
    }
    
    .eye-left {float: left;}
    .eye-right {float: right;}
  }
  
  .shy-circles {
    width: 70%;
    margin: 0 auto;
    position: relative;
    top: 30px;
    
    .shy {
      width: 8px;
      height: 8px;
      .border-radius(50%);
      background: #ec9f21;
    }
    
    .shy-right {float: right;}
    .shy-left {float: left;}
  }
  
  .mouth {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: transparent;
    border: 6px solid #ce801f;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    position: absolute;
    left: 50%;
    top: 5px;
    .transform(translateX(-50%)); 
  }
}

.sick {
  overflow: hidden;
  .eyes {
    width: 50%;
    margin: 0 auto;
    position: relative;
    top: 25px;
    
    .eye {
      width: 16px;
      height: 16px;
      background: #edeab6;
      border-radius: 50%;
    }
    
    .eye-left {float: left;}
    .eye-right {float: right;}
  }
  
  .shy-circles {
    width: 70%;
    margin: 0 auto;
    position: relative;
    top: 30px;
    overflow: hidden;
    
    .shy {
      width: 8px;
      height: 8px;
      .border-radius(50%);
      background: #ec9f21;
    }
    
    .shy-right {float: right;}
    .shy-left {float: left;}
  }
  
  .mouth {
    width: 44px;
    height: 55px;
    background: #ce801f;
    position: absolute;
    left: 50%;
    .transform(translateX(-50%));
    .border-radius(4px);
    bottom: -10px;
    zo
    
    &:before {
      content: "";
      width: 43px;
      height: 25px;
      background: #FABC24;
      position: absolute;
      z-index: 500;
      left: -23px;
      top: 9px;
      border-top-right-radius: 30px;
      border-bottom-right-radius: 15px;
      .transform(rotateY(30deg) rotate(90deg));
    }
    
  }
  
  .ring {
    position: absolute;
    width: 120px;
    height: 16px;
    background: #e99d21;
    top: 13px;
  }
 
}

.stupid {
  overflow: hidden;
  .inner-shadow(0);
  background: #FABC24;
  
  &:after {
    content: "";
    width: 100px;
    height: 100px;
    background: transparent;
    .border-radius(50%);
    position: absolute;
    right: 0px; top: 0px;
    z-index: 200;
    .inner-shadow(-11px, -9px, 0, 0, rgba(230,164,32,0.8));
  }
  
  .top {
    width: 107px;
    height: 55px;
    background: #edeab6;
    position: absolute;
    z-index: 100;
    border-bottom: 4px solid rgba(230,164,32,0.9);
    
    .box {
      width: 120px;
      height: 6px;
      background: #edeab6;
      position: absolute;
      top: 17px;
      border-top: 2px solid #fabc24;
      border-bottom: 2px solid #fabc24;
    }
    
    .box2 {
      width: 75px;
      height: 15px;
      background: #ce801f;
      position: absolute;
      left: 12px;
      top: 33px;
      border-radius: 7px;
      overflow: hidden;
      
      span {
        width: 10px;
        height: 13px;
        background: #ec9f21;
        position: absolute;
        left: 50%;
        .transform(translateX(-50%));
        bottom: 0;
        z-index: 55;
        
        &:before {
          content: "";
          width: 4px;
          height: 13px;
          background: #ec9f21;
          position: absolute;
          left: -25px;
        }
        
        &:after {
          content: "";
          width: 4px;
          height: 13px;
          background: #ec9f21;
          position: absolute;
          left: 30px;
        }
      }
    }
  }
  
  .shy-circles {
    width: 63%;
    position: absolute;
    top: 63px;
    left: 17px;
    
    .shy {
      width: 8px;
      height: 8px;
      .border-radius(50%);
      background: #ec9f21;
    }
    
    .shy-right {float: right;}
    .shy-left {float: left;}
  }
  
  .mouth {
    width: 35px;
    height: 20px;
    background: #ce801f;
    position: absolute;
    left: 50%;
    .transform(translateX(-50%));
    bottom: 13px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    overflow: hidden;
    
    &:after {
      content: "";
      width: 18px;
      height: 18px;
      background: #ec9f21;
      position: absolute;
      .border-radius(50%);
      left: 50%;
      transform: translateX(-50%);
      bottom: -8px;
    }
  }
}

.brat {
  .eyes {
    width: 45%;
    margin: 0 auto;
    position: relative;
    top: 22px;
    
    .eye {
      width: 16px;
      height: 16px;
      background: #edeab6;
      .border-radius(50%);
      overflow: hidden;
      position: relative;
    }
    
    .eye-left {
      float: left;
    }
    .eye-right {
      float: right;
      
      &:after {
        content: "";
        position: absolute;
        width: 20px;
        height: 25px;
        background: #fabc24;
        top: 8px;
      }
    }
  }
  
  .shy-circles {
    width: 70%;
    margin: 0 auto;
    position: relative;
    top: 25px;
    
    .shy {
      width: 8px;
      height: 8px;
      .border-radius(50%);
      background: #ec9f21;
    }
    
    .shy-right {float: right;}
    .shy-left {float: left;}
  }
  
  .mouth {
    width: 52px;
    height: 16px;
    background: #ce801f;
    position: absolute;
    left: 50%;
    top: 54px;
    .transform(translateX(-50%));
    .border-radius(6px);
    overflow: hidden;
    
    &:after {
      content: "";
      width: 57px;
      height: 10px;
      background: #fabc24;
      position: absolute;
      right: -3px;
      bottom: -5px;
      .transform(rotate(-8deg));
    }
    
    .border {
      width: 60px;
      height: 4px;
      background: #edeab6;
      position: absolute;
      bottom: 0;
    }
    
    .circle {
      width: 20px;
      height: 20px;
      background: #ec9f21;
      position: absolute;
      top: 3px;
      .border-radius(50%);
      left: 50%;
      .transform(translateX(-50%));
    }
  }
}

.masked {
  overflow: hidden;
  
  .ring {
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 50%;
    border: 2px dotted #ec9f21;
    position: relative;
    left: 27px;
    top: -25px;
  }
  
  .eyes {
    width: 80%;
    margin: 0 auto;
    position: relative;
    top: -20px;
    
    &:after {
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 8px solid #ec9f21;
      .transform(translateX(-50%));
      left: 50%;
      top: 25px;
    }
    
    .eye {
      width: 37px;
      height: 29px;
      background: #ce801f;
      position: relative;
      border-radius: 0 15px 15px 15px;
      
      &:after {
        content: "";
        width: 30px;
        height: 22px;
        background: #ec9f21;
        .border-radius(10px);
        position: absolute;
        left: 3px;
        top: 3px;
      }
      
      &:before {
        content: "";
        width: 15px;
        height: 15px;
        .border-radius(50%);
        .transform(translateX(-50%));
        background: #edeab6;
        position: absolute;
        left: 50%;
        top: 7px;
        z-index: 25;
      }
    }
    
    .eye-left {float: left;}
    .eye-right {float: right; .transform(scaleX(-1));}
  }
  
  .shy-circles {
    width: 70%;
    margin: 0 auto;
    position: relative;
    top: -18px;
    
    .shy {
      width: 8px;
      height: 8px;
      .border-radius(50%);
      background: #ec9f21;
    }
    
    .shy-right {float: right;}
    .shy-left {float: left;}
  }
  
  .mouth {
    width: 56px;
    height: 31px;
    background: #ec9f21;
    border: 5px solid #ce801f;
    .border-radius(15px);
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    bottom: 8px;
    .transform(translateX(-50%));
    
    .inside {
      width: 32px;
      height: 16px;
      background: #ce801f;
      position: absolute;
      left: 50%;
      .transform(translateX(-50%));
      bottom: 2px;
      border-bottom-left-radius: 100px;
      border-bottom-right-radius: 100px;
      overflow: hidden;

      &:after {
        content: "";
        width: 14px;
        height: 14px;
        background: #ec9f21;
        position: absolute;
        .border-radius(50%);
        left: 50%;
        transform: translateX(-50%);
        bottom: -4px;
      }
      
      span {
        position: absolute;
        width: 40px;
        height: 3px;
        background: #edeab6;
        
        &:after {
          content: "";
          width: 40px;
          height: 3px;
          background: #edeab6;
          position: absolute;
          bottom: -12px;
          z-index: 35;
        }
      }
    }
  }
}

.summer {
  overflow: hidden;
  
  .eyes {
    width: 70%;
    margin: 0 auto;
    height: 4px;
    background: #ce801f;
    position: relative;
    top: 24px;
    
    .eye {
      width: 32px;
      height: 16px;
      background: #ce801f;
      position: absolute;
      .transform(translateX(-50%));
      top: 0;
      border-bottom-left-radius: 100px;
      border-bottom-right-radius: 100px;
      overflow: hidden;
    }
    
    .eye-left { 
      left: 18px;
      
      &:after {
        content: "";
        width: 60px;
        height: 25px;
        background: #ce801f;
        position: absolute;
        left: -23px;
        z-index: 40;
        box-sizing: border-box;
        border-top: 3px solid #ec9f21;
        border-bottom: 7px solid #ec9f21;
        .transform(rotate(-37deg));
      }
    }
    .eye-right {
      right: -14px;
      
      &:after {
        content: "";
        width: 60px;
        height: 25px;
        background: #ce801f;
        position: absolute;
        left: -30px;
        top: -5px;
        z-index: 40;
        box-sizing: border-box;
        border-bottom: 7px solid #ec9f21;
        .transform(rotate(-37deg));
      }
    }
  }
  
  .shy-circles {
    width: 70%;
    margin: 0 auto;
    position: relative;
    top: 38px;
    
    .shy {
      width: 8px;
      height: 8px;
      .border-radius(50%);
      background: #ec9f21;
    }
    
    .shy-right {float: right;}
    .shy-left {float: left;}
  }
  
  .mouth {
    width: 54px;
    height: 30px;
    background: #ce801f;
    position: absolute;
    left: 50%;
    .transform(translateX(-50%));
    bottom: 13px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    overflow: hidden;
    
    span {
      position: absolute;
      height: 4px;
      background: #edeab6;
      width: 120px;
      top: 0;
    }
    
    &:after {
      content: "";
      width: 28px;
      height: 28px;
      background: #ec9f21;
      position: absolute;
      .border-radius(50%);
      left: 50%;
      .transform(translateX(-50%));
      bottom: -13px;
    }
  }
}

.sad {
  .eyes {
    width: 50%;
    margin: 0 auto;
    position: relative;
    top: 25px;
    
    .eye {
      width: 16px;
      height: 16px;
      background: #edeab6;
      .border-radius(50%);
    }
    
    .eye-left {float: left;}
    .eye-right {float: right;}
  }
  
  .shy-circles {
    width: 70%;
    margin: 0 auto;
    position: relative;
    top: 30px;
    
    .shy {
      width: 8px;
      height: 8px;
      .border-radius(50%);
      background: #ec9f21;
    }
    
    .shy-right {float: right;}
    .shy-left {float: left;}
  }
  
  .mouth {
    width: 30px;
    height: 30px;
    border: 5px solid #ce801f;
    border-color: #ce801f #ce801f  transparent transparent;
    .border-radius(50%);
    position: absolute;
    left: 50%;
    top: 47px;
    .transform(translateX(-50%) rotate(-45deg));
  }
}

.suprised {
  .eyes {
    width: 50%;
    margin: 0 auto;
    position: relative;
    top: 25px;
    
    .eye {
      width: 16px;
      height: 16px;
      background: #edeab6;
      .border-radius(50%);
    }
    
    .eye-left {float: left;}
    .eye-right {float: right;}
  }
  
  .shy-circles {
    width: 70%;
    margin: 0 auto;
    position: relative;
    top: 30px;
    
    .shy {
      width: 8px;
      height: 8px;
      .border-radius(50%);
      background: #ec9f21;
    }
    
    .shy-right {float: right;}
    .shy-left {float: left;}
  }
  
  .mouth {
    width: 36px;
    height: 36px;
    background: #ce801f;
    position: absolute;
    left: 50%;
    .transform(translateX(-50%));
    bottom: 13px;
    .border-radius(50%);
    overflow: hidden;
    
    &:after {
      content: "";
      width: 20px;
      height: 20px;
      background: #ec9f21;
      position: absolute;
      .border-radius(50%);
      left: 50%;
      .transform(translateX(-50%));
      bottom: -5px;
    }
    
    span {
      width: 42px;
      height: 4px;
      background: #edeab6;
      position: absolute;
      
      &:after {
        content: "";
        width: 42px;
        height: 4px;
        bottom: -32px;
        background: #edeab6;
        position: absolute;
        z-index: 45;
      }
    }
  }
}

.crazy {
  .eyes {
    width: 50%;
    margin: 0 auto;
    position: relative;
    top: 25px;
    
    .eye {
      width: 16px;
      height: 16px;
      background: #fabc24;
      border: 2px solid #ec9f21;
      box-shadow: 0 0 0 3px #edeab6, 2px 2px 0 3px #ec9f21;
      .border-radius(50%);
      
      &:after {
        content: "::";
        position: absolute;
        color: #eea422;
        letter-spacing: 2px;
      }
    }
    
    .eye-left { 
      float: left;
      
      &:after {
        left: 4px; 
        top: 0;
      }
    }
    .eye-right {
      float: right;
      
      &:after {
        right: 3px; 
        top: 0;
      }
    }
  }
  
  .shy-circles {
    width: 70%;
    margin: 0 auto;
    position: relative;
    top: 30px;
    
    .shy {
      width: 8px;
      height: 8px;
      .border-radius(50%);
      background: #ec9f21;
    }
    
    .shy-right {float: right;}
    .shy-left {float: left;}
  }
  
  .mouth {
    position: relative;
    width: 50px;
    height: 50px;
    background: transparent;
    .border-radius(50%);
    box-sizing: border-box;
    border: 4px solid #ce801f;
    border-color: transparent transparent #ce801f #ce801f;
    .transform(rotate(-45deg) translateX(-50%));
    left: 43%;
    top: -10px;
    
    span {
      position: absolute;
      width: 3px;
      height: 12px;
      border-radius: 1px;
      background: #edeab6;
      .transform(rotate(44deg));
      left: 4px;
      top: 30px;
      
      &:after {
         content: "";
         position: absolute;
         width: 3px;
         height: 12px;
         border-radius: 1px;
         background: #edeab6;
         left: -20px;
         .transform(rotate(48deg));
         top: -11px;
      }
      
      &:before {
         content: "";
         position: absolute;
         width: 3px;
         height: 12px;
         border-radius: 1px;
         background: #edeab6;
         right: -20px;
         .transform(rotate(-56deg));
         top: -11px;
      }
    }
  }
}

.pixel {
    .eyes {
    width: 50%;
    margin: 0 auto;
    position: relative;
    top: 25px;
    
    .eye {
      width: 20px;
      height: 24px;
      background: #edeab6;
      position: relative;

      &:after {
        content: "";
        position: absolute;
        width: 8px;
        height: 9px;
        left: 4px;
        bottom: 4px;
        background: #ec9f21;
      }

      span {
        width: 4px;
        height: 4px;
        position: absolute;
        background: #fabc24;
      }
      
      .top-left {
        left: 0;
        top: 0;
      }

      .top-right {
        right: 0;
        top: 0;
      }

      .bottom-left {
        left: 0;
        bottom: 0;
      }

      .bottom-right {
        right: 0;
        bottom: 0;
      }
    }
    
    .eye-left { 
      float: left;
     
    }
    .eye-right {
      float: right;
      
    }
  }

  .shy-circles {
    width: 70%;
    margin: 0 auto;
    position: relative;
    top: 30px;
    
    .shy {
      width: 8px;
      height: 8px;
      background: #ec9f21;
    }
    
    .shy-right {float: right;}
    .shy-left {float: left;}
  }

  .mouth {
    width: 36px;
    height: 24px;
    background: #ce801f;
    position: absolute;
    left: 50%;
    .transform(translate(-50%));
    top: 57px;

    span {
        position: absolute;
        width: 4px;
        height: 12px;
        background: #fabc24;
        bottom: 0;

        &:after {
            content: "";
            position: absolute;
            width: 4px;
            height: 8px;
            background: #fabc24;
            left: 4px;
            bottom: 0;
        }

        &:before {
            content: "";
            position: absolute;
            width: 4px;
            height: 4px;
            background: #fabc24;
            left: 8px;
            bottom: 0;
        }
    }

    .right {
        right: 0;
        .transform(scaleX(-1));
    }

    .left {
        left: 0;
    }
  }
}

.ring-eyes {
    overflow: hidden;

    .eyes-wrapper {
        background: #ce801f;
        position: relative;
        top: 15px;
        padding: 4px 0;

        .eyes {
        width: 50%;
        margin: 0 auto;
        
        .eye {
          width: 16px;
          height: 16px;
          background: #edeab6;
          .border-radius(50%);
        }
        
        .eye-left {float: left;}
        .eye-right {float: right;}
      }
    }
  
  .shy-circles {
    width: 70%;
    margin: 0 auto;
    position: relative;
    top: 22px;
    
    .shy {
      width: 8px;
      height: 8px;
      .border-radius(50%);
      background: #ec9f21;
    }
    
    .shy-right {float: right;}
    .shy-left {float: left;}
  }
  
  .mouth {
    width: 44px;
    height: 20px;
    background: #ce801f;
    position: absolute;
    left: 50%;
    .transform(translateX(-50%));
    bottom: 24px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    overflow: hidden;
    
    &:after {
      content: "";
      width: 22px;
      height: 22px;
      background: #ec9f21;
      position: absolute;
      .border-radius(50%);
      left: 50%;
      .transform(translateX(-50%));
      bottom: -8px;
    }
  }
}

.crying {
    .eyes {
    width: 50%;
    margin: 0 auto;
    position: relative;
    top: 25px;
    
    .eye {
      width: 16px;
      height: 16px;
      background: #edeab6;
      .border-radius(50%);
    }
    
    .eye-left {float: left;}
    .eye-right {float: right;}
  }
  
  .shy-circles {
    width: 70%;
    margin: 0 auto;
    position: relative;
    top: 30px;
    
    .shy {
      width: 8px;
      height: 8px;
      .border-radius(50%);
      background: #ec9f21;
    }
    
    .shy-right {float: right;}
    .shy-left {float: left;}
  }
  
  .mouth {
    width: 46px;
    height: 20px;
    background: transparent;
    position: relative;
    left: 50%;
    top: 34px;
    .transform(translateX(-50%));
    .border-radius(35px);

    &:after {
        content: "";
        position: absolute;
        width: 15px;
        height: 8px;
        background: #ce801f;
        .transform(translateX(-50%));
        left: 50%;
        top: 6px;
    }

    span {
        position: absolute;
        width: 20px;
        height: 20px;
        background: #ce801f;
        .border-radius(50%);
    }

    .left {
        left: 0;
    }

    .right {
        right: 0;
    }
  }
}

.music {
    .eyes {
        width: 50%;
        margin: 0 auto;
        position: relative;
        top: 25px;

        .eye {
            width: 20px;
            height: 20px;
            background: #fabc24;
            box-sizing: border-box;
            border: 4px solid transparent;
            border-color: #edeab6 #edeab6 transparent transparent;
            border-radius: 50%;
            .transform(rotate(-45deg));
        }

        .eye-left {
            float: left;
        }

        .eye-right {
            float: right;
        }
    }

    .music-note {
        width: 20px;
        height: 13px;
        background: #ec9f21;
        position: absolute;
        .transform(scale(0.8) skewX(-7deg));
        left: 15px;
        top: 45px;

        span {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #ec9f21;
            .border-radius(50%);
        }

        .right {
            left: 12px;
            top: 20px;
        }

        .left {
            left: -5px;
            top: 20px;
        }

        &:after {
            content: "";
            width: 2px;
            height: 12px;
            background: #ec9f21;
            position: absolute;
            left: 0;
            bottom: -12px;
        }

        &:before {
            content: "";
            width: 2px;
            height: 12px;
            background: #ec9f21;
            position: absolute;
            right: 0;
            bottom: -12px;
        }
    }

    .mouth {
        width: 16px;
        height: 16px;
        background: #ce801f;
        .border-radius(50%);
        position: absolute;
        left: 35px;
        top: 61px;

        &:after {
            content: "";
            width: 8px;
            height: 8px;
            background: #ec9f21;
            .border-radius(50%);
            position: absolute;
            right: -31px;
            top: -12px;
        }
    }
}

.nerd {
    .eyes {
        width: 60%;
        margin: 0 auto;
        position: relative;
        top: 25px;

        &:after {
            content: "";
            width: 4px;
            height: 8px;
            background: #edeab6;
            position: absolute;
            left: 50%;
            top: -1px;
            .transform(translateX(-50%));
        }

        .eye {
            width: 28px;
            height: 20px;
            background: #fabc24;
            box-sizing: border-box;
            border: 4px solid #ce801f;
            border-radius: 10px;
            border-top-right-radius: 0;
            border-top-left-radius: 0;

            &:before {
                content: "";
                position: absolute;
                width: 2px;
                height: 4px;
                top: 0;
                background: #ce801f;
            }

            &:after {
                content: "";
                position: absolute;
                width: 8px;
                height: 8px;
                .border-radius(50%);
                top: 6px;
                background: #edeab6;
            }
        }

        .eye-left {
            float: left;

            &:before {
                left: -2px;
            }

            &:after {
                left: 9px;
            }
        }

        .eye-right {
            float: right;

            &:before {
                right: -2px;
            }

            &:after {
                right: 9px;
            }
        }
    }

    .shy {
        div {
            width: 4px;
            height: 4px;
            .border-radius(2px);
            background: #ec9f21;
            position: absolute;
            top: 50px;

            &:after {
                content: "";
                position: absolute;
                width: 4px;
                height: 4px;
                .border-radius(2px);
                background: #ec9f21;
                top: 5px;
                left: -2px;
            }

            &:before {
                content: "";
                position: absolute;
                width: 4px;
                height: 4px;
                .border-radius(2px);
                background: #ec9f21;
                top: 5px;
                right: -3px;
            }
        }

        .shy-left {
            left: 22px;
             .transform(rotate(-15deg));
        }

        .shy-right {
            right: 22px;
            .transform(rotate(15deg));
        }
    }

    .mouth {
        width: 28px;
        height: 4px;
        background: #ce801f;
        position: absolute;
        .transform(translateX(-50%));
        left: 50%;
        top: 60px;

        &:after {
            content: "";
            width: 8px;
            height: 6px;
            background: #edeab6;
            position: absolute;
            left: 8px;
            top: 4px;
        }
    }
}
            
          
!
            
              /*
This is part of my front-end development practise. I'm practising since 204 days and counting :) my goal is to reach 300 days of continuous practise.

The faces by the amazing @JustinMezzell -> http://drbl.in/maCB

My website:
www.ishadeed.com

Follow Me on twitter: @shadeed9

*/
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console