An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
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
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
CSS Challenges@challengescssMy first #CSS art
@idrinkcss made "Uchiha Itachi" so here I am with a "Livai Ackerman" #AttackOnTitan #ShingekiNoKyojin
codepen.io/t_afif/pen/MWo via @CodePen twitter.com/idrinkcss/stat00:28 AM - 23 Sep 2021Ronnie Lee @idrinkcss'Uchiha Itachi' Made with #CSS This one took me quite a long time, was a bit complicated than expected.*I'll be sharing the Codepen link in a while in the replies.*RETWEETS ARE APPRECIATED! https://t.co/TIziBB1t4L
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
Original Link: https://dev.to/afif/rate-my-first-css-drawing-51m5
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To