Pure CSS Art: Day 11

See Codepen 

I rushed this one, having started it around 11:30PM and trying to finish it before midnight. (That didn’t happen until 1AM. 1.5 hours haha. I feel like I’m regressing.)

Takeaways:

• Used box-shadow property to create the mouth — the mouth div itself is pink, and the black shadow rests right underneath it

• Created a triangle shape for the cone — this involved setting both the width and height to 0 pixels, the border-left and border-right to transparent (which actually didn’t turn transparent, so I set the border colors to the background colors instead), and border-top to a color of my choosing

• The shimmer of light in each eye was created with two classes of the same name, and needed only one CSS declaration

 

Questions:

• Why did setting the box div ‘s width and height to percentages not display anything? Using pixels does display the block
• Same thing happened with the slants on the cone. Why?
• Why did setting the triangle’s border transparent not actually render it transparent?

 

For the future: 

• Add different colors or sprinkles to the ice cream