elephant

In this example below you will see how to do a elephant with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by nen, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright nen ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>elephant</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
 <!-- Begin Image -->
 <!-- Invisible Box-->
 <div class="box">
   
     <!-- Circular Head-->
    <div class="head">
      
     <!-- Head copy -->
      <div class="head-copy"> </div>
      
       <!-- Left Ear ~ dark gray-->
      <div class="ear-left">
        
       <!-- Inner ear ~ off white -->
      <div class="inner-ear"></div>
      </div>
      
      <!-- right Ear ~ dark gray-->
      <div class="ear-right">
        
       <!-- Inner ear ~ off white -->
      <div class="inner-ear"></div>
      </div>
      
      <!-- Left Outer Eye ~ White -->
      <div class="eye-left">
        <!-- Pupil ~ black -->
        <div class="pupil">
        </div>
      </div>
      
      <!-- Right Outer Eye ~ White -->
      <div class="eye-right">
        <!-- Pupil ~ black -->
        <div class="pupil">
        </div>
      </div>
      
       <!-- horns ~ white -->
        <div class="horn-left">
      </div>
      
      <!-- horns ~ white -->
        <div class="horn-right">
      </div>
      
       <!-- trunk ~ Brown -->
       <div class="trunk">
       </div>
      
       <!-- trunk ~ Brown -->
       <div class="trunk-2">
       </div>
        <!-- trunk brown -->
        <div class="trunk-extra">
      </div>
      
     <!-- End Head -->
    </div>
 <!-- End Invisible Box -->
 </div>
</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/nen/elephant-RpRKpR */
body {
  background: #384be0;
}

.box {
  position: relative;
  margin: auto;
  margin-top: 15%;
  width: 600px;
  height: 600px;
  background:none;
}

.head {
  position: absolute;
  top:16.5%;
  left: 25%;
  width: 35%;
  height: 50%;
  background: #a4a0af;
  border-radius: 50%;
}

.head-copy {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #a4a0af;
  border-radius: 50%;
  z-index: 2;
}

.ear-left {
  position: absolute;
  width: 50%;
  height: 65%;
  left: -26%;
  top: 7%;
  background: #8e8470;
  -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph; /*IE*/
-webkit-clip-path: polygon(0 0, 0 100%, 100% 48%);
clip-path: polygon(0 0, 0 100%, 100% 48%);
  z-index: 1;
 
}

.ear-right {
  position: absolute;
  width: 50%;
  height: 65%;
  right: -26%;
  top: 7%;
  background: #8e8470;
-webkit-clip-path: polygon(0 0, 0 100%, 100% 48%);
clip-path: polygon(0 0, 0 100%, 100% 48%);
  z-index: 1;
}

.eye-left {
  position: absolute;
  background: white;
  width: 10%;
  height: 10%;
  top: 35%;
  left: 25%;
  border-radius: 50%;
  z-index: 3;
}

.eye-right{
  position: absolute;
  background: white;
  width: 10%;
  height: 10%;
  top: 35%;
  right: 25%;
  border-radius: 50%;
  z-index: 3;
}

.pupil{
  position: absolute;
  width: 30%;
  height: 35%;
  top: 35%;
  left: 36%;
  border-radius: 50%;
  background: black;
}

.horn-left {
  position: absolute;
  background: white;
  width: 5%;
  height: 45%;
  top:50%;
  left: 30%;
  border-radius: 12px;
  z-index: 4;
  -webkit-transform:
     translateY(-20px)
     translateX(5px)
    rotate(27deg); 
}

.horn-right {
  position: absolute;
  background: white;
  width: 5%;
  height: 45%;
  top:37%;
  right: 33%;
  border-radius: 12px;
  z-index: 4;
  -webkit-transform:
            translateY(20px)
            translateX(5px)
            rotate(-27deg); 
}

.trunk{
  position: absolute;
  background: #8e8470;
  width: 29%;
  height: 45%;
  left: 37%;
  top: 45%;
  border-radius: 50px;
  z-index: 5;
}

.trunk-2{
  position: absolute;
  background: #8e8470;
  width: 22%;
  height: 40%;
  left: 40%;
  top: 72%;
  border-radius: 50px;
  z-index: 5;
}

/*.trunk-extra {
  position: absolute;
  background: #BE845F;
  width: 55%;
  height: 10%;
  left: 40%;
  top: 100%;
  border-radius: 50px;
  z-index: 6;
}*/

Comments