Perry CSS3

by Jorgelig

HTML

<div class="contenedor">
      <div id="nombre">I &lt;3 Maricela L.</div>

      <div id="cuerpo">

         <div class="antena ant_left"></div>
         <div class="antena ant_right"></div>

         <div class="ojos ojo_left"></div>
         <div class="ojos ojo_right"></div>

         <div class="mejilla mejilla_left"></div>
         <div class="mejilla mejilla_right"></div>

         <div class="pico_loma"></div>
         <div class="pico"></div>

         <div class="brazo brazo_left"></div>
         <div class="brazo brazo_right"></div>

      </div>

      <div class="cola">&nbsp;</div>


      <div class="pie pie_left">
         <div class="dedo">&nbsp;</div>
      </div>
      
      <div class="pie pie_right">
         <div class="dedo ">&nbsp;</div>
      </div>
   </div>

CSS

*{
      margin:0;
      padding:0;
      font-family: 'Berlin Sans FB';
   }
   .contenedor{
      background-color:rgba(0, 149, 162, 0.3);
      width:300px;
      height:300px;
      margin:auto;
      margin-top:50px;
      -webkit-border-radius:20%;
      position:relative;
      z-index:-2;
   }

   #nombre{
      width:180px;
      height: 20px;
      padding:.3em;
      font-weight: bold;
      font-size:140%;
      color:rgb(151, 211, 208);
      text-shadow: 1px 1px #fff, -1px -1px #333;
      position:absolute;
      top:10px;
      left:60px;
   }

   #cuerpo{
      width: 100px;
      height: 170px;
      background-color: rgb(0, 170, 153);
      -webkit-border-radius:30px 35px 0 0;
      border:4px solid #000;
      position:absolute;
      bottom:50px;
      left: 95px;

   }

   .antena{

      width:4px;
      height: 30px;
      background-color:#000;
      position:absolute;
      z-index: 5;
      -webkit-border-radius:5px;
   }

   .ant_right{
      
      left:55px;
      top:-30px;
      -webkit-transform:rotate(30deg);
   }

   .ant_left{

      height:15px;
      left:45px;
      top:-15px;
      -webkit-transform:rotate(-30deg);   
   }

   .ojos{

      width:18px;
      height:25px;
      background-color:#000;
      -webkit-border-radius:50%;
      position:absolute;
   }
   .ojo_left{
      
      left:17px;
      top:30px;
   }
   .ojo_right{

      right:17px;
      top:30px;

   }
   .ojo_left:after, .ojo_right:after{
      content: " ";
      width:9px;
      height: 13px;
      background-color:#fff;
      -webkit-border-radius:50%;   
      position:absolute;
      left:4px;
      top:1px;
   }

   .mejilla{
      width:15px;
      height: 15px;
      background-color: rgba(218, 52, 204, 0.41);
      -webkit-border-radius:50%;
      position:absolute;
       
   }
   .mejilla_left{

       top:53px;
       left:5px;
   }
   .mejilla_right{

       top:53px;
       right:5px;   

   }
   .pico{
      width:120px;
     ...