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.

            
              .squirrel
    .s1
    .s2
    .s3
    .s4
    .s5
    .s6
    .s7
    .s8
    .s9
    .s10
    .s11
    .s12
    .mask
    .shadow
            
          
!
            
              div {
  
  &.squirrel {
    width: 400px;
    height: 300px;
    position: absolute;
    margin-left: -200px;
    margin-top: -150px;
    top: 50%;
    left: 50%;
  }
  
    &.s1 {
        height: 108px;
        width: 72px;
        border-radius: 0 140px 72px 0;
        -moz-border-radius: 0 140px 72px 0;
        -webkit-border-radius: 0 140px 72px 0;
        background: #e78a3a;
        z-index: 100;
        position: absolute;
        top: 150px;
        left: 128px;
    }
    &.s2 {
        height: 72px;
        width: 72px;
        border-radius: 100%;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        background: #8e361e;
        z-index: 101;
        position: absolute;
        top: 186px;
        left: 128px;
        &:before {
            height: 36px;
            width: 36px;
            border-radius: 100%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            background: #e78a3a;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -18px;
            margin-left: -18px;
            content: '';
        }
        &:after {
            height: 18px;
            width: 18px;
            border-radius: 100%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            background: #cc6b27;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -9px;
            margin-left: -9px;
            content: '';
        }
    }
    &.s3 {
        height: 24px;
        width: 24px;
        background: #cc6b27;
        position: absolute;
        top: 150px;
        left: 104px;
        &:before {
            width: 24px;
            height: 24px;
            background: #8e361e;
            border-radius: 0 0 24px 0;
            -moz-border-radius: 0 0 24px 0;
            -webkit-border-radius: 0 0 24px 0;
            position: absolute;
            top: 24px;
            content: '';
        }
        &:after {
            width: 24px;
            height: 24px;
            background: #e78a3a;
            border-radius: 0 0 0 24px;
            -moz-border-radius: 0 0 0 24px;
            -webkit-border-radius: 0 0 0 24px;
            position: absolute;
            top: 24px;
            left: -24px;
            content: '';
        }
    }
    &.s4 {
        height: 24px;
        width: 24px;
        background: #e78c3b;
        position: absolute;
        z-index: -1;
        content: '';
        top: 24px;
        position: absolute;
        z-index: 101;
        top: 126px;
        left: 80px;
        &:before {
            height: 48px;
            width: 48px;
            border-radius: 100%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            background: #cc6b27;
            position: absolute;
            z-index: 101;
            top: -24px;
            left: 0;
            content: '';
        }
        &:after {
            height: 24px;
            width: 24px;
            background: #cc6b27;
            position: absolute;
            z-index: -1;
            content: '';
            position: absolute;
            z-index: 101;
            left: 24px;
            top: -24px;
        }
    }
    &.s5 {
        height: 24px;
        width: 24px;
        background: #8e361e;
        position: absolute;
        z-index: 101;
        content: '';
        top: 24px;
        position: absolute;
        z-index: -1;
        top: 126px;
        left: 104px;
        &:before {
            height: 24px;
            width: 24px;
            background: #8e361e;
            position: absolute;
            z-index: 90;
            content: '';
            border-radius: 100%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            position: absolute;
            z-index: 101;
            left: 0;
            top: -36px;
        }
        &:after {
            height: 12px;
            width: 12px;
            background: #e78a3a;
            position: absolute;
            z-index: 90;
            content: '';
            border-radius: 100%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            position: absolute;
            z-index: 101;
            left: 6px;
            top: -30px;
        }
    }
    &.s6 {
        height: 12px;
        width: 24px;
        border-radius: 0 0 24px 24px;
        -moz-border-radius: 0 0 24px 24px;
        -webkit-border-radius: 0 0 24px 24px;
        background: #cc6b27;
        z-index: 101;
        position: absolute;
        top: 174px;
        left: 56px;
    }
    &.s7 {
        width: 72px;
        height: 72px;
        background: #cc6b27;
        z-index: 101;
        position: absolute;
        top: 186px;
        left: 200px;
        border-radius: 0 0 72px 0;
        -moz-border-radius: 0 0 72px 0;
        -webkit-border-radius: 0 0 72px 0;
        &:before {
            width: 72px;
            height: 84px;
            background: #cc6b27;
            z-index: 101;
            position: absolute;
            top: -84px;
            left: 0;
            content: '';
        }
        &:after {
            width: 72px;
            height: 72px;
            background: #cc6b27;
            z-index: 101;
            position: absolute;
            top: -156px;
            left: 0;
            border-radius: 72px 0 0 0;
            -moz-border-radius: 72px 0 0 0;
            -webkit-border-radius: 72px 0 0 0;
            content: '';
        }
    }
    &.s8 {
        width: 144px;
        height: 144px;
        background: #cc6b27;
        z-index: 99;
        position: absolute;
        top: 30px;
        left: 200px;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        &:before {
            width: 96px;
            height: 96px;
            background: #e78a3a;
            z-index: 99;
            position: absolute;
            top: 24px;
            left: 24px;
            border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            content: '';
        }
    }
    &.s9 {
        width: 46px;
        height: 46px;
        background: #cc6b27;
        z-index: 100;
        position: absolute;
        top: 80px;
        left: 248px;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        content: '';
    }
    &.s10 {
        width: 0;
        height: 0;
        z-index: 102;
        position: absolute;
        top: 102px;
        left: 200px;
        border-right: 12px solid transparent;
        border-top: 12px solid #e68939;
        border-left: 12px solid #e68939;
        border-bottom: 12px solid transparent;
        &:before {
            width: 0;
            height: 0;
            z-index: 102;
            position: absolute;
            top: 12px;
            left: -12px;
            border-right: 12px solid transparent;
            border-top: 12px solid #e68939;
            border-left: 12px solid #e68939;
            border-bottom: 12px solid transparent;
            content: '';
        }
        &:after {
            width: 0;
            height: 0;
            z-index: 102;
            position: absolute;
            top: 36px;
            left: -12px;
            border-right: 12px solid transparent;
            border-top: 12px solid #e68939;
            border-left: 12px solid #e68939;
            border-bottom: 12px solid transparent;
            content: '';
        }
    }
    &.s11 {
        height: 16px;
        width: 16px;
        background: #fff;
        position: absolute;
        z-index: 101;
        top: 24px;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        position: absolute;
        z-index: 101;
        top: 118px;
        left: 96px;
        &:before {
            height: 8px;
            width: 8px;
            background: #8e361e;
            position: absolute;
            z-index: 101;
            top: 24px;
            border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            position: absolute;
            z-index: 101;
            top: 4px;
            left: 4px;
            content: '';
            // I have no idea why I don't
            // make use of Mixins.
            -webkit-animation: wink;
            -moz-animation: wink;
            -ms-animation: wink;
            -o-animation: wink;
            animation-name: wink;
            -webkit-animation-duration: 2s;
            -moz-animation-duration: 2s;
            -ms-animation-duration: 2s;
            -o-animation-duration: 2s;
            animation-duration: 2s;
            -webkit-animation-fill-mode: both;
            -moz-animation-fill-mode: both;
            -ms-animation-fill-mode: both;
            -o-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            -ms-animation-iteration-count: infinite;
            -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }
    }
    &.s12 {
        height: 24px;
        width: 24px;
        background: #cc6b27;
        position: absolute;
        top: 234px;
        left: 104px;
        border-radius: 24px 0 0 0;
        -moz-border-radius: 24px 0 0 0;
        -webkit-border-radius: 24px 0 0 0;
    }
    &.mask {
        width: 72px;
        height: 228px;
        background: #8e361e;
        z-index: 101;
        position: absolute;
        top: 30px;
        left: 200px;
        -webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/16902/mask_1.png);
        -webkit-mask-repeat: none;
    }
    &.shadow {
        width: 300px;
        height: 76px;
        position: absolute;
        top: 222px;
        left: 20px;
        opacity: 0.4;
        z-index:-1;
        -webkit-transform:rotateX(-280deg);
        background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.34) 0%, rgba(0,0,0,0) 61%, rgba(0,0,0,0) 100%);
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.34)), color-stop(61%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0)));
        background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 61%,rgba(0,0,0,0) 100%);
        background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 61%,rgba(0,0,0,0) 100%);
        background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 61%,rgba(0,0,0,0) 100%);
        background: radial-gradient(ellipse at center,rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 61%,rgba(0,0,0,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57000000', endColorstr='#00000000',GradientType=1 );
    }
}

[class*="s"]:not(.s11),
[class*="s"]:before,
[class*="s"]:after {} 

body {
    background: #27ae60;
}

@-webkit-keyframes wink {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: rotateX(0);
    }
    40% {
        -webkit-transform: rotateX(180deg);
    }
    60% {
        -webkit-transform: rotateX(0);
    }
}
@-moz-keyframes wink {
    0%, 20%, 50%, 80%, 100% {
        -moz-transform: rotateX(0);
    }
    40% {
        -moz-transform: rotateX(180deg);
    }
    60% {
        -moz-transform: rotateX(0);
    }
}
@-ms-keyframes wink {
    0%, 20%, 50%, 80%, 100% {
        -ms-transform: rotateX(0);
    }
    40% {
        -ms-transform: rotateX(180deg);
    }
    60% {
        -ms-transform: rotateX(0);
    }
}
@-o-keyframes wink {
    0%, 20%, 50%, 80%, 100% {
        -o-transform: rotateX(0);
    }
    40% {
        -o-transform: rotateX(180deg);
    }
    60% {
        -o-transform: rotateX(0);
    }
}
@keyframes wink {
    0%, 20%, 50%, 80%, 100% {
        transform: rotateX(0);
    }
    40% {
        transform: rotateX(180deg);
    }
    60% {
        transform: rotateX(0);
    }
}
            
          
!
            
              /*
  Inspired by Ty Wilkins @ Dribbble.
  http://dribbble.com/shots/1379543-Squirrel
  My webKit mascot! :) 
*/
            
          
!
999px
Loading ..................

Console