CSS Art for Beginners: How to Think in Shapes

The single most useful CSS-art habit costs nothing: squint at the thing you want to draw. The details blur away and you're left with a few soft blobs. That blob map is your shopping list before you open the editor.

A rice ball is a rounded triangle. A cloud is three overlapping rounded rectangles. A face is two dots and a half-circle. If you can name the shapes out loud, the CSS already half-writes itself.

One property does most of the shaping. The fancy eight-value form — four numbers, a slash, four numbers — rounds the horizontal and vertical corners separately, so a plain box can bulge into a dome, a teardrop, or a bean.

Wiggle the numbers in the Playground and watch the shape squish in real time. You don't need to memorize the syntax; you need to feel it.

CSS art is additive. You almost never cut a shape out of another shape — you stack simpler shapes on top and let the outline do the talking. A nori wrap is a separate rectangle hugging the bottom of the rice, not a bite taken out of it.

This is why source order matters more than z-index most of the time. Draw the back layers first, the front layers last.

Eyes, mouths, and blush are just absolutely-positioned dots inside a positioned parent. Use percentages, not pixels — then when you resize the whole doodle, the face comes along for free instead of drifting off to the corner.