CSS Telephone Booth

This drawing in particular really opened my eyes to how much I use basic shapes in CSS art. When I say basic shapes, I'm talkin squares, rectangles, circles, ovals, triangles, lines. Utilizing your tool belt of shapes allows for some really cool CSS art! If you practice using these shapes with `box-shadow`, `linear-gradient` and some other cool tricks, you can recreate any picture on the web using CSS and a bit of markup!

Creating CSS art takes time

Remember creating these illustrations takes time. Some of the basic drawings might only require a couple hours of work, but as you move into more complex replications and drawings, it can take many hours if not days to perfect. I didn't say it would happen overnight.

But the feeling of accomplishment after finishing a CSS drawing is unrivaled.

Where to look for images

When I'm looking for a new css art idea, I start by searching for images online. Usually by typing in the keyword (ie telephone booth) and saving 3-5 images that I wanted to stare at for a few minutes each before deciding which made the most sense in my head to start making.

I also look for things to make with CSS over on dribbble. I found the red telephone booth which is the topic of this post on dribbble.

Want to learn more?

CSS art has turned into a hobby of mine and I can attribute essentially all of the skills I've learned from this article: Single Div Drawings by Lynn Fisher.

Comments

[Ben Sinclair]

I know it's a hobby, but I see more of a reason to make the single-element images. You can use them in the real world (maybe not in such an extreme way!).
I mean, you can take an existing element (preferably not a div) and make it look impressive.

The thing you're doing here, which is commonly misnamed "pure CSS images", is a fun exercise but doesn't have a real-world application.

Wait, I'm not trying to be negative here! What I think you're doing is pretty close to SVG, which would be a more useful thing to get good at, because you can throw SVGs in anywhere you like and at the end of the day they're not restricted to HTML, they're a generally great design skill to have.

You're talking about using basic shapes and that's where SVGs excel. Software like Inkscape and (in more recent versions) Adobe Illustrator read and write SVG as their native format and it's understood by all modern GUI browsers.

[Tanner Dolby]

You couldn't have put it better. This sort of multi div markup paired with a bunch of CSS can make impressive stuff, but the extent of this being shipped in production is zero. I think that the potential for single div or whatever element and utilizing some psuedo classes can have a few use cases (if done well) but then again I'm still learning web development myself :)

This introduction with CSS and basic shapes is what I've been doing as practice before diving into Inkscape. I've messed around with some SVGs from Flaticon but haven't even scratched the surface. I'm excited to start learning SVG and in the meantime, this hobby will continue to provide me some fun. Thanks for the feedback Ben!