After my first CSS drawing here I am with more CSS art. This time I spent 31 days with the CSS master Lynn Fisher in order to acquire some ancestral powers around the single DIV.
The challenge was to follow a prompt and create a CSS illustration each day during the whole month of October. Say hello to #divtober
PS: click on rerun at the bottom right to run the pen again. Not all of the demos have an infinite animation.
1. Fan
Let's start with a Japan style hand fan
2. Watch
You missed the last keynote of Apple? Don't worry, find below the full replay:
3. Quick
A quick sword slash! 👀👀
Roronoa is preparing for the next fight.
4. Loop
An infinite loop animation. Will they touch each other?
5. Tired
I am already tired after only 4 days...
6. Hungry
Hurry up and grab a slice!
7. Toxic
Warning!
8. Growing
Let's take care of the nature
9. Homonym
I choose the word "bat" so here is a bat with a bat
10. Organized
We are already at day 10. Let's take a look at the calendar.
Still 21 to go 🥵🥵
11. Slice
You like cheese, don't you?
12. Squeak
I don't know the word "squeak" but it's seems to be the sound produced by a mouse.
It's not the case of mine 🤔 (🤭)
13. Camouflage
Someone is hidden here. Find him!
14. Fancy
15. Float
Oh! a letter from my parents. Yes, I am doing this challenge on a lost island.
16. Snow
An island where there is no snow...
17. Stack
When the stack overflow.
18. Shine
Say hello to my friend Sunny.
19. Nostalgia
Some nostalgia with Mario. Hover the box to earn coins! Sorry Firefox users, you cannot play the game.
20. Journey
The road to success is hard, long and — responsive 😛 (yes, yes! Adjust your screen size and see the result)
21. Magic
Hover the hat and TADA!!
Oops, where did the rabbit go again?! And what the hell is that animal 😩
22. Critter
Hey, Duo here! Let’s learn some Japanese?
Duolingo will not pay me for this ad
23. Loud
24. Smelly
A wild Koffing appeared!
25. Dip
A deep friendship. I meant, a "dip" friendship 😜
26. Spice
I don't think the below are friends...
27. Film
The Star Wars famous scene like you have never seen!
For this one I picked one of my old illustration from here: https://dev.to/afif/still-100-css-loaders-for-your-next-project-57hp#the-famous
28. Dots
Meet the Daldots! the new CSS villains
If you don't know the original cartoon, click here
29. Fruit
What smoothie are you? select your fruit!
30. Contrast
Tailwind developer VS CSS developer. Choose your road!
Both lead to the same destination but ...
I won't tell which one is which because I am pretty sure not everyone will see it the same way 😜
31. Spooky
It's finally over! it was fun but exhausting 😵
Don't forget to tell me your favorite one 👇. Follow this link if you want to see what the others have made: https://twitter.com/hashtag/divtober?src=hashtag_click&f=live
Wait for more crazier and funny CSS art! I will get back with more superpowers!
Follow me on twitter if you don't want to miss some cool stuff I share there: https://twitter.com/ChallengesCss
OR
Top comments (9)
Number 25 The Dip, my favorite. An amazing work.
Always been impressed with your CSS skills 😉
Top notch stuff right here 💯
I'd like to be original, but this is indeed awesome. CSS is definitely my weakspot and checking out your work is always fun!
These are amazing!
Find it so impressive you can do all this with one div!
I even struggle to do it with multiple ones.
Awesome work!
This awesome! 👍
Ending on a bang there, "the end" (spooky) is great!
Love all of them! ❤
This is amazing 🤩. Also, can I use the fancy one in my own project? I think it looks really cool.
yes you can ;)