Loading…
2
Why I deleted 200 lines of CSS in the middle of a coffee shop in Portland
I was finishing a CSS-only illustration of a pizza slice at a cafe on Alberta St last Tuesday when I noticed my box-shadow was 68 lines deep and the pepperoni still looked flat. I got so mad I deleted the whole thing, grabbed a napkin, and redrew it using just border-radius and conic-gradient. Turns out the trick was layering one radial-gradient for the cheese and clipping it with an SVG-free clip-path, and it looked way better with 40 percent less code. Now every time I open a new pen I sketch the shapes on paper first like some kind of caveman. Has anyone else had a design fall apart because you were hiding too much mess inside shadows?
1 comments
Log in to join the discussion
Log In1 Comment
thompson.xena26d ago
Oh man, I felt this in my soul. My record is a "simple" card flip that somehow had 30 nested divs and a filter chain so long the browser gave up on me mid-scroll. I kept stacking on drop-shadows to fake depth because I was too lazy to just draw the folds with gradients, and it looked like a blurry potato the whole time. When I finally stripped it back to two layers and a clip-path, it ran smooth and honestly looked sharper. The napkin sketch thing is real too, I started doing that after my third time rebuilding the same shape from scratch. There is something about paper that makes you see the actual geometry instead of just the box model. Do you keep those sketches around or do they all end up as coffee coasters like mine?
0