DEV Community

Temani Afif
Temani Afif

Posted on • Updated on

Rate my first CSS drawing

I have been hacking with CSS for a long period but I never made any CSS drawing or CSS art. I think it's time for another CSS hacker to join the club!

I took one of my favorite anime character and I tried to do something in one day to see my level before spending more time.

I came up with this

It will not work on Safari, scroll down to the embed tweet to see a screenshot

Not that perfect but quite good for a 6h work. I would have done better if I considered an easier illustration but I took a complex one as a reference ๐Ÿ˜ณ ๐Ÿ‘‡

Livai ackerman

Few notes:

  • It's responsive.
  • I used a lot of clip-path. A good technique for responsive but a pain to handle.
  • I tried to keep a reduced HTML code
  • I used an SVG filter to smooth up a few edges (related post: https://dev.to/afif/css-shapes-with-rounded-corners-56h). I am not proud of this one but I wanted a fast solution to end my drawing before midnight. Next time it will be a CSS-only solution.

I tweeted about it yesterday in case you want to retweet it or draw the attention of a CSS artist ๐Ÿง

Let me know what do you think ๐Ÿ‘‡๐Ÿ‘‡

โœ”๏ธ This is amazing, we want more like this!
โŒ Don't do this anymore ๐Ÿคฎ we want more tutorials and funny collections but no more drawing please!

PS: If you will choose the โŒ, I will haunt your dreams for the rest of your life ๐Ÿ‘น

Top comments (27)

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Canโ€™t wait to see it on PC as a screenshot never does it justice. Looks awesome though! ๐Ÿ”ฅ (In all fairness the Safari version of your art is still better than I can do even with the issues you mentioned ๐Ÿคฃ)

As for voting, I vote more of your other stuff, purely because I love picking up useful skills and tricks from you, CSS art isnโ€™t useful (as SVG is far quicker and more useful - controversial or what!) CSS art is just fun (and impressive!)

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

I just had to respond and recreate the same image but as SVG!

A new war perhaps? ๐Ÿ˜‰๐Ÿ˜‹

Collapse
 
posandu profile image
Posandu

One liner --- codepen.io/Tronic247/pen/RwgYRGg :O :O

Thread Thread
 
auroratide profile image
Timothy Foster

Ha, nice! If I wasn't busy with something, I was considering a pixelart box-shadow solution, but you beat me to the punch anyway ^^'

Collapse
 
posandu profile image
Posandu • Edited

โœ”๏ธ This is amazing, we want more like this!

Sorry @inhuofficial
TkhCNVZUYzNhVkJKUmxKdllWaE5aMkZZVFdkWlZ6Rm9aVzFzZFZwNWQyZGtNbFZuWkRKR2RXUkRRblJpTTBwc1NVZDRjR0V5Vldka1IyaHdZM2xGUFNBPT0g

Collapse
 
afif profile image
Temani Afif

I hope it's not a "hash" method because it's a one-way function ๐Ÿ˜‰

Collapse
 
siddharthshyniben profile image
Siddharth • Edited

โœ”๏ธ This is amazing, we want more like this!

PS: If you will choose the โŒ, I will haunt your dreams for the rest of your life ๐Ÿ‘น

๐ŸคฃLOLYou here?You can't read this...๐ŸคฃLOLYou here?You can't read this...

Collapse
 
auroratide profile image
Timothy Foster

It's super cool you can do this with CSS! Love the details like the slight skew on the irises to give them some feeling of depth.

As an aspiring artist, I like seeing stuff like this, personally.

Collapse
 
syntaxhacker profile image
syntaxhacker

shinzou wo sasageyo!

Collapse
 
kirzin profile image
0xKirz

Dude this is great ! those numbers scared mee.

Collapse
 
amansinghbhogal profile image
Aman Singh Bhogal

This is awesome โœŒ๐Ÿ”ฅ

Collapse
 
__manucodes profile image
manu • Edited

wow this is sooo cool!
you are so much better than me at css.
๐Ÿคฉ

Collapse
 
dailydevtips1 profile image
Chris Bongers • Edited

Wow amazing! Well done

Collapse
 
insidiousthedev profile image
Insidious

Looks awesome!
Keep up the great work!