cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-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.

            
              <!--#DailyCSSImages - Day 4: Tiger --> 
<!--By Mark Liang-->

.container
  .body
  .head
    .head-part1
    .head-part2
    .head-part3
    .left-eye
    .right-eye
    .nose
    .nose-over
    .mouth
    .tooth
    .left-ear
    .right-ear
            
          
!
            
              $black: #383838
$light: #F2D15C
$normal: #EDB600
$shadow: #EB7D0C
$background: #6ACCEE
$container: #F1F2F4

body
  background: $background

.container
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  margin: auto
  background: $container
  width: 300px
  height: 300px
  border-radius: 100%
  overflow: hidden
  border: $black solid 10px
  z-index: 1
  
  .body
    width: 160px
    height: 300px
    background-color: $normal
    background-image:  linear-gradient(to right, $normal 0%, $normal 60%, transparent 60%, transparent 100%), linear-gradient(to bottom, transparent 40%, $black 40%, $black 43%, transparent 43%, transparent 46%, $black 46%, $black 49%, transparent 49%, transparent 52%, $black 52%, $black 55%, transparent 55%)
    
    left: 120px
    position: absolute
    top: 100px
    border-radius: 100px
    transform: rotate(-35deg)
    border: solid $black 10px
  .head-part1
    width: 170px
    height: 170px
    background-color: #F1F2F4
    left: 0
    right: 0
    margin: auto
    position: absolute
    top: 75px
    border-radius: 66px
    border: solid $black 10px
    transform: rotate(45deg)
  .head-part2
    width: 165px
    height: 165px
    background-color: $normal
    left: 0
    right: 0
    margin: auto
    position: absolute
    top: 60px
    border-radius: 100px
    border: solid $black 10px
  .head-part3
    width: 152px
    height: 152px
    background-color: $normal
    left: 0
    right: 0
    margin: auto
    position: absolute
    top: 90px
    border-radius: 45px
    transform: rotate(45deg)
    background-image: linear-gradient(to bottom, transparent 20%, $black 20%, $black 25%, transparent 25%, transparent 30%, $black 30%, $black 35%, transparent 35%, transparent 40%, $black 40%, $black 45%, transparent 45%), linear-gradient(to right, transparent 20%, $black 20%, $black 25%, transparent 25%, transparent 30%, $black 30%, $black 35%, transparent 35%, transparent 40%, $black 40%, $black 45%, transparent 45%)
    &::after
      content: ""
      width: 145px
      height: 145px
      top: -8px
      left: -8px
      background-color: $normal
      margin: auto
      position: absolute
      border-radius: 100%
      transform: rotate(-45deg)
      background-image: linear-gradient(to bottom, $black 0%, $black 5%, transparent 5%, transparent 9%, $black 9%, $black 14%, transparent 14%, transparent 18%, $black 18%, $black 23%, transparent 23%, $normal 23%), linear-gradient(to right, transparent 0%, transparent 47%, $black 47%, $black 53%, transparent 53%, transparent 100%)
  .left-eye
    width: 22px
    height: 22px
    background-color: $black
    border-radius: 100%
    top: 140px
    left: 96px
    position: absolute
    animation: blink 2s ease-in-out forwards
    animation-iteration-count: infinite
  .right-eye
    width: 22px
    height: 22px
    background-color: $black
    border-radius: 100%
    top: 140px
    right: 96px
    position: absolute
    animation: blink 2s ease-in-out forwards
    animation-iteration-count: infinite
  .nose
    width: 36px
    height: 36px
    background-color: $black
    border-radius: 8px
    top: 180px
    left: 0
    right: 0
    margin: auto
    position: absolute
    transform: rotate(45deg)
    z-index: 5
  .nose-over
    width: 45px
    height: 72px
    background-color: $shadow
    border-radius: 8px 8px 0 0
    top: 125px
    left: 0
    right: 0
    margin: auto
    position: absolute
    z-index: 10
  .mouth
    width: 40px
    height: 32px
    background-color: $light
    border-radius: 100%
    top: 195px
    left: 110px
    margin: auto
    position: absolute
    z-index: 3
    &::after
      content: ''
      width: 40px
      height: 32px
      background-color: $light
      border-radius: 100%
      top: 0px
      left: 40px
      margin: auto
      position: absolute
      z-index: 3
  .tooth
    width: 16px
    height: 16px
    background-color: $container
    top: 215px
    left: 121px
    margin: auto
    position: absolute
    transform: rotate(45deg)
    z-index: 2
    &::after
      content: ''
      width: 16px
      height: 16px
      background-color: $container
      top: -30px
      left: 30px
      margin: auto
      position: absolute
      z-index: 2
  .left-ear
    width: 46px
    height: 46px
    background-color: $shadow
    top: 65px
    left: 65px
    margin: auto
    border-radius: 18px
    border: solid $black 10px
    position: absolute
    transform: skewY(30deg)
    z-index: -1
    animation: move-left 2s ease-in-out forwards
    animation-iteration-count: infinite

  .right-ear
    width: 46px
    height: 46px
    background-color: $shadow
    top: 65px
    right: 65px
    margin: auto
    border-radius: 18px
    border: solid $black 10px
    position: absolute
    transform: skewY(-30deg)
    z-index: -1
    animation: move-right 2s ease-in-out forwards
    animation-iteration-count: infinite

    
  .head
    position: relative
    top: 0px
    animation: nod 2s ease-in-out forwards
    animation-iteration-count: infinite
    
@keyframes nod
  0%
    top: 0px
  10%
    top: -15px
  40%
    top: -15px
  90%
    top: 0px
  
@keyframes blink
  0%
    height: 22px
  20%
    margin-top: 0px
    height: 22px
  25%
    margin-top: 8px
    height: 6px
  30%
    margin-top: 0px
    height: 22px
  35%
    margin-top: 8px
    height: 6px
  40%
    margin-top: 0px
    height: 22px
  100%
    height: 22px
  
@keyframes move-left
  0%
    top: 65px
    left: 65px
  20%
    top: 65px
    left: 65px
  22%
    top: 70px
    left: 60px
  24%
    top: 65px
    left: 65px
  26%
    top: 70px
    left: 60px
  28%
    top: 65px
    left: 65px
@keyframes move-right
  0%
    top: 65px
    right: 65px
  30%
    top: 65px
    right: 65px
  32%
    top: 70px
    right: 60px
  34%
    top: 65px
    right: 65px
  36%
    top: 70px
    right: 60px
  38%
    top: 65px
    right: 65px
            
          
!
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