Fun Examples of CSS Imitating Print Design

There’s still some value in having a document or other printed product that you can hold in your hand. And as much as the web has promised a “paperless” world, we’re not there quite yet.

Somewhat ironically, we are seeing some elements of print design translate over to the web. Sure, designers have been attempting to do this for some time. But the advent of CSS Grid and other technological developments have actually made these attempts much more successful than in years past.

The snippets below show that printed items are still on the mind of some very talented designers. Some of them make good use of print techniques, while others are just fun takes on those things you can still possess in the physical world.

The Printed Article

One of the most fun aspects of print design is the premise that borders only hold you back if you choose to let them. There’s nothing that says you can’t have text wrap around a piece of artwork, mimicking its shape. That’s what makes this snippet so cool. We see the possibilities of what a traditional, hand-crafted layout could be on the web.

Trading Cards

Remember the fun of opening a pack of trading cards and comparing your collection with a friend? This snippet makes it fun to “flip” through a stack of virtual cards with the help of GSAP and JavaScript. Maybe the best part is that you won’t have to worry about damaging the cards with your grubby little hands.

Check, Please

Here’s an example of a guest check, just like you’d receive after a meal at a restaurant. It’s an example of how both CSS Grid and Flexbox can make previously difficult layouts easier to achieve. Not to mention that this version is much easier to read than the illegible copies often served up at greasy diners.

Retro Album Cover

Music is undoubtedly a big inspiration to many designers. But it’s not just the recorded tunes that make an impact. Album covers, like this recreation of Sam Cooke’s classic “Twistin’ the Night Away”, embed themselves into our memory.

What’s in the Mail?

I don’t know about you, but I still get excited when an unexpected piece of snail-mail shows up (as long as it’s not a bill or a court summons). The closest we can get online may just be this envelope that you can “open” and subsequently view the greeting card that’s inside. It’s a clever use of JS and CSS animation that will brighten your day.

In Today’s News

The print newspaper is struggling in many parts of the world, as more people get their news online. But this example gives us the best of both worlds. CSS Grid powers the print-like layout, while an API feeds the paper with up-to-the-minute news updates. Even better is that you won’t have to worry about a delivery gone wrong.

Please Take Our Brochure

Printed brochures are still a very common sight. However, they tend to be something you grab and then never actually read. Just think about all the paper we waste in the process. This virtual brochure bodes much better for the future as it both looks amazing and saves trees.

Put It on My Card

As more consumers start paying with mobile apps, it could result in a decline in those little plastic cards we’ve carried around for years. If they do become extinct, this gorgeous recreation will show future generations what they missed out on. It uses CSS transitions and transforms to create a beautiful 3D effect as you hover over the card.

Removing the Limitations of Web Design

The code snippets above demonstrate two things. First, it’s quite amazing to see some of the very print-like layouts that can now be used online. Second, you can leverage CSS and JavaScript to go an awfully long way towards creating realistic objects.

Little by little, it seems that many of the limits web designers have faced are fading away. There will always be differences between print and the web, of course. But the web is doing its best to level that playing field.