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.

            
              .fox-container
  .fox-head
    .nose
    .cheek-left
    .cheek-right
    .ear-left
    .ear-right
    .eye-left
    .eye-right
  .fox-chest
  .fox-back
  .fox-legs
  .fox-ass
  .fox-tail-1
  .fox-tail-2
  .fox-tail-3
    .pattern-1
    .pattern-2
    .pattern-3
            
          
!
            
              @import 'nib'
html
  background-color whitesmoke
.fox-container
  relative top left
  width 300px
  height 300px
  margin 20px auto
.fox-head
  absolute top 22% left 41%
  width 18%
  height @width
  background-color #C22129
.fox-chest
  absolute top 40% left 41%
  width 18%
  height @width
  background-color #EE3B37
  &::after
    content ""
    absolute top left
    width 100% 
    height 100%
    background-color #FAA71B
    border-radius 0 0 0 100%
.fox-back
  absolute top 40% left 59%
  width 18%
  height @width
  background-color #C22129
  border-radius 0 100% 0 0 
.fox-legs
  absolute top 58% left 41%
  width 18%
  height @width
  &::after
    content ""
    absolute top left 
    width 33.33%
    height 100%
    background-color #231F20
  &::before
    content ""
    absolute top right
    width 33.33%
    height 100%
    background-color #231F20
.fox-ass
  absolute top 58% left 59%
  width 18%
  height @width
  background-color #C22129
  border-radius 50% 50% 0 50%
  &::before
    content ""
    absolute top left
    width 100%
    height 100%
    background-color #F5832B
    border-radius 50%
  &::after
    content ""
    absolute top 25% left 25% 
    width 50%
    height 50%
    background-color #EE3B37
    border-radius 50%
.fox-tail-1
  absolute top 76% left 59%
  width 18%
  height 18%
  background-color #EE3B37
  border-radius 0 0 100% 0
.fox-tail-2
  absolute top 76% left 41%
  overflow hidden
  width 18%
  height 18%
  background-color #EE3B37
  &::before
    content ""
    absolute bottom left
    width 100%
    height 143%
    background #C22129
    transform-origin 0 100%
    transform rotate(45deg)
  &::after
    content ""
    absolute bottom right
    width 50%
    height 50%
    background #EE3B37
    clip-path polygon(0 0, 0% 100%, 100% 0)
.fox-tail-3
  absolute top 76% left 23%
  overflow hidden
  width 18%
  height 18%
  background-color #F5832B
  border-radius 100% 0 0 0
  &::before
    content ""
    absolute bottom left
    width 100%
    height 143%
    background #FAA71B
    transform-origin 0 100%
    transform rotate(45deg)
.pattern-1
  absolute bottom right
  width 33.33%
  height 33.33%
  background #F5832B
  clip-path polygon(0 0, 0% 100%, 100% 0)
.pattern-2
  absolute bottom 33.33% right
  width 33.33%
  height 33.33%
  background #F5832B
  clip-path polygon(0 0, 0% 100%, 100% 0)
.pattern-3
  absolute bottom right 33.33%
  width 33.33%
  height 33.33%
  background #F5832B
  clip-path polygon(0 0, 0% 100%, 100% 0)
.nose
  absolute bottom left 33.33%
  width 33.33%
  height 33.33%
  background-color #231F20
  clip-path polygon(50% 15%, 0% 100%, 100% 100%)
.cheek-left
  absolute top left 
  width 33.33%
  height 100%
  background-color #EE3B37
  &::after
    content ""
    absolute bottom left
    width 100%
    height 33.33%
    background-color #F5832B
    border-radius 0 100% 0 0 
.cheek-right
  absolute top right 
  width 33.33%
  height 100%
  background-color #EE3B37
  &::after
    content ""
    absolute bottom right
    width 100%
    height 33.33%
    background-color #F5832B
    border-radius 100% 0 0 0 
.ear-left
  absolute top -33.33% left
  width 33.33%
  height 33.33%
  background-color #F5832B
  border-radius 0 100% 0 0 
  &::after
    content ""
    absolute bottom left
    width 50%
    height 50%
    background-color #231F20
    border-radius 0 100% 0 0 
.ear-right
  absolute top -33.33% right
  width 33.33%
  height 33.33%
  background-color #F5832B
  border-radius 100% 0 0 0
  &::after
    content ""
    absolute bottom right
    width 50%
    height 50%
    background-color #231F20
    border-radius 100% 0 0 0
.eye-left
  absolute top 33.33% left
  width 33.33%
  height @width
  background-color #231F20
  border-radius 50%
  clip-path polygon(0 0, 100% 0, 100% 50%, 0 50%)
  &::after
    content ""
    absolute top 33.33% left 33.33%
    width 33.33%
    height @width
    background-color #EE3B37
    border-radius 50%
.eye-right
  absolute top 33.33% right
  width 33.33%
  height @width
  background-color #231F20
  border-radius 50%
  clip-path polygon(0 0, 100% 0, 100% 50%, 0 50%)
  &::after
    content ""
    absolute top 33.33% right 33.33%
    width 33.33%
    height @width
    background-color #EE3B37
    border-radius 50%
            
          
!
            
              // Pure CSS edition of Ty Wilkins' "Fox"  (https://dribbble.com/shots/955874-Fox)

            
          
!
999px
Loading ..................

Console