I recently hit the halfway point in my 100 days of CSS art journey - I've learned a lot since I started - you can read about it in my last post:
...
For further actions, you may consider blocking this person and/or reporting abuse
Where do I learn to make CSS art ? The problem which I face is after reading any such tutorial the only thing I know to make now is sheep and sheep with different colours.
A lot of making CSS art is trial and error.
After making a sheep, you know how to make circles and place them on the page. Think about other simple images that can be made from circles and squares on a page - a smiley face, a dog.. a lot of things!
Like all artistic endeavours, (perhaps unfortunately) practice, trial and error are the ways most people learn. That's certainly how I've learned.
If you get stuck for inspiration, have a search on CodePen for CSS art and you'll find a whole range of examples of varying complexity you can try and recreate - and you can dig into the original's code when you can't see how they did something.
๐ I'll try what you said . ๐
Also check out this thread of resources - hopefully it can help!
What I did when I got started was looking for images (actual pictures), and then try to replicate them as well as possible in CSS. It's a lot of playing around with positioning, borders, shadows and gradients.
That reminds me! There was a nice article I saw on here which suggested adding your reference image as a background you can trace over - I haven't tried it myself, but could be a fun experiment:
REALISTIC CSS ART HACKS
ellie-html ใป May 29 ใป 4 min read
I've never traced it as a background image, that's an interesting approach I might try next time. I usually open the image in another program (like Figma or Sketch) to measure the sizes and pick the colors.
Wrote two articles on that method:
dev.to/fossheim/how-i-recreated-a-...
dev.to/fossheim/re-creating-a-maci...
Thanks for the tutorial! I've enjoyed creating a ship, but, as you said in earlier articles, the best way to learn is to take inspiration from your everyday life and invent your own projects.
I'd like to learn more about paths in CSS (for example, motion paths). Some artists use them to create fairly complex shapes. Do you have more articles on that subject?
My sheepy btw:
codepen.io/Nerdifico/pen/RwrEmjq?e...
Your sheep is so cute! I love the wee mouth!
Unfortunately I don't have any articles on this yet, but hopefully in the future! I've been building my skills as I go, and still have a lot to learn in this area ๐
Thanks for the tutorial and congratulations on your 100 days of CSS art journey. I'm inspired by you and I'll try to do one CSS art every day.
My CSS sheep look around and amazed by the nature's beauty. codepen.io/NikhilKumaran/full/wvMZrYR
Really love the animation! Nice work ๐ช
CSS art is just ๐คฏ to me! This sheep is so cute.
It's like ๐คฏ to me too most of the time haha!
Thanks for posting this Suzanne, this was a lot of fun! ๐
I took the sheep a step further (literally) by creating a tiny animation to walk:
codepen.io/lgm527/pen/ZEQmPZZ
I went a step ahead and added a wobbly head as well ๐
codepen.io/haseebelahi-the-looper/...
I love it! The head tilt is so cute ๐
OMG that's brilliant! Love the animation โฅ๏ธโฅ๏ธ
Thank you! Definitely hoping to do more ๐