I want to draw the following picture with CSS. I am confused on how to start. could anyone help.
Why do you want to reproduce a pic in css that you already have a pic of? I’d have no idea where to start either. I’d just use the pic.
I want to start a blog. And use this photo as a background, but want to animate it so the leaves move.
Does that really add to your user experience?
Maybe, I don’t know. But the image seemed to be relaxing. So what I am thinking is to have this image drawn in such way that it makes the reader bit relieved. I want to have the leaves move with a breeze. I don’t want to draw the exact image, but something that has the essence of the image.
You probably should use a video, not a pic in your case .
Haan that’s a good idea. I will try it. Thanks!
Making such complex images with HTML/CSS is possible, but I think it’s borderline insanity tbh. Here’s an example of the Mona Lisa, it’s made with one <div> and 7500 different box-shadows:
Another impressive one:
You’ll find more if you search for “CSS painting”, most have a link to a codepen or github so you can check out the code.
wooh,looks very beatiful,I like it
Those are very impressive. Excellent mastery of css by the creators. For the time it would take to code I think I would still use a pic, lol.
Yes, it’s very beautiful.
Yes, I checked them out they are very impressive, but takes hell lot of time. So as @eoja suggested I plan to use short videos as background, will keep 5-10 sec videos in an infinite loop with sound muted.
can I suggest a gif instead? an hidden video can be hell on loading speed, and you would cut out anyone with slow connections
yeah very true, Gifs are better than videos so I trimmed the video I was uploading to a 5 sec clip.
Here is how I want to implement it, I didn’t format the text, but this gives an impression of how I plan to use this. It’s not complete, I am working on it. https://foolsndreamers.netlify.app/blog.html
The reset on the short video is noticeable.
Just another idea. What if you used a background image with a css rain effect?
Here is code for the rain (credit goes to Aaron Rickle):
His code with a background image and the opacity of the rain drops removed. You could play around with it a bit to adjust how noticeable the rain is.
Or maybe you could do something similar with a leaf animation like you were originally trying to do. There’s lots of examples css leaf animations.
Yes I will try this. this seems better than gif.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.