Pure CSS Art: Day 7

After returning from an awesome day at Google’s Summit for Women in Computing, I was inspired to create something Google-related. The Android logo was a good candidate, as it contains simple shapes such as rectangles and circles.

See Codepen

Takeaways: 

• Initially, I was going to create a full circle, and then use another shape to cover the half of the circle to create the head; however, I knew there must be a way to create a half-circle (and I didn’t want to use Clippy either); a quick Google search led me to find this Codepen  , where I learned that the border-radius property could be further specified i.e. border-bottom-left-radius, border-bottom-right-radius, bottom-top-left-radius, bottom-top-right-radius 
• To create a half-circle, the bottom/top-left/right-radius property must be double the width of the circle {why, exactly? I have a vague notion}

• To rotate a <div> element, use the transform property
• Angles could be negative, just like in math; it rotates counterclockwise

• The top property’s value could also be negative — the shape moves upward

 

Questions: 

• Why does the width have to be half the value of height for the eye to appear as a circle, even with border radius 50%?
• Why does the bottom/top-left/right-radius property have to be double the width of the circle to create a half-circle?

 

For the future: 

• Review how to absolutely center a shape (in both percentage and px)
• Learn how to animate and rotate the Android bot’s head or arm or leg