DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for 31 single DIV illustration β€” the DIVtober collection
Temani Afif
Temani Afif

Posted on

31 single DIV illustration β€” the DIVtober collection

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.

san goku

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


You want to support me?

buy me a coffee

OR

Become a patron

Top comments (9)

Collapse
 
monaalkhathlan profile image
Mona Alkhathlan

Number 25 The Dip, my favorite. An amazing work.

Collapse
 
madza profile image
Madza

Always been impressed with your CSS skills πŸ˜‰
Top notch stuff right here πŸ’―

Collapse
 
jerzakm profile image
Martin J

I'd like to be original, but this is indeed awesome. CSS is definitely my weakspot and checking out your work is always fun!

Collapse
 
dailydevtips1 profile image
Chris Bongers

These are amazing!
Find it so impressive you can do all this with one div!

I even struggle to do it with multiple ones.

Collapse
 
madsstoumann profile image
Mads Stoumann

Awesome work!

Collapse
 
gomandev profile image
Gomandev

This awesome! πŸ‘

Collapse
 
grahamthedev profile image
GrahamTheDev

Ending on a bang there, "the end" (spooky) is great!

Love all of them! ❀

Collapse
 
calsch profile image
CalSch

This is amazing 🀩. Also, can I use the fancy one in my own project? I think it looks really cool.

Collapse
 
afif profile image
Temani Afif Author

yes you can ;)

🌚 Friends don't let friends browse without dark mode.

Just kidding, it's a personal preference. But you can change your theme, font, etc. in your settings.

The more you know. 🌈