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
 
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
 
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
 
kathybowing profile image
Kathy Bowing

Excellent article!

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
 
annejsize profile image
Jenna King

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.