Learning from the Masters of Design
Tags: html, css, design, webdev
Published: 2021-12-04 17:12:48

I recently bought two **huge** books on the history of graphic design from Taschen – here's volume one:

![History of Graphic Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3nklczeplni7pzxd6u4v.jpg)

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:

![Blue Columns](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/beyglufxogl1ml0ht3hv.jpeg)

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:

```css
.columns {
  display: grid;
  grid-template-columns: 16fr 8fr 4fr 2fr 1fr;
}
```

Adding five `<div>`s inside a wrapper with `class="columns"`, we get this:

![Five blue columns](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4q23qmxe4078w9hal55i.png) 

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:

![Finished Blue Columns](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxeqz2hyrkcc7tgazv8f.png)

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`:

{% codepen https://codepen.io/stoumann/pen/MWEaVPL %}

---

Let's look at another example from the book – a beautiful, old movie-poster:

![No Way Out](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1vbwkv99k14ndv76i1o.jpg)

For me, this screams “clip-path” – so that's what I did, a bunch of layered `clip-path`s:

{% codepen https://codepen.io/stoumann/pen/WNoxbLX %}

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:

![Red Circle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bush8b10gkz99uyawnt.jpg)

I've started to create the red circle, using a `radial-gradient`:

```css
.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%;
}
```

![Red Circle CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77ra6g0ldnnnwvwi56mi.png)
 
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.