Faking 3D Elements with CSS
Tutorial on how to design a pure CSS object that gives the illusion of a 3D element
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:
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.
First we give the bigger orb element (
.main-orb) the default styling needed to represent a 2D circle:
Next, we include both
: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.