DEV Community

loading...
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
πŸ‘¨πŸΏβ€πŸ’» Software Developer @CGI_Global πŸ–Ό Content Creator. Sharing the mindset and content so you work hard to grow stronger than your past self ☯️
・3 min read

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 out and it is also a good way for more experienced developers to test their skills. The great thing about CSS Art is that it is an area that is not widely adopted outside of social media and personal projects. It is seen as more of a niche area and just a great way to have some fun. However it is so much more than that and while it might not have a huge practical appeal in a commercial environment. It definitely allows a developer to show off their creativity in an unconventional way.

Conventional thinking

The typical front-end developer is expected to build UI/UX and design website mock-ups. Sure this is a great way to see how good a developer can replicate a design in the real world but it does not leave much room for experimentation, imagination and personal creativity. Technical tests are always the same with a developer having to replicate a design. This is where CSS Art can shine because I don't think there are any companies doing it and it is a fun challenge which pushes the developer to the limit as they are forced to learn and figure out some cool new ways to create designs that would normally be created in a design tool.

This new way of thinking also helps you to dive deeper into CSS and it can improve your understanding of layout patterns such as Flexbox and CSS Grid. There are some pretty cool designers out there who have made some stunning CSS Art for social media and Code Pen. Honorable mentions to @prathkum and @AprilynneA on Twitter who have grown a following by creating CSS Art.

Turning my computer desk into CSS Art

After seeing so many people creating CSS Art and turning them into Twitter headers I decided to give it a go myself. It felt like a right of passage or a ritual that every front-end developer should go through on their journey. I took a picture of my computer desk and then tried to replicate it in HTML/CSS you can see the result below.

https://res.cloudinary.com/d74fh3kw/image/upload/v1624893725/Bedroom_Desk_muytlx.jpg

https://res.cloudinary.com/d74fh3kw/image/upload/v1624893723/CSS_Desk_e2hhhi.png

Creating a London Bus out of CSS Art

The next piece of CSS Artwork that I decided to create was that for a London Bus. This time I did not try to replicate the whole picture my goal was to just create the bus which you can see below.

https://res.cloudinary.com/d74fh3kw/image/upload/v1624893726/London_Bus_zwssiw.png

https://res.cloudinary.com/d74fh3kw/image/upload/v1624893723/CSS_London_Bus_icf5i1.png

Bringing Captain America's Shield to life using CSS Art

This was actually the first real CSS Art that I created. It is pretty simple but it is also animated which makes it look really cool. I was inspired to create it after watching a few episodes of The Falcon and The Winter Soldier on Disney+.

https://res.cloudinary.com/d74fh3kw/image/upload/v1624895115/captain-america_hwx8hr.gif

Conclusion

I would highly advise all front-end developers to at least try creating something using CSS Art. Even those of you who think you have no design background can increase your design experience by attempting it. My advice for beginners would be to start with something simple and small. Don't try to create something too complicated to begin with otherwise you will just get frustrated. And start with an easy design so for example something that has a lot of basic shapes like squares and rectangles. Then all you have to do is put them together as a composition. It is as easy as Photoshop when you think of it like that.

CSS Art Positives

  • It is a good fun way to learn CSS
  • An alternative to the traditional build a website test
  • Allows you to tap into your creative side
  • Gives you something unique to share with the community

Final Thoughts

I really hope that you enjoyed reading this article and learned something from it. As a content creator and technical writer I am passionate about sharing my knowledge and helping other people reach their goals. Let's connect across social media you can find all of my social media profiles and blogs on linktree.

Peace ✌️

Discussion (20)

Collapse
inhuofficial profile image
InHuOfficial

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 Author

πŸ˜‚

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 Author

Good point ALWAYS put it on Code Pen 😁

Collapse
andrewbaisden profile image
Andrew Baisden Author

Wow you have some good content on there.

Collapse
michaeltharrington profile image
Michael Tharrington (he/him)

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
attomos profile image
Nattaphoom Chaipreecha

Great article.

Could you tell me what chair is that?

Collapse
andrewbaisden profile image
Andrew Baisden Author

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 Author

Use Flexbox or Grid 😁

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 Author

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
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 Author

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
shikkaba

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.