Loading…
4
Vent: spent 3 hours hand coding a sun in CSS before I found out about box-shadow
Back in 2016 I was drawing a little sun for a weather widget and I built it out of like 40 tiny divs, each one a ray, all rotated by hand with transform, and it kept breaking in Safari. Then I read a post saying you can stack a bunch of box-shadow values on one circle to fake soft glow, so I tried six layered shadows and the whole sun was done in 8 lines. What was the trick that made you feel silly for not knowing it sooner?
1 comments
Log in to join the discussion
Log In1 Comment
parker1685d ago
I get why the box-shadow trick feels clever, but I don't think it's the right lesson here. Those layered shadows create a fuzzy glow that is not really a sun. It just looks like a blurred circle with some light around it. It works fine for a small widget, but the moment you want rays with actual shape, or the shadow colors need to shift with the time of day, you are back to fighting it. The divs and transforms were not the dumb part, hand rotating 40 of them was. A loop or an SVG would have done the same job and still looked like a real sun.
2