Posts

Showing posts from November, 2019

CSS3 3D Books on a Shelf

Image
In an attempt to spice up a navigation system I'm working on, I took to CodePen to experiment with some CSS-based 3D books on a shelf.

Although I believe the books turned out pretty good, I dashed the effort in lieu of a more simplistic approach. That aside, figured I would share the books I came up with, primarily because web development projects are fun to share.
Development PhasesBad ShelvesGood ShelvesNarrower ShelvesShelves with Taller Books (latest/most developed) Sources The base for this development effort was in part thanks to Intro to CSS 3D Transforms by David DeSandro. Although I completely overhauled and applied all types of modifications, David's examples provided the initial insights.

Gradient lines for the edged faces on books is thanks to moz://a's MDN web docs.

I originally tried a pseudo :after class for the shelf, but due to perspective incompatibilities, I ended up only using this for the soft blur between books. The pseudo class…