I’ve been seeing a lot of noise of late on how to fake a sphere in CSS, but one has to wonder why folks would fake one when they can make a real one in about 40 lines CSS/HTML combined?
I’ve only got enough time at the moment to give you the basic recipe but it’s pretty simple.
Using the old CSS triangle trick and ::before and ::after pseudos whip yourself up a hexagon and a pentagon whose sides are of matching lengths.
Now look around for a soccer ball, or perhaps a sewing pattern for making the stuffed fabric ones
To keep the code small you’ll want to make nested strips of your polygons so that but 1 or two selectors operating recursively will curl your strips into the ball.
That’s basically it.
Once you have the soccer ball figured out you can make letters orbit it like the old universal studios logo, or decorate it with textures for the holidays.
Nice thing though is that since it is a real sphere , all them lighting effects in 3d land will interact with it as a real object.
Anyways , 40 lines of HTML/CSS weighs less than many of the fakes anyways, and in understanding it , you can make rolling hills , undulating oceans ,stage curtains and all sorts of cool things that have a big wow and a tiny footprint.
