Loading…
2
My CSS-only coffee cup looked great until I resized the browser, one broken line and I almost quit
Spent about 4 evenings building a little coffee cup with just divs and border-radius and it finally looked right on my screen. Then I dragged my browser window narrower and the whole handle flew off to the side and the steam turned into a gray smear. I fixed it by switching everything to percentages and vw units, but does anyone have a good rule for which parts of a CSS drawing should be fixed and which should scale?
1 comments
Log in to join the discussion
Log In1 Comment
kai77914d ago
Watched my buddy do almost the same thing with a little CSS robot last year. He had the head sized in px and the body in em, so when he zoomed out the head stayed huge and the body shrank, looked like a bobblehead lol. He ended up making the head and eyes fixed px since those need to stay crisp, and let the arms and legs scale with vw so they could stretch with the window. The rule he landed on was simple stuff that needs to keep its shape stays fixed, and anything that connects two other parts or fills space should scale. Also test at like 300px wide and 4k, because the in between sizes always lie to you.
5