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.
This is what I ended up creating:
See the Pen CSS Orb by Bradley Taunt (@bradleytaunt) on CodePen.
The HTML
Prepare for your mind to be blown:
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.
The CSS
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.