Steal (CSS Styles) Like An Artist

Steal (CSS Styles) Like An Artist

In Austin Kleon's excellent book, Steal Like An Artist, he outlines 10 rules to follow to produce great creative work. While all 10 rules are absolutely worth taking to heart, we're going to focus on the one the book is named after: Steal Like an Artist.

While the keyword of this rule, "steal" is mostly meant as a nod to the Picasso quote, "Good artists copy. Great artists steal", Kleon offers a more detailed approach to this process:

You should always be consuming and taking notes about work in your field, and you should collect them to help develop your own taste and preferences

For Web Developers, the answer should be clear: Take notes from the websites you admire. Whether that's a UI choice, a CSS style trick or a user experience feature, you should collect these snippets of other sites and think through why you like them.

One of my first "Ah, ha!" moments as a web developer was when I was trying to make my first mobile hamburger menu for a client. I ended up making an ugly, peeling-downward hamburger menu that looked awkward and would paritally obscure text while it was unrolling.

Since I'm not a web designer myself, I turned to people who knew better than me: AirBNB. I checked their mobile site, and found an incredibly smooth slide-down hamburger menu. I inspected the menu, and found these glorious lines of CSS that I've used for many other projects:

transform: translateY(0px);
transition: transform 304ms ease-out;

It was a simple approach, but I had no idea something like this could be so easy with CSS. All I had to do was apply a toggling "menu-active" class with some JavaScript and give my menu an initial value like transform: translateY(-100%).

poster-8-500x666

From this snippet, I also created some horizontal hamburger menus by using translateX instead of translateY. By reworking this clever bit of CSS, I was able to create solutions for several different mobile menus.

Now whenever I see something I like on a site, I'll save it as a Gist for personal reference. And then next time I think "I need a mobile menu animation...", I have a toolbox full of snippets I can refer to.

For the more design-challenged developers (myself included), it's a huge relief to have a backlog of styling snippets at your disposal, especially when they were likely created by more experienced designers / developers.