Although not always practical, creating the illusion that some of your web elements are “3D” can be a fun experiment. I set out to see if I was able to create such an illusion with only 2 HTML elements and as little CSS as possible.
That’s it – I wasn’t kidding when I said we would use only 2 HTML elements. The .main-orb is the core shape (set to 400×400) and the .inner-orb is placed on top of it’s parent at a slightly smaller size (360×360) – but more on that below in the CSS portion.
First we give the bigger orb element (.main-orb) the default styling needed to represent a 2D circle:
Next, we include both :before and :after pseudo elements for our orb’s drop shadow. You could do this with a simple box-shadow property on the .main-orb itself, but I’ve explained in a previous post why that’s not the best approach.
With our main orb complete we can move on to the .inner-orb element to help bring slightly more depth to our floating ball of CSS:
Poor-man’s 3D elements
Clearly implementing something like this will never come close to generating true 3D renders on a website, but it is a fun exercise to see how much further we can push simple CSS. Feel free to fork the above CodePen to play around with different colors and shadow placements.