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
Ode to STEM 