Minion Using Html & CSS | Despicable Me

Hello, In this tutorial we are going to create my favourite cartoon character ie. The Minion. We are going to create minion using HTML & CSS. This is a Despicable Me movie minion.  In the last tutorials we are created How To Create New Year Countdown using HTML & Javascript.

HTML


<!DOCTYPE html>
<html lang="en" >
<head>
   <meta charset="UTF-8">
   <title>Codegyan - Minion in Pure CSS</title>
   <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
</head>
<body>
 <!-- partial:index.partial.html -->
<div class="container">
  <div class="minion">
    <ul class="hair back">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
 <div class="minion-body">
   <div class="dungarees-bottom"></div>
    <div class="dungarees-front"></div>
     <div class="dungarees-pocket">
      <div class="logo"><span></span></div>
     </div>
  <div class="dungarees-strap left">
   <div class="button"></div>
  </div>
  <div class="dungarees-strap right">
   <div class="button"></div>
  </div>
 </div>
   <ul class="hair front">
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
   </ul>
  <div class="goggle-strap left"></div>
    <div class="goggle-strap right"></div>
     <div class="goggle-strap-link left"></div>
      <div class="goggle-strap-link right"></div>
        <div class="goggle-frame left">
         <div class="goggle">
         <div class="eye">
         <div class="pupil">
         <div class="dot"></div>
      </div>
     </div>
    </div>
  </div>
   <div class="goggle-frame right">
     <div class="goggle">
       <div class="eye">
        <div class="pupil">
         <div class="dot"></div>
        </div>
       </div>
     </div>
   </div>
<div class="goggle-shadow left"></div>
    <div class="goggle-shadow right"></div>
    <div class="mouth"></div>
    <div class="arm-shadow left"></div>
    <div class="arm-shadow right"></div>
    <div class="arm left"></div>
    <div class="arm right"></div>
    <div class="glove left">
    <div class="finger"></div>
</div>
<div class="glove right">
 <div class="finger"></div>
</div>
<div class="wrist front left"></div>
  <div class="wrist front right"></div>
  <div class="wrist back left"></div>
  <div class="wrist back right"></div>
  <div class="leg left"></div>
  <div class="leg right"></div>
  <div class="shoe left"></div>
  <div class="shoe right"></div> 
  <div class="shadow"></div>
  </div>
</div>
<div class="movie-logo">
  <img src="https://static2.wikia.nocookie.net/__cb20130816092518/despicableme/images/a/a7/DespicableMe.png">
    <h1>Minion in Pure CSS</h1>
           <!-- partial -->
</body>
</html>

CSS


:before, :after {
content: "";
position: absolute;
}
.container {
max-width: 550px;
padding: 0;
margin: 0 auto;
min-height: 450px;
display: inline;
perspective: 800px;
perspective-origin: 50% 50%;
}
.minion {
position: absolute;
top: calc(48% - (250px / 2));
left: calc(50% - (140px / 2));
height: 250px;
width: 140px;
}
.minion * {
position: absolute;
}
.minion .hair {
top: -15px;
margin: 0;
padding: 0;
}
.minion .hair.back li:nth-of-type(1) {
transform: rotate(-70deg);
margin-top: 36px;
}
.minion .hair.back li:nth-of-type(2) {
transform: rotate(-50deg);
margin-top: 19px;
}
.minion .hair.back li:nth-of-type(3) {
transform: rotate(-30deg);
margin-top: 12px;
}
.minion .hair.back li:nth-of-type(4) {
transform: rotate(-10deg);
margin-top: 3px;
}
.minion .hair.back li:nth-of-type(5) {
transform: rotate(2deg);
border-left: 1px solid #333333;
border-radius: 80% 0 0 0;
}
.minion .hair.back li:nth-of-type(6) {
transform: rotate(10deg);
margin-top: 3px;
}
.minion .hair.back li:nth-of-type(7) {
transform: rotate(30deg);
margin-top: 12px;
}
.minion .hair.back li:nth-of-type(8) {
transform: rotate(50deg);
margin-top: 19px;
}
.minion .hair.back li:nth-of-type(9) {
transform: rotate(70deg);
margin-top: 36px;
}
.minion .hair.front {
margin-top: 3px;
z-index: 4;
}
.minion .hair.front li:nth-of-type(1) {
transform: rotate(-60deg);
margin-top: 21px;
}
.minion .hair.front li:nth-of-type(2) {
transform: rotate(-46deg);
margin-top: 12px;
}
.minion .hair.front li:nth-of-type(3) {
transform: rotate(-28deg);
margin-top: 7px;
}
.minion .hair.front li:nth-of-type(4) {
transform: rotate(-12deg);
margin-top: 5px;
}
.minion .hair.front li:nth-of-type(5) {
transform: rotate(-2deg);
border-right: 1px solid #333333;
border-radius: 0 80% 0 0;
margin-top: 3px;
}
.minion .hair.front li:nth-of-type(6) {
transform: rotate(12deg);
margin-top: 6px;
}
.minion .hair.front li:nth-of-type(7) {
transform: rotate(28deg);
margin-top: 7px;
}
.minion .hair.front li:nth-of-type(8) {
transform: rotate(46deg);
margin-top: 12px;
}
.minion .hair.front li:nth-of-type(9) {
transform: rotate(60deg);
margin-top: 21px;
}
.minion .hair li {
list-style: none;
height: 30px;
width: 10px;
float: left;
}
.minion .hair li:nth-of-type(1) {
transform: rotate(-70deg);
position: absolute;
left: 8px;
height: 30px;
}
.minion .hair li:nth-of-type(2) {
transform: rotate(-50deg);
left: 18px;
}
.minion .hair li:nth-of-type(3) {
transform: rotate(-30deg);
left: 30px;
}
.minion .hair li:nth-of-type(4) {
transform: rotate(-10deg);
left: 45px;
}
.minion .hair li:nth-of-type(5) {
left: 60px;
}
.minion .hair li:nth-of-type(6) {
transform: rotate(10deg);
left: 76px;
}
.minion .hair li:nth-of-type(7) {
transform: rotate(30deg);
left: 93px;
}
.minion .hair li:nth-of-type(8) {
transform: rotate(50deg);
left: 107px;
}
.minion .hair li:nth-of-type(9) {
transform: rotate(70deg);
left: 119px;
height: 30px;
}
.minion .hair li:nth-of-type(n+6) {
border-left: 1px solid #333333;
border-radius: 80% 0 0 0;
}
.minion .hair li:nth-of-type(-n+4) {
border-right: 1px solid #333333;
border-radius: 0 80% 0 0;
}
.minion .minion-body {
position: relative;
height: 250px;
width: 140px;
border-radius: 80px 80px 50px 50px;
background: #FFCB4F;
overflow: hidden;
}
.minion .minion-body:after, .minion .minion-body:before {
top: 0;
left: 0;
}
.minion .minion-body:before {
width: 80%;
height: 100%;
border-radius: 20px;
background-image: radial-gradient(rgba(250, 250, 250, 0.6) 0%, rgba(250, 250, 250, 0) 60%);
filter: blur(5px);
z-index: 1;
left: -10px;
}
.minion .minion-body:after {
height: 250px;
width: 140px;
border-radius: 80px 80px 50px 50px;
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.2) 100%);
filter: blur(5px);
z-index: 1;
}
.minion .minion-body .dungarees-front {
bottom: 0;
height: 90px;
width: 140px;
overflow: hidden;
border-top: 1px solid #4883b8;
}
.minion .minion-body .dungarees-front:before {
left: -30px;
border-radius: 0 0 35% 0;
box-shadow: 40px -40px 30px 40px #6D9CC6;
}
.minion .minion-body .dungarees-front:after {
right: -30px;
box-shadow: -40px -40px 30px 40px #6D9CC6;
border-radius: 0 0 0 35%;
}
.minion .minion-body .dungarees-front:before, .minion .minion-body .dungarees-front:after {
width: 56px;
height: 75%;
top: 0;
border: 1px solid #4883b8;
}
.minion .minion-body .dungarees-pocket {
bottom: 35px;
left: 50%;
margin-left: -17.5px;
height: 35px;
width: 35px;
border-radius: 0 0 15px 15px;
border-left: 1px solid #4883b8;
border-right: 1px solid #4883b8;
border-bottom: 1px solid #4883b8;
}
.minion .minion-body .dungarees-pocket:before {
top: -13px;
left: -2px;
height: 15px;
width: 37px;
border-bottom: 1px solid #4883b8;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-radius: 20px;
}
.minion .minion-body .dungarees-pocket .logo {
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -10.5px;
height: 25px;
width: 25px;
background: #333333;
border-radius: 50%;
}
.minion .minion-body .dungarees-pocket .logo:before {
top: 50%;
left: 50%;
margin-left: -7.5px;
margin-top: -7.5px;
height: 15px;
width: 15px;
background: #6D9CC6;
transform: rotate(45deg);
}
.minion .minion-body .dungarees-pocket .logo:after {
top: 50%;
left: 50%;
margin-left: -3.5px;
margin-top: -3.5px;
height: 7px;
width: 7px;
background: #333333;
border-radius: 50%;
z-index: 5;
}
.minion .minion-body .dungarees-pocket .logo span {
height: 2px;
background: #333333;
border-bottom: 1px solid #6D9CC6;
width: 12.5px;
right: 0;
top: 48%;
margin-top: -1px;
z-index: 6;
}
.minion .minion-body .dungarees-bottom {
bottom: 0;
height: 40px;
width: 140px;
background-color: #6d9cc6;
background-image: linear-gradient(top, #6d9cc6 45%, #4b6587 100%);
border-top: 1px solid #4883b8;
}
.minion .minion-body .dungarees-strap {
top: 127px;
height: 60px;
width: 12px;
background: #6D9CC6;
border: 1px solid #4883b8;
}
.minion .minion-body .dungarees-strap.left {
left: 5px;
transform: rotate(-65deg);
}
.minion .minion-body .dungarees-strap.right {
right: 5px;
transform: rotate(65deg);
}
.minion .minion-body .dungarees-strap .button {
bottom: 0;
left: 2px;
height: 8px;
width: 8px;
border-radius: 50%;
background: #333333;
}
.minion .goggle-strap {
top: 68px;
height: 3px;
background: black;
width: 16px;
z-index: 6;
}
.minion .goggle-strap.left {
left: -2px;
}
.minion .goggle-strap.left:before, .minion .goggle-strap.left:after {
border-right: 16px solid #444444;
}
.minion .goggle-strap.right {
right: -2px;
}
.minion .goggle-strap.right:before, .minion .goggle-strap.right:after {
border-left: 16px solid #444444;
}
.minion .goggle-strap:before, .minion .goggle-strap:after {
height: 6px;
}
.minion .goggle-strap:before {
top: -7px;
border-top: 2px solid transparent;
}
.minion .goggle-strap:after {
top: 3px;
border-bottom: 2px solid transparent;
}
.minion .goggle-strap-link {
top: 58px;
height: 25px;
width: 5px;
background: #999999;
z-index: 7;
}
.minion .goggle-strap-link.left {
left: 12px;
}
.minion .goggle-strap-link.right {
right: 12px;
}
.minion .goggle-frame {
top: 40px;
height: 50px;
width: 50px;
border: 5px solid #CCCCCC;
border-radius: 50%;
overflow: hidden;
z-index: 8;
}
.minion .goggle-frame.left {
left: 30%;
margin-left: -30px;
}
.minion .goggle-frame.left .goggle {
left: -1px;
}
.minion .goggle-frame.left .goggle .pupil {
right: 40%;
}
.minion .goggle-frame.right {
right: 30%;
margin-right: -30px;
}
.minion .goggle-frame.right .goggle {
right: -1px;
}
.minion .goggle-frame.right .goggle .pupil {
left: 40%;
}
.minion .goggle-frame .goggle {
height: 50px;
width: 50px;
border: 3px solid #666666;
border-radius: 50%;
}
.minion .goggle-frame .goggle .eye {
background: whitesmoke;
height: 46px;
width: 50px;
border-radius: 50%;
margin: 1px 0;
box-shadow: inset 0px 2px 10px 0px rgba(51, 51, 51, 0.5), inset 0px -1px 5px 0px rgba(51, 51, 51, 0.3);
}
.minion .goggle-frame .goggle .eye .pupil {
top: 50%;
margin: -7.5px;
height: 15px;
width: 15px;
background-color: #e7a452;
background-image: radial-gradient(#e7a452 0%, #91695c 49%, #91695c 74%, #000000 99%);
border-radius: 50%;
}
.minion .goggle-frame .goggle .eye .pupil .dot {
top: 50%;
left: 50%;
margin-top: -2.5px;
margin-left: -2.5px;
height: 5px;
width: 5px;
background: #333333;
border-radius: 50%;
}
.minion .goggle-shadow {
height: 75px;
top: 45px;
border-radius: 50%;
background-image: radial-gradient(rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 50%);
z-index: 5;
}
.minion .goggle-shadow.left {
left: 5px;
width: 130px;
}
.minion .goggle-shadow.right {
left: 55px;
width: 100px;
}
.minion .mouth {
top: 110px;
left: 50%;
margin-left: -30px;
height: 20px;
width: 60px;
border-bottom: 2px solid #DE9A33;
border-right: 1px solid tranparent;
border-left: 1px solid tranparent;
border-radius: 70%;
z-index: 5;
box-shadow: inset 0 -1px 2px -1px rgba(0, 0, 0, 0.3);
}
.minion .arm {
top: 160px;
height: 80px;
width: 12px;
z-index: -1;
background: #FFCB4F;
overflow: hidden;
}
.minion .arm.left {
left: -12px;
border-radius: 20px 0 0 20px/80px 0 0 20px;
transform: rotate(0deg);
}
.minion .arm.left:before {
background-image: linear-gradient(left, rgba(250, 250, 250, 0.3) 20%, rgba(0, 0, 0, 0) 100%);
}
.minion .arm.right {
right: -12px;
border-radius: 0 20px 20px 0/0 80px 20px 0;
transform: rotate(0deg);
}
.minion .arm.right:before {
background-image: linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 90%);
}
.minion .arm:before {
height: 100%;
width: 100%;
filter-gradient: #000000, #000000, horizontal;
}
.minion .arm-shadow {
top: 180px;
height: 30px;
width: 5px;
border-radius: 50%;
}
.minion .arm-shadow.left {
left: 0px;
box-shadow: inset 2px 0 3px -1px rgba(0, 0, 0, 0.3);
transform: rotate(5deg);
}
.minion .arm-shadow.right {
right: 0px;
box-shadow: inset -2px 0 3px -1px rgba(0, 0, 0, 0.3);
transform: rotate(-5deg);
}
.minion .glove {
bottom: 0;
width: 17px;
height: 18px;
background: #333333;
border-radius: 0 0 30px 30px;
}
.minion .glove.left {
left: -14px;
transform: rotate(-10deg);
}
.minion .glove.left:before {
left: -2px;
transform: rotate(20deg);
}
.minion .glove.left:after {
left: 13px;
transform: rotate(-30deg);
}
.minion .glove.left .finger {
left: 5px;
transform: rotate(0deg);
}
.minion .glove.right {
right: -14px;
transform: rotate(10deg);
}
.minion .glove.right:before {
right: -2px;
transform: rotate(-20deg);
}
.minion .glove.right:after {
right: 13px;
transform: rotate(30deg);
}
.minion .glove.right .finger {
right: 5px;
transform: rotate(0deg);
}
.minion .glove:before {
bottom: 0px;
height: 20px;
width: 10px;
background: #333333;
border-radius: 0 0 20px 20px;
}
.minion .glove:after {
bottom: -4px;
height: 20px;
width: 10px;
background: #333333;
border-radius: 0 0 20px 20px;
}
.minion .glove .finger {
bottom: -6px;
height: 20px;
width: 10px;
background: #333333;
border-radius: 0 0 20px 20px;
z-index: 10;
}
.minion .wrist {
height: 30px;
width: 16px;
border-radius: 40%;
}
.minion .wrist.front {
bottom: 15px;
border-bottom: 5px solid #333333;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
.minion .wrist.back {
bottom: -11px;
border-top: 5px solid #333333;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
z-index: -2;
}
.minion .wrist.left {
left: -19px;
}
.minion .wrist.right {
right: -19px;
}
.minion .leg {
bottom: -15px;
height: 15px;
width: 25px;
background: #4B6587;
z-index: -1;
border-left: 1px solid #4883b8;
border-right: 1px solid #4883b8;
}
.minion .leg.left {
left: 40px;
border-radius: 0 0 10% 20%/0 0 80% 80%;
}
.minion .leg.left:after {
transform: rotate(55deg);
left: -12px;
}
.minion .leg.right {
right: 40px;
border-radius: 0 0 20% 10%/0 0 80% 80%;
}
.minion .leg.right:after {
transform: rotate(-55deg);
right: -12px;
}
.minion .leg:after {
top: -10px;
background: #4B6587;
height: 10px;
width: 20px;
border-bottom: 1px solid #4883b8;
}
.minion .shoe {
bottom: -26px;
width: 30px;
height: 10px;
background: #222222;
z-index: -2;
}
.minion .shoe.left {
right: 74px;
border-radius: 50px 20px 15px 10px;
transform: rotate(-3deg);
}
.minion .shoe.left:before {
right: 0px;
}
.minion .shoe.left:after {
right: 0;
border-radius: 10px 0 0 10px;
}
.minion .shoe.right {
left: 74px;
border-radius: 20px 50px 10px 15px;
transform: rotate(3deg);
}
.minion .shoe.right:before {
left: 0px;
}
.minion .shoe.right:after {
left: 0;
border-radius: 0 10px 10px 0;
}
.minion .shoe:before {
top: -10px;
height: 15px;
width: 22px;
background: #222222;
}
.minion .shoe:after {
bottom: -3px;
height: 3px;
width: 30px;
background-image: linear-gradient(top, #666666 0%, #222222 58%);
}
.minion .shadow {
bottom: -38px;
left: -10%;
width: 140%;
height: 30px;
background: radial-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
z-index: -5;
}
.movie-logo {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 20;
}
.movie-logo img {
margin: 0 0 -10px -10px;
width: 150px;
height: auto;
}
.movie-logo h1, .movie-logo h2 {
font-family: "helvetica neue", helvetica, arial, sans-serif;
margin: 0;
font-size: 26px;
letter-spacing: 1px;
color: #666666;
font-weight: 100;
}

Also Read : Santa Animation With HTML & CSS

If you wann to check the demo of this code, then you can check using below demo button.

 

Click on the following download button to download all source code files of minion directly on your computer.

Final Word

In this way, we can create the minion using html and css. I hope you all like this tutorial. Keep with us for next tutorial. if you wann the source code of this code you can get this on our github account. If you have any query please free to contact us. Or comment below.

Minion Using Html & CSS | Despicable Me

Published on 30-Dec-2021 19:16:52

You may also like this!