Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 24, 2021 12:30 pm GMT want CSS art you got it! My first ever CSS art.

In my last post I recreated an image in SVG to prove how easy it is compared to CSS.

All the CSS fans came to shout at me for bashing CSS or not using now I have built the same image in CSS, hopefully that makes everybody happy!

Original image

Livai Ackerman

CSS version

See, CSS art is easy too!

OK wow, how did you do that?

In the previous post I cheated and created an SVG of the image.

This post is no different, I cheated again!

All I did was write a little script (well, actually it was quite a monstrous script as you can't have curves in polygons!) that converted the SVG <path> information into polygon() coordinates that CSS can understand.

The script also had to grab the styling information and generate the HTML and CSS.

So we have 977 <divs>, each with auto generated IDs...that correspond to CSS rules...that are all using clip draw shapes and with classes to set the colours. Talk about excessively complicated!

additional: as @afif pointed out in the comments you should never just copy and paste CSSI was miles into coding this (with hard coded spaghetti code!) before I realised I didnt need pseudo elements to create the clip-pathssometimes my brain just doesnt work!

You happy now?

All the CSS mega fans will now be happy that I have finally drawn my first piece of CSS art...can I go back to my precious SVGs now?

As always, this was just a bit of fun, I am only kidding, CSS art is cool, especially when done with skill rather than cheating like me!

Have a great weekend everybody!

Original Link:

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To