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.
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
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.
- Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019
- Our 100 Favorite CSS Libraries, Frameworks and Tools from 2018
- Spread the Word: Beautiful Testimonial UI Examples
- 10 Examples of Unorthodox Shapes Created with CSS
- 8 Code Snippets That Demonstrate the Power of CSS Grid
- Better Layouts Through CSS Flexbox
- 10 Handy CSS Grid Code Snippets