Today, I drew a cartoon character using HTML and CSS. I built it from scratch (which is always fun), and recorded the process. The whole thing took a little over an hour, but at 20x, it is a lot faster ;)
After the recording, I still made a few more changes: made the eyes smaller, created variables for the lines, and adjusted the hair a little.
Top comments (12)
I love your background image + background size trick for creating a reference grid. It's brilliant!
Also, you recently inspired me to try my hand at CSS art. It's nothing impressive, but I made the slightly smiling emoji and the thinking emoji and had a ton of fun!
Gonna watch this today and see if I can learn some tricks from you. Cheers :)
The grid is helpful but a pain sometimes (when i forget that the coordinates are too left).
About your emojis: "nothing impressive"? Those emojis look great and they are really expressive! Thanks for sharing, and thanks for watching 😊
That's really cool art. If someone can do this, it means they literally have good grasp and are very experienced in css. You nailed it bro. I will definitely share my stuff after learning from this video.
Thanks🙂
Gracias Alvaro, I will check the code later!
you replace the svg with css
That's so cool!
Looks Awesome.
Good job
Thanks :)
Wow very cool I never considered using a background grid as an aid for CSS drawings. Maybe next time...
I find it useful in general, but sometimes I forget the position is top-left and mess a little. Give it a try and let us know what you think (plus share the CSS drawing!)
I've always wanted to learn stuffs like this.
But
😪😪😪
You should do it. It's a great way to practice and learn different properties in CSS.