For some time now I've been building a Pinterest board full of CSS shapes examples. I hoped that people would reference it, get inspired, and would build more creative layouts using CSS shapes. The response to the collection was amazing but I haven't really seen any new examples yet. Maybe people are building super creative layouts and I just don't know about them? I don't know.

So! I've decided to set a new goal for myself. I'm going to work through the collection and recreate layouts & designs that I've pinned. Bringing them to life on the web.

The Goal

  • Use HTML and CSS to turn pins into responsive, intrinsic web pages.
  • Add animations when possible.
  • Recreate 1 design a week until I get tired of doing it.

My hope is that by doing this I will not only learn more, but inspire myself to create new creative layouts. I also hope that it will inspire others and show just how powerful and amazing CSS is. I think just about every example in that collection can be translated to the web and maybe become something more.

I'll store all recreations in a collection here.

The Pinterest board is fairly large though and I needed a place to start. So I tweeted for help.

Tweet saying Going to challenge myself to go through my Shapes of Text Pinterest collection and recreate some of the pins. Any favorites I should start with??

Thankfully I got a couple of suggestions!

A tweet with image saying Ooh, just scrolled through and liked this one a lot.

A tweet with image saying was about to post the same. I also love this one.

So it looks like I'm going to start with these two! If there are any others that stand out to you let me know!