cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

            
              body
  .container
    .werewolf
      .moon
      .total-head
        .hair-behind
        .body
        .neck
        .ear-left
          .inner-ear
        .ear-right
          .inner-ear
        .head
        .eye-shadow-l
        .eye-shadow-r
        .eye-left
          .pupil
            .dark
            .highlight
        .eye-right
          .pupil
            .dark
            .highlight
        .hair-front
          .hairf1
          .hairf2
          .hairf3
          .hairf4
          .hairf5
          .hairf6
        .nose
        .mouth
          .lip
          .teeth
            
          
!
            
              $background: #636481;
$hair: #a8443f;
$skin: #ffccbe;
$eye: #AEE7E1;
$moon: #FAEDCA;
$eye-white: tint($moon, 70%);
$black: #0D2B3F;
$hair-shade: shade($hair, 20%);
$inner-ear: #FF8484;
$clothes: #49306B;

@mixin circle($x, $y){
  width: $x;
  height: $y;
  border-radius: 50%;
}

body{
  background: $background;
}

.container{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 6%;
  width: 400px;
  height: 400px;
  //border: 5px solid brown;
}

.head, .total-head, .neck, .moon, .hair-behind, .hair-front, .neck, .hairf1, .hairf2, .hairf3, .hairf4, .hairf5, .hairf6, .eye-left, .eye-right, .pupil, .ear-left, .ear-right, .eye-shadow-l, .eye-shadow-r, .highlight, .dark, .nose, .mouth, .body, .lip, .chin, .teeth, .inner-ear{
  position: absolute;
}

.moon{
  @include circle(100%, 100%);
  background: $moon;
  left: -40%;
  box-shadow: 0 0 10px 10px rgba($moon, .7), inset 0 0 60px 0px shade($moon, 10%);
}

.total-head{
  width: 100%;
  height: 100%;
  transform: rotate(-5deg);
}

.hair-behind{
  @include circle(70%, 90%);
  background: $hair-shade;
  box-shadow:  inset 180px 20px 0 -150px $hair, inset -200px 20px 0 -150px $hair;
  top: 25%;
  left: 15%;
  
  &:before{
    position: absolute;
    content: ' ';
    @include circle(80%, 30%);
    background: $background;
    bottom: -10%;
    left: 10%;
  }
}

.neck{
  width: 14%;
  height: 14%;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-bottom: 50px solid $skin;
  transform: rotate(5deg);
  bottom: -5%;
  left: 42%;
  
  &:before{
    position: absolute;
    content: ' ';
    //background: rgba(shade($skin, 50%), .8);
    @include circle(110%, 40%);
    box-shadow: 0px 12px 10px -2px rgba(shade($skin, 50%), .8);
    left: -5%;
    top: 70%;
  }
}

.eye-shadow-l, .eye-shadow-r{
  width: 20%;
  height: 18%;
  border-radius: 0 50% 0 50%;
  background: rgba(shade($skin, 20%), .5);
  top: 50.5%;
  transform: skew(10deg) rotate(3deg);
  &:before{
    position: absolute;
    content: ' ';
    width: 100%;
    height: 50%;
    border-radius: 50%;
    box-shadow: inset 3px 10px 0 -5px shade($hair, 30%);
    top: -20%;
  }
}

.eye-shadow-l{
  left: 25.5%;
}

.eye-shadow-r{
  right: 25.5%;
  transform: scaleX(-1) skew(10deg) rotate(3deg);
}

.eye-left, .eye-right{
  width: 16%;
  height: 13%;
  border-radius: 30% 50% 50% 50% / 10% 30% 60% 50%;
  background: $eye-white;
  top: 54%;
  overflow: hidden;
  transform: skew(10deg);
  
  &:after{
    position: absolute;
    content: ' ';
    width: 100%;
    height: 100%;
    border-radius: 30% 50% 50% 50% / 10% 30% 60% 50%;
    //background: $eye-white;
    box-shadow: inset 2px 10px 0 -4px $black, inset 4px -3px 0 -1px $black;
    top: 0%;
  }
}

.eye-left{
  left: 28%;
}

.eye-right{
  right: 28%;
  transform: skew(-10deg) scaleX(-1);
  .dark, .highlight{
    transform: scaleX(-1);
  }
  .highlight{
    left: 72%;
    //top: 18%;
  }
}

.pupil{
  width: 74%;
  height: 86%;
  border-radius: 20% 30% 50% 50% / 50% 50% 50% 50%;
  background: $eye;
  left: 12%;
  transform: skew(-10deg);
  box-shadow: 0px 0px 0 3px tint($black, 0%), inset 0px 0px 0 1px tint($black, 0%);
  top: 8%;
  overflow: hidden;
}

.dark{
  width: 70%;
  height: 78%;
  border-radius: 20% 30% 50% 50% / 50% 50% 50% 50%;
  background: shade($eye, 60%);
  left: 15%;
  
  &:before{
    position: absolute;
    content: ' ';
    width: 160%;
    height: 80%;
    background: shade($eye, 60%);
    transform: rotate(-30deg);
    top: -12%;
    left: -45%;
  }
}

.highlight{
  @include circle(30%, 40%);
  background: $eye-white;
  box-shadow: 0 0 0 2px shade($eye, 60%);
  top: 16%;
  left: -5%;
  
  &:before{
    position: absolute;
    content: ' ';
    @include circle(100%, 60%);
    background: $eye-white;
    box-shadow: 0 0 0 2px shade($eye, 60%);
    top: 20%;
    left: 260%;
    transform: rotate(20deg);
  }
  
  &:after{
    position: absolute;
    content: ' ';
    width: 10%;
    height: 60%;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 30px solid shade($eye-white, 0%);
    left: 120%;
    top: 60%;
    transform: rotate(5deg);
  }
}

.head{
  @include circle(70%, 70%);
  background: $skin;
  left: 15%;
  top: 25%;
  box-shadow: inset 100px 20px 0 -90px $hair, inset -120px 40px 0 -90px $hair, inset -30px 120px 0 -90px $hair, inset 110px -20px 0 -90px $hair-shade, inset -110px -20px 0 -90px $hair-shade, inset -68px -70px 0 -90px $hair-shade, inset 68px -70px 0  -90px $hair-shade, inset 62px -80px 30px -90px rgba(shade($skin, 30%), .8), inset -68px -80px 30px -90px rgba(shade($skin, 30%), .8);
  
  &:before{
    position: absolute;
    content: ' ';
    @include circle(101%, 101%);
    box-shadow: inset -26px 6px 0 -2px $hair-shade, inset 26px 6px 0 -2px $hair-shade;
    left: -.5%;
    top: -.5%;
  }
}

.hair-front{
  @include circle(70%, 90%);
  top: 22%;
  left: 15%;
  box-shadow: inset 125px -10px 0 -100px $hair, inset -150px -10px 0 -100px $hair, inset -60px 200px 0 -150px $hair, inset 130px 30px 0 -100px $hair, -10px -10px 0 0px $hair;
  
  &:before{
    position: absolute;
    content: ' ';
    @include circle(101%, 101%);
    box-shadow: inset 0 24px 0 -10px $hair;
    left: -.5%;
    top: -3%;
  }
}

.hairf1{
  @include circle(60%, 50%);
  top: 4%;
  left: -3%;
  box-shadow: inset 20px 30px 0 -22px tint($hair, 0%);
}

.hairf2{
  @include circle(70%, 94%);
  bottom: -2%;
  left: -14%;
  box-shadow: inset 20px -10px 0 -20px $hair-shade, inset 160px 20px 0 -120px $hair;
}

.hairf3{
  @include circle(120%, 110%);
  bottom: -10%;
  left: -10%;
  box-shadow: inset -60px -30px 0 -60px $hair-shade, inset -160px -40px 0 -120px $hair, inset -160px 30px 0 -120px $hair, inset 160px 40px 0 -120px $hair;
}

.hairf4{
  @include circle(120%, 110%);
  bottom: -10%;
  left: -10%;
  box-shadow: inset 20px -15px 0 -20px $hair-shade, inset 160px -40px 0 -120px $hair;
}

.hairf5{
  width: 26%;
  height: 24%;
  background: $hair;
  border-radius: 0 50% 0 50%;
  transform: skew(45deg) rotate(30deg);
  left: 26%;
  top: 10%;
  box-shadow: inset 2px -6px 0 -2px shade($hair, 10%), 0px 8px 4px -2px rgba(shade($skin, 60%), .3);
}

.hairf6{
  width: 36%;
  height: 28%;
  //background: $hair;
  border-radius: 20% 60% 0% 50%;
  transform: skew(30deg) rotate(40deg);
  left: 40%;
  top: 6%;
  box-shadow:  inset -14px 6px 0 -12px shade($hair, 10%), inset 0px 80px 0 -12px $hair, inset -6px 81px 0 -14px shade($hair, 10%), inset -10px 83px 5px -14px rgba(shade($skin, 60%), .3);
}

.nose{
  width: 8%;
  height: 8%;
  border-radius: 30% 60% 30% 20%;
  background: shade($skin, 20%);
  transform: rotate(-45deg);
  top: 72%;
  left: 46%;
  box-shadow: 5px -5px 10px rgba(shade($skin, 40%), .3)
}

.ear-left, .ear-right{
  width: 25%;
  height: 22%;
  border-radius: 0% 50%;
  background: shade($inner-ear, 10%);
  box-shadow: inset -10px 10px 0px -7px shade($hair, 20%), inset 10px -8px 0px -7px shade($hair, 20%), inset -10px 50px 0px -10px shade($hair, 10%), inset -12px 52px 0px -10px shade($hair, 20%), inset 0 0 0 5px shade($hair, 10%);
  top: 44%;
  transform: skew(30deg) rotate(20deg);
}

.ear-left{
  left: -3%;
}

.ear-right{
  right: -5%;
  transform: scaleX(-1) skew(30deg) rotate(20deg);
}

.inner-ear{
  width: 20%;
  height: 20%;
  border-radius: 0% 50%;
  background: shade($hair, 10%);
  box-shadow: 0px 0px 0px 5px shade($hair, 20%);
  top: 50%;
  transform: skew(30deg) rotate(-30deg);
  left: 50%;
  
  &:before{
    position: absolute;
    content: ' ';
    width: 90%;
    height: 90%;
    border-radius: 0% 50%;
    background: shade($hair, 10%);
    box-shadow: 0px 0px 0px 5px shade($hair, 20%);
    top: 90%;
    left: -140%;
    transform: rotate(-12deg);
  }
  &:after{
    position: absolute;
    content: ' ';
    width: 120%;
    height: 120%;
    border-radius: 0% 50%;
    background: shade($hair, 10%);
    box-shadow: 0px 0px 0px 5px shade($hair, 20%);
    top: 60%;
    left: -70%;
    transform: rotate(2deg);
  }
}

.mouth{
  width: 20%;
  height: 10%;
  //background: white;
  top: 82%;
  left: 38%;
  transform: rotate(10deg);
}

.lip{
  width: 60%;
  height: 30%;
  //background: white;
  border-radius: 10px 10px 0px 0px;
  left: 20%;
  
  &:before{
    position: absolute;
    content: ' ';
    width: 100%;
    height: 100%;
    bottom: -100%;
    //background: white;
    border-radius: 0 0 500% 80px;
    box-shadow: inset 0 -5px 0 -3px $black;
  }
  
  &:after{
    position: absolute;
    content: ' ';
    width: 30%;
    height: 50%;
    bottom: -100%;
    //background: white;
    border-radius: 0 0 500% 80px;
    box-shadow: inset 0 -5px 0 -4px $black;
    bottom: -170%;
    left: 40%;
    transform: rotate(-5deg)
  }
}

.teeth{
  width: 3%;
  height: 10%;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 10px solid shade($skin, 70%);
  top: 20%;
  left: 30%;
  
  &:before{
    position: absolute;
    content: ' ';
    width: 10%;
    height: 100%;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 10px solid white;
    left: -2px;
  }
}

.body{
  width: 70%;
  height: 30%;
  background: $clothes;
  border-radius: 70% 70% 0 0;
  top: 100%;
  left: 15%;
  transform: rotate(5deg);
  overflow: hidden;
  
  &:before{
    position: absolute;
    content: ' ';
    @include circle(60%, 60%);
    background: $skin;
    left: 20%;
    top: -20%;
  }
  
  &:after{
    position: absolute;
    content: ' ';
    width: 2%;
    height: 50%;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 40px solid $skin;
    left: 38%;
    bottom: -20%;
  }
}
            
          
!
999px
Loading ..................

Console