I recently bought two huge books on the history of graphic design from Taschen – here's volume one:
As each book weighs more than 4 kg, I can only read for about half an hour, or I'll lose the blood-circulation in my legs!
I find it very inspirational to look at beautiful designs from these masters of design.
One thing I tend to do, and can highly recommend, is trying to recreate a classic design to something you can use on the web.
Take a look at this simple example:
How would you do this in HTML and CSS?
There's no right or wrong answer – and you can probably think of many ways of accomplishing it. And that's the beauty of it: You can chose to do it in a known and familiar way – or chose to challenge yourself, going into unknown territory.
Either way, I guarentee you'll learn something. I always do.
Now, back to the blue columns. Notice how each blue column is half the size of the previous column? In CSS Grid, with the smallest column being 1fr
, it's:
.columns {
display: grid;
grid-template-columns: 16fr 8fr 4fr 2fr 1fr;
}
Adding five <div>
s inside a wrapper with class="columns"
, we get this:
Now, it's only a matter of translateY()
'ing columns 2-4, adding aspect-ratio: 1/1.75
to the first column, and we have the initial version:
How can we “webify” this? That's up to your imagination! For me, the columns look a bit like books on a shelf, so I'll add some dynamic font-sizing using clamp()
and set the writing-mode
to vertical-lr
:
Let's look at another example from the book – a beautiful, old movie-poster:
For me, this screams “clip-path” – so that's what I did, a bunch of layered clip-path
s:
I also figured this could work as a custom header for an article – so I wrote a small piece on the “imposter syndrome” (something I have to deal with from time to time).
One final example
There are hundreds of beautiful designs in the Taschen-books – currently, I've fallen in love with this:
I've started to create the red circle, using a radial-gradient
:
.circle {
aspect-ratio: 1;
background-image: radial-gradient(circle,
hsl(3deg 94% 28%) 50%,
#FFF 0 52%,
hsl(3deg 94% 28%) 0 57%,
#FFF 0 59%,
hsl(3deg 94% 28%) 0 64%,
#FFF 0 66%,
hsl(3deg 94% 28%) 0 100%
);
border-radius: 50%;
}
But then again, I might switch to svg
, animate the indivdual rings, add text-on-a-path etc.
Maybe you might find this whole “recreate classic designs in CSS” silly or a waste of time – but believe me: it's fun, challenging, and always a great way to learn new stuff!
If you've become inspired to do something similar, or already have done, please share links to your work in the comments.