CSS Coffee Machine (Bio recharger)

css-coffee-machine-bio-recharger.markdown

CSS Coffee Machine (Bio recharger)

I love coffee. Do you? Inspired by: http://drbl.in/hKAm. I used box-reflect for the reflection http://caniuse.com/#feat=css-reflections

A Pen by Stan Williams on CodePen.

License.

index.html

<div class="machine">
  <div class="machine-top">
    <div class="machine-middle"></div>
  </div>
  <div class="machine-bottom"></div>
  <div class="hand"></div>
  <div class="left-hand"></div>
  <div class="coffee"></div>
</div>

script.js

/*
Javascript 404 Error
Inspired by: http://drbl.in/hKAm
*/

style.scss

$green: #00bc9e;
$blue: #202e3a;

@mixin absolute {
  position: absolute;
}

@mixin center-x {
  left: 50%;
  transform: translateX(-50%);
}

*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #34495c;
}

.machine {
  position: relative;
  width: 191px;
  height: 311px;
  //outline: 1px solid rgba(255,255,255,0.3);
  //outline-offset: 2px;
  -webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.4) 0%, transparent 50%, transparent 100%);
  transform: scale(.75);
}

.machine-top {
  @include absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  width: 119px;
  height: 164px;
  background: linear-gradient($green, $green 20%, #008e77 20%, #008e77 22%, $green 22%, $green 62%, #008e77 62%, #008e77 64%, $green 64%);
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  
  &:before {
    content: "";
    @include absolute;
    left: 50%;
    top: -10px;
    transform: translateX(-50%);
    width: 45px;
    height: 10px;
    background: linear-gradient(to right, #008e77 15%, #40aa99 15%, #40aa99 45%, #008e77 45%, #008e77 85%, #00806b 85%, #00806b);
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
  }
  
  &:after {
    content: "";
    @include absolute;
    width: 100%;
    height: 100%;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    background: linear-gradient(to right, transparent, transparent 8%, rgba(255,255,255,.2) 8%, rgba(255,255,255,.2) 22%, transparent 22%, transparent 88%, transparentize(#008e77,.5) 88%);
  }
}

.machine-middle {
  @include absolute;
  bottom: -8px;
  width: 100%;
  height: 8px;
  background: $blue;
  border-bottom-right-radius: 35px;
  border-bottom-left-radius: 35px;
  
  &:after {
    content: "";
    @include absolute;
    left: 10px;
    bottom: -18px;
    width: 142px;
    height: 18px;
    background: linear-gradient(to right, $blue, $blue 3%, #414d57 3%, #414d57 15%, $blue 15%, $blue);
    border-top-right-radius: 6px;
  }
  
  &:before {
    content: "";
    @include absolute;
    left: 52%;
    transform: translateX(-50%);
    bottom: -35px;
    width: 98px;
    height: 10px;
    background: linear-gradient(to right, $blue, $blue 3%, #414d57 3%, #414d57 15%, $blue 15%, $blue);
  }
}

.machine-bottom {
  @include absolute;
  @include center-x;
  bottom: 20px;
  z-index: 10;
  width: 121px;
  height: 78px;
  border-radius: 15px;
  border: 5px solid #d5d5d5;
  border-top-color: transparent;
  
  &:before {
    content: "";
    @include absolute;
    @include center-x;
    top: -1px;
    width: 110%;
    height: 10px;
    background: linear-gradient(to right, $blue, $blue 3%, #414d57 3%, #414d57 15%, $blue 15%, $blue);
  }
  
  &:after {
    content: "";
    @include absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 59px;
    background: linear-gradient(to right, transparent, transparent 10%, rgba(255,255,255,.3) 10%,  rgba(255,255,255,.3) 25%,  rgba(255,255,255,.1) 25%,  rgba(255,255,255,.1) 85%,  rgba(0,0,0,.1) 85%, rgba(0,0,0,.1));
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
}

.hand {
  @include absolute;
  right: 7px;
  bottom: 25px;
  z-index: -1;
  width: 38px;
  height: 69px;
  border-radius: 18px;
  border: 10px solid #202e3a;
  border-left-color: transparent;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  
  &:after {
      content: "";
      @include absolute;
      left: -95px;
      top: 22px;
      width: 17px;
      height: 1px;
      background: transparentize(#b3b3b3,.3);
      color: #b3b3b3;
      box-shadow: 0 5px 0 0 currentColor, 0 10px 0 0 currentColor, 0 15px 0 0 currentColor, 0 20px 0 0 currentColor;
  }
  
  &:before {
    content: "";
    @include absolute;
    left: -105px;
    bottom: -20px;
    width: 93px;
    height: 7px;
    background: linear-gradient(to right, $blue, $blue 3%, #414d57 3%, #414d57 15%, $blue 15%, $blue);
  }
}

.left-hand {
  @include absolute;
  top: 125px;
  z-index: -1;
  width: 45px;
  height: 184px;
  border-radius: 22px;
  border: 8px solid #d5d5d5;
  border-right-color: transparent;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  
  &:after {
    content: "";
    @include absolute;
    top: -14px;
    left: 21px;
    width: 7px;
    height: 23px;
    background: #008e77;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }
  
  &:before {
    content: "";
    @include absolute;
    top: -11px;
    left: 13px;
    width: 8px;
    height: 15px;
    background: linear-gradient(#00bc9e, #00bc9e 60%, #40cdb6 60%, #40cdb6);
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }
}

.coffee {
  @include absolute;
  @include center-x;
  bottom: 20px;
  z-index: 1;
  width: 121px;
  height: 20px;
  border-radius: 0 0 15px 15px;
  background: #393434;
  
  &:after {
    content: "";
    @include absolute;
    left: -11px;
    bottom: -22px;
    width: 144px;
    height: 16px;
    background: linear-gradient(to right, #00bc9e, #00bc9e 3%, #40cdb6 3%, #40cdb6 15%, #00bc9e 15%, #00bc9e);
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom: 2px solid #00a98e;
  }
  
  &:before {
    content: "";
    @include absolute;
    left: 54px;
    top: -41px;
    width: 5px;
    height: 4px;
    background: #393434;
    border-radius: 50%;
    box-shadow: 3px 10px 0 1px #393434;
    animation: animatecoffee 2s linear infinite;
  }
}

@keyframes animatecoffee {
  to {
    top: 0;
  }
}

.test {
  margin: 50px;
  width: 20px;
  height: 120px;
  border: 6px solid red;
  border-radius: 15px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-color: transparent;
}

Preview or fork: https://codepen.io/Stanssongs/pen/MWwJBbQ