Deployotron

dabblet.css

/**
 * Deployotron
 * original art: @mrdiec
 * code: @catharsis
 */

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body { margin: 10em 15em; }

.robo {
  position: relative;
}

.head, .eye, .content {
  border: 1px solid #000;
  border-radius: 3px;
  box-shadow: inset 0 0 3px rgba(0,0,0,.3);
}
.head {
  background: #eee;
  height: 110px;
  position: relative;
  width: 250px;
}
.eye-left, .eye-right {
  background: #fff;
  height: 55px;
  position: absolute; top: 12px;
  width: 50px;
}
  .eye-left { left: 40px; }
  .eye-right { right: 40px; }
.eye-left i, .eye-right i {
  background: #77868d;
  display: block;
  height: 22px;
  position: absolute; bottom: 0;
  width: 28px;
}
  .eye-left i { border-bottom-right-radius: 2px; right: 0; }
  .eye-right i { border-bottom-left-radius: 2px; left: 0; }
.eye-left i:before, .eye-right i:before {
  background: #77868d;
  content: "";
  height: 20px;
  position: absolute; top: -15px;
  width: 18px;
}
  .eye-left i:before { right: 0; }
  .eye-right i:before { left: 0; }

.neck, .neck:after {
  background-color: #eee;
  border: 1px solid #000;
  border-radius: 0 0 7px 7px;
  height: 10px;
  position: absolute;
}
  .neck {
    display: block;
    left: 85px; bottom: -10px;
    width: 80px;
  }
  .neck:after {
    content: "";
    left: 8px; bottom: -12px;
    width: 60px;
  }

.content {
  background: #d5d5d5;
  height: 145px;
  position: relative; left: -25px; top: 20px;
  width: 300px;
}
  .content:before {
    background: #fff;
    border-left: 1px solid #000;
    content: "";
    height: 145px;
    position: absolute; right: -18px; top: -1px;
    width: 30px;
    z-index: 2;
    
    -webkit-transform: skew(10deg);
       -moz-transform: skew(10deg);
         -o-transform: skew(10deg);
            transform: skew(10deg);
  }
  .content:after {
    background: #fff;
    border-right: 1px solid #000;
    content: "";
    height: 145px;
    position: absolute; left: -18px; top: -1px;
    width: 30px;
    z-index: 2;
    
    -webkit-transform: skew(-10deg);
       -moz-transform: skew(-10deg);
         -o-transform: skew(-10deg);
            transform: skew(-10deg);
  }
.medallion {
  height: 40px;
  position: relative; left: 90px;
  width: 120px;
  z-index: 3;
}
  .pyramid, .pyramid:before, .pyramid:after {
    background: #666;
    box-shadow: inset 0 0 3px rgba(0,0,0,.6);
    display: block;
    height: 10px;
    position: absolute;
    width: 10px;
    z-index: 4;
  }
  .pyramid-top {
    left: 55px;
  }
  .pyramid-top:before {
    content: "";
    left: -10px; top: 10px;
  }
  .pyramid-top:after {
    content: "";
    left: 10px; top: 10px;
  }
  .pyramid-bottom {
    left: 35px; top: 20px;
  }
  .pyramid-bottom:before {
    content: "";
    left: 20px; top: -3px;
  }
  .pyramid-bottom:after {
    content: "";
    left: 40px;
  }
.circles, .circles:before, .circles:after {
  background: #45b3da;
  border-radius: 5px;
  box-shadow: inset 0 0 3px rgba(0,0,0,.6);
  display: block;
  height: 10px;
  position: absolute; left: 15px; top: 23px;
  width: 10px;
  z-index: 3;
}
  .circles:before {
    content: "";
    position: absolute; left: 40px; top: 0;
  }
  .circles:after {
    content: "";
    position: absolute; left: 80px; top: 0;
  }
.chestplate {
  border-bottom: 1px solid #000;
  display: block;
  position: absolute; left: 10px; top: 35px;
  width: 280px;
  z-index: 1;
}
  .chestplate:after {
    border: 1px solid #000;
    border-top-color: #d5d5d5;
    content: "";
    height: 35px;
    position: absolute; top: 0; left: 64px;
    width: 150px;
    z-index: 2;
  }
.light {
  background: #fcd329;
  border: 1px solid #7d7d7d;
  box-shadow: inset 0 0 15px rgba(0,0,0,.3);  
  display: block;
  height: 20px;
  position: absolute; left: 74px; bottom: 25px;
  width: 150px;
}

.arms {
  height: 90px;
  position: absolute; left: -175px; top: 120px;
  width: 600px;
  z-index: 5;
}
  .arms:before {
    background: #eee;
    border: 1px solid #000;
    border-right: none;
    box-shadow: inset 0 0 3px rgba(0,0,0,.3);
    content: "";
    height: 30px;
    position: absolute; left: 147px; top: 35px;
    width: 20px;
    z-index: 5;
    
    -webkit-transform: skew(-10deg);
       -moz-transform: skew(-10deg);
         -o-transform: skew(-10deg);
            transform: skew(-10deg);
  }
  .arms:after {
    background: #eee;
    border: 1px solid #000;
    border-left: none;
    box-shadow: inset 0 0 3px rgba(0,0,0,.3);
    content: "";
    height: 30px;
    position: absolute; right: 147px; top: 35px;
    width: 20px;
    z-index: 5;
    
    -webkit-transform: skew(10deg);
       -moz-transform: skew(10deg);
         -o-transform: skew(10deg);
            transform: skew(10deg);
  }
.arm {
  background-color: #a5a5a5;
  background-image: -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.5) 50%);
  background-image:    -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.5) 50%);
  background-image:         linear-gradient(0, transparent 50%, rgba(255,255,255,.5) 50%);
  background-size: 5px;
  border: 1px solid #000;
  box-shadow: inset 0 0 3px rgba(0,0,0,1);
  height: 10px;
  position: absolute;
  width: 70px;
  z-index: 4;
}
  .arm-left {
    left: 80px; top: 25px;
  }
  .arm-right {
    right: 80px; top: 25px;
  }
.hand {
  background-color: #7d7d7d;
  background-image: -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%);
  background-image:    -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%);
  background-image:         linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%);
  background-size: 15px;
  border: 1px solid #000;
  height: 7px;
  position: absolute; top: 18px;
  width: 25px;
}
  .hand-left {
    left: 58px;
    
    -webkit-transform: rotate(30deg) translateZ(0);
       -moz-transform: rotate(30deg) translateZ(0);
         -o-transform: rotate(30deg) translateZ(0);
            transform: rotate(30deg) translateZ(0);
  }
  .hand-left:before {
    background-color: #7d7d7d;
    background-image: -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%);
    background-image:    -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%);
    background-image:         linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%);
    background-size: 15px;
    border: 1px solid #000;
    content: "";
    height: 5px;
    position: absolute; left: 2px; top: 13px;
    width: 25px;
    
    -webkit-transform: rotate(-45deg) translateZ(0);
       -moz-transform: rotate(-45deg) translateZ(0);
         -o-transform: rotate(-45deg) translateZ(0);
            transform: rotate(-45deg) translateZ(0);
  }
  .hand-left:after {
    background-color: #7d7d7d;
    background-image: -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%);
    background-image:    -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%);
    background-image:         linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%);
    background-size: 15px;
    border: 1px solid #000;
    content: "";
    height: 5px;
    position: absolute; left: 4px; top: -15px;
    width: 25px;
    
    -webkit-transform: rotate(55deg) translateZ(0);
       -moz-transform: rotate(55deg) translateZ(0);
         -o-transform: rotate(55deg) translateZ(0);
            transform: rotate(55deg) translateZ(0);
  }
  .hand-right {
    right: 58px; top: 20px;
    
    -webkit-transform: rotate(-22deg) translateZ(0);
       -moz-transform: rotate(-22deg) translateZ(0);
         -o-transform: rotate(-22deg) translateZ(0)
            transform: rotate(-22deg) translateZ(0);
  }
  .hand-right:before {
    background-color: #7d7d7d;
    background-image: -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%);
    background-image:    -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%);
    background-image:         linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%);
    background-size: 15px;
    border: 1px solid #000;
    content: "";
    height: 5px;
    position: absolute; right: 1px; top: 8px;
    width: 25px;
    
    -webkit-transform: rotate(30deg) translateZ(0);
       -moz-transform: rotate(30deg) translateZ(0);
            transform: rotate(30deg) translateZ(0);
  }
  .hand-right:after {
    background-color: #7d7d7d;
    background-image: -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%);
    background-image:    -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%);
    background-image:         linear-gradient(0, transparent 50%, rgba(255,255,255,.75) 50%);
    background-size: 15px;
    border: 1px solid #000;
    content: "";
    height: 5px;
    position: absolute; right: 10px; top: -12px;
    width: 20px;
    
    -webkit-transform: rotate(-65deg) translateZ(0);
       -moz-transform: rotate(-65deg) translateZ(0);
         -o-transform: rotate(-65deg) translateZ(0);
            transform: rotate(-65deg) translateZ(0);
  }
  
.feet {
  height: 50px;
  margin-top: 21px;
  position: absolute; left: -10px;
  width: 270px;
}
.foot {
  background: #eee;
  border: 1px solid #000;
  border-radius: 0 0 10px 10px;
  height: 50px;
  position: absolute; left: 10px; top: -18px;
  width: 100px;
}
  .foot-right {
    left: 160px;
  }
  .foot-left:before, .foot-right:before {
    background: #fff;
    border-right: 1px solid #000;
    content: "";
    height: 35px;
    position: absolute; left: -28px; top: 0;
    width: 30px;
    z-index: 2;
    
    -webkit-transform: skew(-10deg);
       -moz-transform: skew(-10deg);
         -o-transform: skew(-10deg); 
            transform: skew(-10deg);
  }
  .foot-left:after, .foot-right:after {
    background: #fff;
    border-left: 1px solid #000;
    content: "";
    height: 35px;
    position: absolute; right: -28px; top: 0;
    width: 30px;
    z-index: 2;
    
    -webkit-transform: skew(10deg);
       -moz-transform: skew(10deg);
         -o-transform: skew(10deg);
            transform: skew(10deg)
  }
.treads {
  background: #999;
  background: 
  	-webkit-linear-gradient(-25deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0,
  	-webkit-linear-gradient(-155deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0,
  	-webkit-linear-gradient(-25deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px,
  	-webkit-linear-gradient(-155deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px,
  	rgba(0,0,0,.3);
  background:
        linear-gradient(-25deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0,
  	linear-gradient(-155deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0,
  	linear-gradient(-25deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px,
  	linear-gradient(-155deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px,
  	rgba(0,0,0,.3);
  background-size: 10px 30px;
  border-top: 1px solid #000;
  border-radius: 0 0 10px 10px;
  box-shadow: inset 0 0 3px rgba(0,0,0,.75); 
  display: block;
  height: 10px;
  position: absolute; bottom: 0;
  width: 98px;
}
  .treads:before {
    content: "";
    border-top: 1px solid #999;
    box-shadow: 0 -1px 1px rgba(0,0,0,.2);
    height: 1px;
    position: absolute; left: 15px; top: -25px;
    width: 70px;
  }

dabblet.html

<div class="robo">
  <header class="head">
    <p class="eye eye-left"><i></i></p>
    <p class="eye eye-right"><i></i></p>
    <span class="neck"></span>
  </header>
    
  <section class="content">
    <p class="medallion">
      <i class="pyramid pyramid-top"></i>
      <i class="pyramid pyramid-bottom"></i>
      <u class="circles"></u>
    </p>
    <b class="chestplate"></b>
    <em class="light"></em>
  </section>
    
  <aside class="arms">
    <p class="arm arm-left"></p>
    <p class="hand hand-left"></p>
    <p class="arm arm-right"></p>
    <p class="hand hand-right"></p>
  </aside>
    
  <footer class="feet">
    <p class="foot foot-left"><i class="treads"></i></p>
    <p class="foot foot-right"><i class="treads"></i></p>
  </footer>
</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}

Rendered (on dabblet): http://dabblet.com/gist/3165250