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 1: Bear Cub --> 
<!--By Mark Liang-->

.container 
  .bear
  .left-ear
  .right-ear
  .left-eye
  .right-eye
  .nose
  .mouth
  .hand
            
          
!
            
              $dark-brown: #775D46
$light-brown: #C5B697
$black: #383838

body
  background: #7E9CC6

.container
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  margin: auto
  background: #DDE8F9
  width: 300px
  height: 300px
  border-radius: 100%
  overflow: hidden
  border: $black solid 10px
  
  .bear
    border: $black solid 10px
    background: $dark-brown
    width: 176px
    height: 300px
    z-index: 10
    position: absolute
    top: 150px
    left: 0
    right: 0
    bottom: 0
    margin: auto
    border-radius: 110px
    
  .left-ear
    border: $black solid 10px
    position: absolute
    width: 42px
    height: 42px
    background-color: $light-brown
    border-radius: 100%
    top: 58px
    left: 50px
  .right-ear
    border: $black solid 10px
    position: absolute
    width: 42px
    height: 42px
    background-color: $light-brown
    border-radius: 100%
    top: 58px
    right: 50px
    animation: wiggle 2s ease-in-out
    animation-iteration-count: infinite
  .left-eye
    position: absolute
    width: 22px
    height: 22px
    background-color: $black
    border-radius: 100%
    top: 135px
    left: 96px
    z-index: 10
    animation: blink 2s ease-in-out forwards
    animation-iteration-count: infinite
  .right-eye
    position: absolute
    width: 22px
    height: 22px
    background-color: $black
    border-radius: 100%
    top: 135px
    right: 96px
    z-index: 10
    animation: blink 2s ease-in-out forwards
    animation-iteration-count: infinite

  .nose
    position: absolute
    width: 100px
    height: 80px
    background-color: $light-brown
    border-radius: 100%
    top: 150px
    left: 0px
    right: 0px
    margin: auto
    z-index: 10
    
    &::before
      content: ''
      background-color: $black
      width: 36px
      height: 30px
      display: block
      border-radius: 100%
      left: 0
      right: 0
      margin: auto
      margin-top: 8px
  .mouth
    width: 55px
    height: 15px
    border-bottom-left-radius: 20px
    border-bottom-right-radius: 20px
    border: 10px solid $black
    border-top: 0
    position: absolute
    top: 192px
    z-index: 10
    left: 0
    right: 0
    margin: auto
    -webkit-box-sizing: border-box
    -moz-box-sizing: border-box
    box-sizing: border-box
    
    &::before
      content: ''
      width: 10px
      height: 22px
      background-color: $black
      display: block
      left: 0
      right: 0
      margin: auto
      margin-top: -10px
      
  .hand
    border: $black solid 10px
    z-index: 120
    background: #775D46
    background-image: radial-gradient(circle at 10px 25px, $light-brown 4px, transparent 4px ),radial-gradient(circle at 20px 18px, $light-brown 4px, transparent 4px ),radial-gradient(circle at 32px 18px, $light-brown 4px, transparent 4px ),radial-gradient(circle at 42px 25px, $light-brown 4px, transparent 4px ),radial-gradient(circle at 26px 40px, $light-brown 12px, transparent 12px )
    width: 51px
    height: 150px
    position: absolute
    top: 150px
    left: 0
    border-radius: 100px
    animation: move .6s ease-in-out forwards
    animation-iteration-count: infinite

@keyframes move
  0%
    top: 170px
  35%
    top: 150px
  100%
    top: 170px

@keyframes blink
  0%
    height: 22px
  10%
    margin-top: 8px
    height: 6px
  30%
    margin-top: 0px
    height: 22px
  100%
    height: 22px

@keyframes wiggle
  0%
    top: 58px
    right: 50px
  10%
    top: 63px
    right: 45px
  20%
    top: 58px
    right: 50px
  30%
    top: 63px
    right: 45px
  50%
    top: 58px
    right: 50px
            
          
!
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