The CSS Art of Ben Evans | Frontend Horse

Howdy, Frontend Friends, and welcome to the web dev riding trail! This week we’re taking a look at the work of Ben Evans, a frontend developer, designer, and illustrator. Ben is perhaps best known for his detailed and lifelike CSS illustrations.

We’re digging into four of his most detailed pieces to find out how he created them! I learned so much while writing this issue, I’m excited to share it with you.

I’ve also got a livestream announcement at the bottom of the issue, so don’t miss out on that!

The Work of Ben Evans

The Work of Ben Evans, with several screenshots of his CSS work. A portrait of a girl, a playing card, a glass of water, and a beach landscape.

I could write pages about how detailed and beautiful each of these pieces are. I love when people push the limits of HTML and CSS, so we had to bring Ben in and learn his techniques!

Unique HTML

The first thing that struck me when I look through Ben’s code was HTML. There’s an intense amount of styling happening, and yet he isn’t using a single class or id. For example, here’s the first 12 lines of code in his landscape piece:

<landscape>
  <sky>
    <x>
      <x></x>
      <x></x>
      <x></x>
    </x>
    <x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      ...</x
    ></sky
  ></landscape
>

Ben explains that he’s obsessed with small code and likes the appearance of the <x> elements. They’re custom elements so there’s no default CSS to battle against. For your own mental model you can think of them as behaving just like divs.

So how does he style all these elements if they don’t have classes?

Styling with nth-of-type

Ben creates a bunch of elements in his HTML and then moves to his CSS. There he doesn’t need to worry about naming each bit, because he’s using the nth-of-type selector. This way he doesn’t have to name things or change his HTML.

You might think this makes it harder to keep track of, but Ben leaves comments by the major pieces and that makes it easier to sort through.

A great tip from Ben for anyone trying CSS illustration: Start with the background and work forward instead of using z-index or translateZ. Ben says, “Safari in particular gets very confused with pseudo-elements and z positioning.”

Frontend Horse Livestream

I’ve got some huge news! I’m doing the very first Frontend Horse livestream next week!

While I love digging through code, writing questions for developers, and getting answers back, I think it’s would be SUPER fun if it’s all done live! I’ll sit down with developers to talk about their work and learn their techniques.

For the first episode, I’ll be joined by the amazing Adam Kuhn! He has so many fun CodePens, I can’t wait to find out how they work!

Mark your calendars and subscribe to be notified when we go live!

Where: On Twitch!

When: Wednesday, August 5th, 6PM EST (Click here for the event in your timezone)

Hope to see you there with your best horse puns in chat!

So Long, Partner

Well, that’s the end of the trail for this week. I appreciate you riding with me.

Follow @FrontendHorse on Twitter, and if you enjoyed this, share it with a friend or tweet about it.

Special thanks to Ben Evans for speaking with us about his work. Go check out his website and follow him on Twitter.

And don’t forget to catch the livestream on Wednesday, August 5th!

This is the part where we ride off into the sunset. You take care.

Your Neigh-bor,

Alex