January 29, 2020 by Kayla

CSS Image Challenge – Time

In my 2019 year wrap up, I hinted at new content that will be taking place on my personal site. So without further ado I like to present my CSS IMAGE monthly challenge. For those who have previewed my CodePen profile, you will already know that I really enjoy creating what is known as a CSS Image where all of the image is created using only HTML and CSS (or other provided programming languages).

So here is the rules:

  1. Each month I have to publish a new pen
  2. CSS image must be based on a randomized theme of the month (January Theme: Time)
  3. All CSS images must include animation

Very simple but I think we are gonna see a awesome collection by the end of the year. If you create your own CSS Images be sure to share them with me.

January CSS Image – Time

See the Pen Time (CSS Image) – January by Kayla Wiest (@sakoi_) on CodePen.

This months theme is Time and it took me a while to figure out what type of inspiration to do but then I stumbled upon a screenshot from a video game call Bravely Default (If you like turn based JRPGs, I highly recommend).

Screen shot from game 'Bravely Default'
Bravely Default

Taking influence from the image I recreate a clock face that used colors to create depth in the gears (darker is closer, lighter is farther). All in all, another successful build and looking forward to next months challenge.