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 Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

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.

            
              <div class="container">
  <h1>Pure CSS3 Animated Flat <span>Coffee</span> Icons vol.1
    <span>Check on github - <a href="https://github.com/eisenfox/css-coffee-icons">https://github.com/eisenfox/css-coffee-icons</a></span>
  </h1>
  <div class="icons-container">
    
    <!-- icon #1 -->
    <div class="coffee-icon coffee-icon-1">
      <div class="coffee-top"></div>
      <div class="coffee-body"></div>
    </div>
    
    <!-- icon #2 -->
    <div class="coffee-icon coffee-icon-2">
      <div class="coffee-cup">
        <div class="cup-lifter"></div>
        <div class="coffee"></div>
        <div class="cream">
          <div class="cream-part cream-part-1"></div>
          <div class="cream-part cream-part-2"></div>
          <div class="cream-part cream-part-3"></div>
          <div class="choco">
            <div class="choco-item choco-item-1"></div>
            <div class="choco-item choco-item-2"></div>
            <div class="choco-item choco-item-3"></div>
            <div class="choco-item choco-item-4"></div>
            <div class="choco-item choco-item-5"></div>
            <div class="choco-item choco-item-6"></div>
            <div class="choco-item choco-item-7"></div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- icon #3 -->
    <div class="coffee-icon coffee-icon-3">
      <div class="choco-bars"></div>
      <div class="coffee-cup">
        <div class="cream"></div>
        <div class="coffee-cup-body">
          <div class="coffee">
            <div class="coffee-inner"></div>
          </div>
        </div>
        <div class="coffee-cup-lifter"></div>
        <div class="coffee-cup-leg"></div>
      </div>
    </div>
    
  </div>
</div>
            
          
!
            
              //variables
$bg-color: #EFB339; //icon container background-color
$accent-color: #870058; //accent bright color
$dark-coffee: #49362F; //dark coffee color
$light-coffee: #F4E9D7; //light coffee cup color
$light-coffee-2: #f4f4f4; //light coffee color
$middle-coffee: #987B53; //not very dark coffee color
$milk-coffee: #fff; //milk and cream color

//mixins
@mixin position-absolute ($position: absolute, $top: null, $left: null, $right: null, $bottom: null) {
  position: $position;
  top: $top;
  left: $left;
  right: $right;
  bottom: $bottom;
}

//common styles !!! You don't need them

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: $bg-color;
}

.container {
  width: 950px;
  margin: 30px auto 0px auto;
  text-align: center;
  
  h1 {
    font: {
      family: 'Raleway', sans-serif;
      size: 32px;
      weight: 400;
    }
    color: $dark-coffee;
    margin-bottom: 40px;
    
    span {
      font: {
        family: 'Pacifico', cursive;
      }
      color: $accent-color;
      
      &:nth-child(2) {
        font: {
          family: 'Raleway', sans-serif;
          size: 15px;
        }
        display: block;
        
        a {
          color: $accent-color;
        }
      }
    }
  }
}

.icons-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
}

//main styles !!! You need them

.coffee-icon {
  width: 172px;
  position: relative;
}

//coffee-1 styles

.coffee-icon-1 {
  height: 248px;
  
  //coffee top part
  @keyframes coffee-animation {
    0% {
      transform: rotate(0deg);
      top: 0;
    }
    
    40% {
      transform: rotate(0deg);
      top: 0;
    }
    
    60% {
      transform: rotate(-15deg);
      top: 2px;
    }
    
    100% {
      transform: rotate(-15deg);
      top: 2px;
    }
  }
  
  .coffee-top {
    @include position-absolute($top: 0, $left: 0);
    width: 100%;
    height: 59px;
    transform-origin: left bottom;
    animation: coffee-animation 2.2s linear 0s infinite alternate;
    
    //top of the coffee top part
    &:before {
      content: "";
      display: block;
      @include position-absolute($top: 0, $left: 0, $right: 0);
      width: 65%;
      margin: auto;
      height: 0px;
      border-bottom: 25px solid lighten($dark-coffee, 10%);
      border-right: 15px solid transparent;
      border-left: 15px solid transparent;
    }
    
    //bottom of the coffee top part
    &:after {
      content: "";
      display: block;
      @include position-absolute($bottom: 0, $left: 0);
      width: 100%;
      height: 34px;
      background-color: $dark-coffee;
      border-radius: 8px;
    }
  }
  
  //coffee body part
  .coffee-body {
    @include position-absolute($top: 59px, $left: 0);
    width: 100%;
    height: 189px;
    
    //main part of coffee body
    &:before {
      content: "";
      display: block;
      width: calc(87% - 60px);
      @include position-absolute($top: 0, $left: 0, $right: 0);
      margin: auto;
      border-bottom: 189px solid $light-coffee;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      transform: rotate(180deg);
    }
    
    //additional part of coffee body
    &:after {
      content: "";
      display: block;
      @include position-absolute($top: 33px, $left: 0, $right: 0);
      width: 73%;
      margin: auto;
      border-bottom: 93px solid $middle-coffee;
      border-left: 12px solid transparent;
      border-right: 12px solid transparent;
      transform: rotate(180deg);
    }
  }
}

//coffee-2 styles 
.coffee-icon-2 {
  height: 174px;
  
  //coffee cup styles
  .coffee-cup {
    width: 133px;
    height: 122px;
    @include position-absolute($bottom: 0px, $left: 0px);
    
    //cup body
    &:before {
      content: "";
      display: block;
      width: 103px;
      @include position-absolute($bottom: 21px, $left: 0px);
      height: 0px;
      border-bottom: 98px solid $light-coffee;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      transform: rotate(180deg);
      z-index: 2;
    }
    
    //cup bottom part
    &:after {
      content: "";
      display: block;
      @include position-absolute($bottom: 0px, $left: 15px);
      height: 21px;
      width: 103px;
      background-color: $light-coffee;
      border-radius: 0px 0px 5px 5px;
    }
    
    //cup lifter part
    .cup-lifter {
      width: 55px;
      height: 35px;
      @include position-absolute($top: 35px, $right: -23px);
      border-top: 10px solid $light-coffee;
      border-left: 10px solid $light-coffee;
      border-radius: 50%;
      transform: rotate(120deg); 
    }
    
    //coffee part
    .coffee {
      $border-width: 6px;
      $border-height: 25px;
      
      @include position-absolute($top: 15px, $left: 12px);
      width: 103px - $border-width;
      height: 0px;
      border-bottom: $border-height solid $light-coffee-2;
      border-left: $border-width solid transparent;
      border-right: $border-width solid transparent;
      transform: rotate(180deg);
      z-index: 4;
      
      &:before {
        content: "";
        display: block;
        @include position-absolute($top: -($border-height + 10), $left: 0);
        height: 0px;
        width: 103px - 3 * $border-width;
        border-bottom: ($border-height + 10) solid $middle-coffee; 
        border-left: $border-width solid transparent;
        border-right: $border-width solid transparent;
      }
      
      &:after {
        content: "";
        display: block;
        @include position-absolute($top: -($border-height * 2 + 10), $left: $border-width );
        height: 0px;
        width: 103px - 5 * $border-width;
        border-bottom: $border-height solid $dark-coffee; 
        border-left: $border-width solid transparent;
        border-right: $border-width solid transparent;
      }
    }
  }
  
  //cream part
  .cream {
    @include position-absolute($top: -55px, $left: 0, $right: 0);
    height: 55px;
    width: 111px;
    margin: auto;
    z-index: 1;

    .cream-part {

      &-1 {
        width: 100%;
        height: 38px;
        border-radius: 40px;
        background-color: $milk-coffee;
        @include position-absolute($top: 37px, $left: 0);
      }
      
      &-2 {
        height: 38px;
        width: 60%;
        @include position-absolute($top: 0, $left: 0, $right: 0);
        margin: auto;
        
        &:before {
          content: "";
          display: block;
          @include position-absolute($top: 20px, $right: 0);
          background-color: $milk-coffee;
          width: 70%;
          height: 50px;
          border-radius: 20px;
        }
        
        &:after {
          content: "";
          display: block;
          @include position-absolute($top: 15px, $left: 0);
          background-color: $milk-coffee;
          width: 80%;
          height: 60px;
          border-radius: 40px;
        }
      }
      
      @keyframes milk-animation {
        0% {
          transform: rotate(-171deg);
        }
        
        100% {
          transform: rotate(-165deg);
        }
      }
      
      &-3 {
        @include position-absolute($top: 0, $left: 0);
        width: 44px;
        border-top: 4px solid $milk-coffee;
        border-left: 21px solid $milk-coffee;
        height: 57px;
        border-radius: 50%;
        transform: rotate(-171deg);
        animation: milk-animation 0.9s linear 0s infinite alternate;
      }
    }
    
    //choco styles
    @keyframes choco-animation {
      0% {
        opacity: 0;
      }
      
      100% {
        opacity: 1;
      }
    }
    
    .choco {
      @include position-absolute($top: 0, $left: 0);
      width: 100%;
      height: 100%;
      
      .choco-item {
        width: 4px;
        height: 4px;
        background-color: $dark-coffee;
        border-radius: 50%;
        animation: choco-animation 0.9s linear infinite alternate;
        
        &-1 {
          @include position-absolute($top: 19px, $left: 42px);
          animation-delay: 0.1s;
        }
        
        &-2 {
          @include position-absolute($top: 27px, $left: 32px);
          animation-delay: 0.4s;
        }
        
        &-3 {
          @include position-absolute($top: 35px, $left: 43px);
          animation-delay: 0.8s;
        }
        
        &-4 {
          @include position-absolute($top: 40px, $left: 24px);
          animation-delay: 1.2s;
        }
        
        &-5 {
          @include position-absolute($top: 47px, $left: 34px);
          animation-delay: 1.6s;
        }
        
        &-6 {
          @include position-absolute($top: 51px, $left: 12px);
          animation-delay: 2.0s;
        }
        
        &-7 {
          @include position-absolute($top: 51px, $left: 50px);
          animation-delay: 2.4s;
        }
      }
    }
  }
}

//coffee-3 styles
.coffee-icon-3 {
  height: 328px;
  
  //coffee cup styles
  .coffee-cup {
    @include position-absolute($bottom: 0, $left: 0);
    height: 253px;
    width: 100%;
    
    //coffee cup leg styles
    .coffee-cup-leg {
      @include position-absolute($bottom: 0, $left: 0, $right: 0);
      margin: auto;
      width: 90px;
      height: 83px;
      
      //coffee cup leg bottom part
      &:before {
        content: "";
        display: block;
        width: 100%;
        height: 16px;
        background-color: $light-coffee;
        border-radius: 5px;
        @include position-absolute($bottom: 0, $left: 0);
      }
      
      //coffee cup leg top part
      &:after {
        content: "";
        display: block;
        width: 23px;
        height: calc(100% - 16px);
        @include position-absolute($top: 0, $left: 0, $right: 0);
        margin: auto;
        background-color: $light-coffee;
      }
    }
    
    //coffee cup body styles
    .coffee-cup-body {
      @include position-absolute($top: 0, $left: 0, $right: 0);
      margin: auto;
      width: 75%;
      height: 171px;
      background-color: $light-coffee;
      border-radius: 8px 8px 50% 50%;
      z-index: 5;
    }
    
    //coffee cup lifter styles
    .coffee-cup-lifter {
      @include position-absolute($top: 30px, $right: 0);
      width: 38px;
      height: 75px;
      border-top: 9px solid $light-coffee;
      border-right: 8px solid $light-coffee;
      border-radius: 50%;
      transform: rotate(22deg);
      z-index: 4;
    }
    
    //coffee styles
    .coffee {
      $coffee-layer-height: 25px;
      
      @include position-absolute($top: 0, $left: 0);
      width: 100%;
      height: 100%;
      z-index: 6;
      
      //top espresso layer
      &:before {
        content: "";
        display: block;
        width: calc(90% - 1px);
        height: $coffee-layer-height * 2;
        @include position-absolute($top: 36px, $left: 0, $right: 0);
        margin: auto;
        background-color: $dark-coffee;
      }
      
      //top milk layer
      &:after {
        content: "";
        display: block;
        width: calc(90% - 2px);
        height: $coffee-layer-height;
        @include position-absolute($top: 11px, $left: 0, $right: 0);
        margin: auto;
        background-color: $milk-coffee;
        border-radius: 5px 5px 0px 0px;
      }
      
      .coffee-inner {
        width: 90%;
        height: 100%;
        @include position-absolute($bottom: 10px, $left: 0, $right: 0);
        margin: auto;
        border-radius: 0px 0px 50% 50%;
        overflow: hidden;
        
        //bottom espresso layer
        &:before {
          content: "";
          display: block;
          width: 100%;
          height: $coffee-layer-height;
          background-color: $dark-coffee;
          @include position-absolute($bottom: 0, $left: 0);
        }
        
        //bottom espresso and milk layer
        &:after {
          content: "";
          display: block;
          width: 100%;
          height: $coffee-layer-height * 2;
          background-color: $middle-coffee;
          @include position-absolute($bottom: $coffee-layer-height, $left: 0);
        }
      }
    }
    
    //cream styles
    .cream {
      width: 67%;
      height: 60px;
      background-color: $milk-coffee;
      z-index: 2;
      @include position-absolute($top: -20px, $left: 0, $right: 0);
      margin: auto;
      border-radius: 50%;
      
      &:before {
        content: "";
        display: block;
        @include position-absolute($top: -10px, $left: 0, $right: 0);
        width: 75%;
        height: 50px;
        background-color: $milk-coffee;
        margin: auto;
        border-radius: 50px;
      }
      
      &:after {
        content: "";
        display: block;
        @include position-absolute($top: -28px, $left: -38px, $right: 0);
        margin: auto; 
        width: 44px;
        height: 33px;
        border-left: 27px solid $milk-coffee;
        border-radius: 50%;
        transform: rotate(194deg);
      }
    }
  }
  
  //choco bars styles
  @keyframes choco-bar-1 {
    0% {
      transform: rotate(15deg);
    }
    
    100% {
      transform: rotate(20deg);
    }
  }
  
  @keyframes choco-bar-2 {
    0% {
      transform: rotate(35deg);
    }
    
    100% {
      transform: rotate(30deg);
    }
  }
  
  .choco-bars {
    @include position-absolute($top: 0px, $right: 35px);
    z-index: 1;
    height: 80px;
    width: 40px;
    
    //choco-bar styles
    &:before,
    &:after {
      content: "";
      display: block;
      width: 15px;
      height: 100%;
      background-color: $dark-coffee;
      border-radius: 30px;
    }
    
    &:before {
      @include position-absolute($top: 0px, $left: 0);
      transform: rotate(15deg);
      animation: choco-bar-1 1s linear 0s infinite alternate;
    }
    
    &:after {
      @include position-absolute($top: 10px, $right: 5px);
      transform: rotate(35deg);
      animation: choco-bar-2 1s linear 0s infinite alternate;
    }
  }
}
            
          
!
            
              // check youtube "Let's code" and code with me!
// https://youtu.be/aLFoo9rqx5A - icon #1
// youtu.be/voZLRDKk5DE  - icon #2
// youtu.be/F6isGO2knIY - icon#3
// github - https://github.com/eisenfox/css-coffee-icons
            
          
!
999px
Loading ..................

Console