Pikachu

Pikachu CSS3 Draw

by Henrique Marques Fernandes

HTML

<div class="table-w">
    <div class="table-c">
        <div class="pikachu">
            <div class="head-wrapper">

                <div class="ear left"></div>
                <div class="ear right"></div>

                <div class="head-top"></div>
                <div class="head-middle"></div>
                <div class="head-bottom"></div>
                <div class="eyes">
                    <div class="eye"></div>
                    <div class="eye"></div>
                </div>
                <div class="nose">

                </div>
                <div class="cheeks">
                    <div class="cheek left"></div>
                    <div class="cheek right"></div>
                </div>
            </div>
        </div>
    </div>
</div>

SCSS

/** @author: Henrique Marques Fernandes
*** @authorEmail: henrique@marquesfernandes.com
*** @date: 06/03/2017
*** @license: GLP (https://opensource.org/licenses/GPL-3.0)
**/


//Colors
$yellow: #FFD620;
$shadow: #E0A030;
$red: #FD310D;
$tail: #815034;

body,html {
  background:#eee;
  height:100%;
}

.table-w {
  display:table;
  height:100%;
  width:100%;
  text-align:center;
  .table-c {
    display:table-cell;
    vertical-align:middle;
  }
}

.pikachu {
  display:inline-block;
  position:relative;
  padding:100px;
  .head-wrapper {
    height:180px;
    width:180px;
    position:relative;
    .head-top {
      width: 160px;
      height:160px;
      position: absolute;
      left: 10px;
      right: auto;
      margin-left:auto;
      margin-right:auto;
      background: $yellow;
      border-radius:75px 75px 50% 50%;
      border:solid 1px #000;
    }
    .head-middle {
      position: absolute;
      bottom: 13px;
      left: 7px;
      width: 168px;
      background: none repeat scroll 0% 0% #FFD620;
      height: 160px;
      border-radius: 50%;
      z-index: 5;
    }
    .head-bottom {
      position:absolute;
      bottom:10px;
      width:180px;
      background:$yellow;
      height:150px;
      border-radius:50% 50% 50% 50%;
      left:0;
      border:solid 1px #000;
    }
    .eyes {
      position:absolute;
      width:100%;
      top:70px;
      z-index:5;
      .eye {
        display:inline-block;
        width:32px;
        height:32px;
        background:#000;
        -webkit-border-radius:50%;
        -moz-border-radius:50%;
        border-radius:50%;
        position:relative;
        &:after {
          width:12px;
          height:12px;
          background:#FFF;
          border-radius:50%;
          position:absolute;
          right:3px;
          top:3px;
          content:" ";
        }
        &:last-child {
          margin-left:60px;
          &:after {
            right: auto;
            left:3px;
          }
        }
      }
  ...