Robot Creation with CSS

5 years ago Katie Reilly

I recently finished a section in my online Web Development course on CSS.  Our final project for this section was to create a movable robot using just CSS.  I have to say that I really enjoyed this project because it gave me a chance to use properties that I have never really used before.  Up until this point I have been focusing mainly on basic CSS and getting pages to look nice.

First thing that we had to create was an HTML file for our robot.  We accomplished this using divs that corresponded to the different parts of the robot (head, body, eyes, arms, and legs).  I was thinking of giving my robot a hat or a nose but my husband convinced me for now to just keep it simple.  After we got the HTML completed for our robot then came the fun part.  Now we get to style our robot and make him move.

This is what my HTML looked like:

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Katie's RoboPage</title>
  <link rel="stylesheet" type="text/css" href="robot.styles.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
  <h1>Katie's Robot Friend</h1>
  <div class="katies__robot">
    <div class="katies__robot-android">
      <div class="katies__robot__head">
        <div class="katies__robot__eyes">
          <div class="katies__robot__eyes-left"></div>
          <div class="katies__robot__eyes-right"></div>
        </div>
      </div>

      <div class="katies__robot__upperbody">
        <div class="katies__robot__upperbody-left_arm"></div>
        <div class="katies__robot__upperbody-torso"></div>
        <div class="katies__robot__upperbody-right_arm"></div>
      </div>

      <div class="katies__robot__lowerbody">
        <div class="katies__robot__lowerbody-left_leg"></div>
        <div class="katies__robot__lowerbody-right_leg"></div>
      </div>

    </div>
  </div>
  
</body>
</html>

Styling my robot wasn’t too bad.  I did however, run into a hard time positioning the legs.  At first the legs were underneath the torso but when I moved the legs it created this huge gap between the top of the legs and the bottom of the legs.  I wanted the legs to be behind the body so when they moved you would not see the gap.  So I tried to add a z-index of -1.  This worked to get the legs to go behind the body which is what I wanted but it disabled my hover effect to move the legs.  It took me a while to get it right but again with my husband’s help we got it working.  We ended up doing a z-index of 100 on the torso and then a z-index of 10 on the legs.  This got the legs to be positioned behind the torso and also re-enabled the hover.

Now it’s time to make the robot move.  I wanted the head to move so that it looked like it was talking.  To accomplish this I did a rotate and translate so that the head with move up and at a slight angle.  For the arms I set the origin for the transform in the middle of the arm and slightly down from the top.  I then did a slight rotation so the arm would come out slightly.  I did not want to make the movement to big.  Last was to make the legs move.  This again was problematic because at first I could not see where the legs were rotated since they were behind the body.  I made the lower body transparent so that I could see the top portion of the legs.   I made the origin at the top center of each leg and rotated it 25 degrees. 

This is what my original CSS looked like: 

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
 
h1 {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  color: rgb(212, 126, 212);
  text-decoration: underline;
}

.katies__robot {

}

.katies__robot__head {
  width: 200px;
  margin: 10% auto;
  height: 150px;
  border-radius: 200px 200px 0 0;
  margin-bottom: 10px;
  background: rgb(197, 72, 134); 
  transition: transform 1s;
}

.katies__robot__head:hover {
 transform: rotate(-15deg) translatey(-25px);
 
}


.katies__robot__eyes-left {
  position: relative;
  top: 60px;
  left: 55px;
  width: 25px;
  height: 25px;
  border-radius: 15px;
  background: rgb(159, 206, 228);
}

.katies__robot__eyes-right {
  position: relative;
  top: 35px;
  left: 120px;
  width: 25px;
  height: 25px;
  border-radius: 15px;
  background: rgb(159, 206, 228);
}

.katies__robot__upperbody {
  width: 300px;
  height: 185px;
  display: flex;
  margin: auto;
  z-index: 1000;
  
}

.katies__robot__upperbody-left_arm {
  width: 40px;
  height: 125px;
  margin-right: 10px;
  border-radius: 100px;
  background: rgb(233, 168, 179);
  transition: all 1s ease-in-out;

}

.katies__robot__upperbody-left_arm:hover {
  transform-origin: center 5%;
  transform: rotate(25deg);
}

.katies__robot__upperbody-torso {
  width: 200px;
  height: 200px;
  margin: auto;
  z-index: 100;
  border-radius: 0 0 50px 50px;
  background: rgb( 197, 72, 134);
  
}

.katies__robot__upperbody-right_arm {
  width: 40px;
  height: 125px;
  margin-left: 10px;
  border-radius: 100px;
  background: rgb(233, 168, 179);
  transition: all 1s ease-in-out;
}

.katies__robot__upperbody-right_arm:hover {
  transform-origin: center 5%;;
  transform: rotate(-25deg);
}

.katies__robot__lowerbody {
  width: 200px;
  height: 150px;
  margin: 0 auto;
  display: flex;
  z-index: 1000;
  
}

.katies__robot__lowerbody-left_leg {
  position: absolute;
  width: 45px;
  height: 125px;
  left: 525px;
 /* margin-left: 40px;*/
  border-radius:0 0 100px 100px;
  background: rgb(233, 168, 179);
  z-index: 10;
  transition: all 1s ease-in-out;
}

.katies__robot__lowerbody-left_leg:hover {
  transform-origin: top center;
  transform: rotate(20deg);
}

.katies__robot__lowerbody-right_leg {
  position: absolute;
  width: 45px;
  height: 125px;
  right: 525px;
  /*margin-left: 116px;*/
  border-radius: 0 0 100px 100px;
  background: rgb(233, 168, 179);
  z-index: 10;
  transition: all 1s ease-in-out;
}

.katies__robot__lowerbody-right_leg:hover {
  transform-origin: top center;
  transform: rotate(-25deg);
  
 
}

Once I finished my robot I opened it up in my browser and I thought to myself “Hey this looks pretty good”.  Then I resized the page.  When I resized the browser page it caused my robot to do a sumo squat, or its legs to completely go off the screen.  How do I fix this I asked?  I ended up looking at the arms of my robot because those stayed where they were supposed to when I resized my browser.  That’s where I found my answer.  In my arms to get the position I used a margin left or right depending on what arm it was.  For my legs however; I was using the left and right element.  So I changed both the right and the left leg to a margin-left (left leg I set at 40px and right leg I set at 116px).  When I refreshed my page and changed the size of the screen the legs stayed exactly where they were supposed to.  

 Here is the CSS for my legs ( the original code and the updated code).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
 
.katies__robot__lowerbody-left_leg {
  position: absolute;
  width: 45px;
  height: 125px;
  left: 525px;
  border-radius:0 0 100px 100px;
  background: rgb(233, 168, 179);
  z-index: 10;
  transition: all 1s ease-in-out;
}


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
 
.katies__robot__lowerbody-left_leg {
  position: absolute;
  width: 45px;
  height: 125px;
  margin-left: 40px;
  border-radius:0 0 100px 100px;
  background: rgb(233, 168, 179);
  z-index: 10;
  transition: all 1s ease-in-out;
}


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
 
.katies__robot__lowerbody-right_leg {
  position: absolute;
  width: 45px;
  height: 125px;
  right: 525px;
  border-radius: 0 0 100px 100px;
  background: rgb(233, 168, 179);
  z-index: 10;
  transition: all 1s ease-in-out;
}


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
 
.katies__robot__lowerbody-right_leg {
  position: absolute;
  width: 45px;
  height: 125px;
  margin-left: 116px;
  border-radius: 0 0 100px 100px;
  background: rgb(233, 168, 179);
  z-index: 10;
  transition: all 1s ease-in-out;
}

Overall I am happy with how this robot turned out.  When I started learning how to code 6-7 months ago I never thought I would be able to create something like this.  There are still some quirks but for a starter project I think it turned out pretty good.  Here is the finished product.  I have on the left a picture of it standard.   In the middle is the messed up robot and on the right is a picture of my robot in an active hover state.

 

    

Leave a Reply

Your email address will not be published. Required fields are marked *