DEV Community

Cover image for REALISTIC CSS ART HACKS

REALISTIC CSS ART HACKS

ellie-html on May 29, 2020

The secrets of creating realistic CSS art, it's simple I promise! I am going to show you how easy it is to make Realistic CSS Art using a simple w...
Collapse
 
conermurphy profile image
Coner Murphy

Love the breakdown Ellie, would love to see more; especially the code behind the art. I like seeing the code and methods used by someone who is a lot better at CSS than me, it's great for learning.

Also, do you consider making your CSS art responsive? Would be curious to see how that would be implemented for an object like this using clip paths and such.

Collapse
 
saurabhdaware profile image
Saurabh Daware 🌻

whaattt🤯🤯🤯🤯 This is sooooooooo cooool!!! 😭😭🎉

Collapse
 
jckodel_96 profile image
J.C.Ködel

The art of using a fork to nail a nail on a wall... Why use a simple SVG while you can do a much harder work using CSS?

Collapse
 
clockwerkz profile image
Carlos

It's about talent, not the tool.

Collapse
 
trippymonk profile image
Blake Stansell

Yes, God forbid someone who enjoys CSS push herself with more in depth projects...

Let's all just do the easy way.

Collapse
 
sparzipan profile image
Ally

It's about experimenting and using a medium that you enjoy. In the same way an artist might choose charcoal over watercolour. Ellie enjoys using CSS to create art.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 • Edited

I agree to some extent, SVG was indeed designed for vector graphics, and certainly has interoperability with JS and html due to its XML nature, thus making it the perfect way to go for non raster works of art. You are not wrong.
But at the same time you have to admit this is impressive, I know I would go the easy route because that is what my job entails. Do this in hand written GLSL and im sure you might get the same buzz, its not easy and thats why people do it for funzies.

Collapse
 
pozda profile image
Ivan Pozderac

So, it seems like same concept I got on drawing things, just separate whatever you want to draw into easy geometric shapes (circles, triangles, squares, parallelograms etc..) then combine them and last step is to go wild with shades/coloring.

Great presentation and easy to understand! I saw some other of your CSS-art, very creative way of showing CSS mastery!

Collapse
 
clockwerkz profile image
Carlos

Love this breakdown, thank you for taking the time to talk about your process!

Collapse
 
chirine_br profile image
Chirine |

It's thanks to you that I discovered css art, thank you very much for your article ! I'm going to practice my first css art today :)

Collapse
 
favouritejome profile image
Favourite Jome

Thanks alot for the tips and tricks

Collapse
 
robertgroves profile image
Robert Groves

Love it! Thank you for sharing and walking through your process.

Collapse
 
vagoel profile image
Varun • Edited

You have provided a new dimension to CSS and learning the way you chunked the problem provide confidence to many like me -I can do it as well !!

Thanks for this amazing post Ellie !

Collapse
 
ben profile image
Ben Halpern

Wow