Skip to content

FoxyStoat/daily-css-images

Repository files navigation

DAILY CSS IMAGES

#dailycssimages

Thanks to the creator Mike Mangialardi for this wonderful CSS images challenge!

If you would like to read more about it, here are two helpful links:

Daily Challenges

  • Daily CSS Images :: 01 Bear Cub

The challenge begins! Don't overthink it. A cub can be made in only a few shapes.

  • Daily CSS Images :: 02 Elephant

Remember that simple is usually better. Just a face will do, but you can do more if you'd like. Dumbo? Peanuts? What will be your take?

My attempt: OMG, so my attempt looks hideous, the trunk especially needs work and the face reminds me of Thomas the tank engine but with a trunk. The main thing is I had fun and it's giving my CSS skills a boost. Should of kept this simple.

  • Daily CSS Images :: 03 Beaver

Think about how you can continue to keep it simple, but give this a personal touch.

  • Daily CSS Images :: 04 Tiger

Don't worry. It can be still be cute and simple. Just a face is still perfectly ok.

  • Daily CSS Images :: 05 Favorite Animated Animal

End the animal series with a bang! Dig deep and pull out that creativity. Dory? Snoopy? What animated animal would you like to showcase?

  • Daily CSS Images :: 06 Clock

Tick tock! Back to the journey.

My attempt: I am pleased with how it turned out. I styled it on the evil eye and added some javaScript for functionality.

  • Daily CSS Images :: 07 Ruler

This one is gonna rule.

  • Daily CSS Images :: 08 Notepad

Any shape, size, or kind will do.

I started off adding divs for the white paper and the back of the notepad, but then I realised I could achieve this with a box shadow saving me time, effort and kept the code simple and clean.

  • Daily CSS Images :: 09 Calendar

Do something unique.

Flexbox helped alot when it came to the calendar dates.

  • Daily CSS Images :: 10 Pencil Jar

...and anything else it may hold.

  • Daily CSS Images :: 11 Pizza

This week is going to be delicious. Make some mouths water.

  • Daily CSS Images :: 12 Hamburger

Give this image some extra toppings.

  • Daily CSS Images :: 13 Taco

Crunchy or soft?

Radial gradient to create a little texture on the taco shell.

  • Daily CSS Images :: 14 Cheesecake

So many options, make it rich.

During this point in the challenge I lost motivation, I think I just found drawing food boring, so I decided to look into creating a pixel art style for the cheesecake, using a really long box-shadow property.

  • Daily CSS Images :: 15 Pie

Pecan, pumpkin, or banana cream? Slice or whole? What are you feeling?

  • Daily CSS Images :: 16 Frankenstein

Monster week has been constructed. Put pieces together.

  • Daily CSS Images :: 17 Zombie

Mmm. Brains.

  • Daily CSS Images :: 18 Vampire

I want to sucka yo code.

  • Daily CSS Images :: 19 Monster of Choice

This one is up to you, but remember cute and spooky can go together quite well.

  • Daily CSS Images :: 20 Monster of Choice

It's a full moon.

About

#dailycssimages challenge 50 pure CSS images done over 10 weeks

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors