DEV Community

Cover image for How creating CSS Art can make you a better developer

How creating CSS Art can make you a better developer

Andrew Baisden on June 29, 2021

Creating CSS Art is one of the best ways to improve your front-end programming skills as a developer. It is good for those who are just starting ou...
Collapse
 
grahamthedev profile image
GrahamTheDev •

For a split second I saw the "turning my computer desk into CSS art" title and thought the first image was with CSS - I was about to rage quit the internet for the day! (not that your actual CSS version didn't nearly make me do that! 😋😁)

Great work, I love the detailing on the bus!

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan •

It is actually possible to turn photos like that into CSS (although I wouldn't recommend it for practical reasons because the performance is horrendous!). I wrote a generator to do this a few years back: ashleysheridan.co.uk/blog/Single+D...

Again, not for production use, it will probably kill a lower end device/computer. It was a bit more of a thought experiment for me.

Collapse
 
afif profile image
Temani Afif •

wait, the first image is not the one made with CSS ?? 😕 (removing my ❤ ...)

Collapse
 
andrewbaisden profile image
Andrew Baisden •

😂

Collapse
 
afif profile image
Temani Afif •

Important note when creating CSS art: always share your code because many people will get convinced only when they see the code (sometimes they will not believe it even if they see the code 😝)

Collapse
 
andrewbaisden profile image
Andrew Baisden •

Good point ALWAYS put it on Code Pen 😁

Collapse
 
andrewbaisden profile image
Andrew Baisden •

Wow you have some good content on there.

Collapse
 
michaeltharrington profile image
Michael Tharrington •

These are so dang awesome — loving that bus!

Collapse
 
eljayadobe profile image
Eljay-Adobe •

The Simpsons, in CSS art.

Collapse
 
braydoncoyer profile image
Braydon Coyer •

Completely agree! Making grids can only take you so far; you start really understanding CSS if you take it further like making art.

Here’s some of my art:
codepen.io/braydoncoyer

Collapse
 
kathybowing profile image
Kathy Bowing •

Excellent article!

Collapse
 
devdantediaz profile image
devdantediaz •

Now I want to create my own Twitter header using CSS. Do you have any repos with some practice CSS drawings?

Collapse
 
andrewbaisden profile image
Andrew Baisden •

Sounds like a great idea wish I did. It's not too difficult just find a cool picture of something simple and try to replicate it. Easier to start with square and rectangle objects. So like boxes, wardrobes etc...

Collapse
 
alifarhad profile image
Farhad Ali •

so how do you center a div again? 🤔

Collapse
 
andrewbaisden profile image
Andrew Baisden •

Use Flexbox or Grid 😁

Collapse
 
attomos profile image
Nattaphoom Chaipreecha •

Great article.

Could you tell me what chair is that?

Collapse
 
andrewbaisden profile image
Andrew Baisden •

This one but it looks like its discontinued now

John Lewis & Partners Lumbar Office Chair, Black

Collapse
 
stillcompiling profile image
Ezītis Mācās •

Any resources you'd recommend for those who are wanting to start out creating their own CSS art?

Collapse
 
andrewbaisden profile image
Andrew Baisden •

Good question. I taught myself how to do this. However I will probably create a resource so other people can learn 😊

Collapse
 
shikkaba profile image
Me •

That bus. It's great. It has all the right shapes. But... something is very wrong with the angles. I'm sorry, I can't stop seeing it, and you really did do a good job overall.