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.
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.
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).
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.