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.
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.
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:
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...
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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...