Sometimes it’s useful to embrace your laziness!
As SitePoint’s in-house book cover designer, I have two main tasks:
- To produce the single-piece wrap-around cover design for our Print-on-Demand process (Indesign work)
- To make a faux-3d image of what that book will look like in the real-world for product pages.
As you might guess, that second part is fairly repetitive Photoshop ‘grunt work’. Distort each 2d face onto the shapes of a 3d book image.
And if we want a slightly different view of the book for a different part of the product page, I’m pretty much resigned to creating a new graphic from scratch.
What if we could farm that second task out to pure CSS? Could we get a better, more flexible result?
##Spoiler alert: You can!
Here’s a CodePen of my solution.
I’ll leave the nitty-gritty technical stuff to a separate post but I thought I’d cover some of the obvious questions here.
###Why do it?
Does ‘It’s more fun than Photoshop’ count?
The flat-color versions of these covers compress beautifully as PNG, so we can afford to send a single, reasonably high-resolution file. That’s one HTTP request that we can reference in 2, 3 or 4 different views and scales.
If you think about it, we stopped using FONT tags because we didn’t want a transitory presentation decisions to be locked into the content. This has a similar feeling to me.
The original framing decision for a product shot could be very much linked to the shape of the original layout it inhabited. This approach can un-couple us from permanent layout decisions.
###How does it work?
I’m trying to keep the HTML lightweight but sensible.
Two DIVs display the front and back cover respectively as background-images. Background-position ensures we’re seeing the right parts.
The other edges and spine are all pseudo elements (:before and :after). A wrapper DIV groups them. The outer DIV is the ‘3d stage’ we work in.
In production the idea is to chain CSS classes to the ‘stage’ to compose the shot – .cam-high, .cam-low, .clockwise45, .anticlockwise15, .large, etc.
You’re really animating it?
Animation is a side-benefit rather than the goal here.
I’m animating the demo mainly to make it clear that you’re not looking at a flat JPG. In production we may animate (or transition) the book on hover.
The goal was to replace static, hand-made JPG images with something easier and more versatile.
###But it doesn’t look flat now
In my first attempts I nailed the 3d transforms but the color was far too flat to fool the eye. Real-world books catch light and shadow.
Luckily we can do a reasonable job mimicking this behaviour with CSS linear gradients. My gradient transitions from transparent, to smokey white to smoky black to transparent.
It’s effectively a transparent version of this gradient.
Using multiple backgrounds I’m layering an over-scaled gradient across each of the shiny surfaces to create uneven lighting.
It’s surprisingly effective to animate the position of the gradient as we rotate the model. It’s subtle but it adds a lot without much overhead.
###Downsides?
There aren’t too many. Small rounding errors in the CSS can leave razor thin gaps along some joining edges. Slightly adjusting the angle can often be enough to fix it.
I’m not ruling out a fix – perhaps an inner box-shadow in gray? – but I haven’t got it yet
Older browsers won’t understand the 3d CSS properties. This means they’ll render the cover flat – no disaster there. Ideally we’d turn off those pseudo elements.
###Other applications?
Obviously it’s going to be difficult to do this with effectively with, say, t-shirts and tennis shoes.
Nevertheless anything from software to CDs to DVDs to breakfast cereal or any other boxed product could benefit for this approach.
So what do you think?
Originally published in the SitePoint Design Newsletter
