The day I stopped using div soup for CSS art

I used to build everything with a million nested divs back in 2017 for my first CSS landscape... it was painful. Each tree needed like 5 divs just for the leaves and trunk. Then last spring I learned about pseudo-elements and using border-radius creatively. Now I can make a whole mountain range with just two divs and some clever box-shadows. It feels like cheating honestly, but the code is so much cleaner and loads faster. Has anyone else found a technique that totally changed how they approach CSS shapes?

2 comments

2 Comments

the_shane2d ago

Did you catch that talk a while back where someone recreated a whole Van Gogh painting with just box-shadows? Blew my mind how far you can push those things when you treat them like literal paint strokes.

simonreed4d ago

You ever try doing clouds with just a single element and a pile of box-shadows? I started doing that last year and it changed everything. A big white blob with four or five offset shadows in different sizes makes a whole cloud bank, no extra divs or pseudo-elements needed. I did a whole sunset sky with mountains in two divs and clouds in one more, the whole thing came out to like 50 lines of CSS. It feels like magic when you get the xy offsets and blur values just right so they blend together. You mess with border-radius on the main circle too, right?