This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.
Inspiration
When I think of the office, my cubicle is the first thing that comes to mind. I love my desk setup. I feel motivated to work and be productive on my workstation.
I'm not really one to socialise as a developer or as an individual. I wanted my art to capture the solitude, calm, and warmth that I get from my workstation and the views I'd like to enjoy while I work.
Although I couldn't replicate my own desk, this art captures the feel and look of how I picture my office life: quiet, balanced, and personalised.
Demo
Change the preview size to 0.5x to see the full picture.
Journey
"Rectangles, circles, and lines" are the shapes that come to mind whenever I create my CSS art. And since this was a fairly simple creation. I am glad that all the shapes brought my vision to light.
When it comes to structure, I find that HTML format is key to properly structuring my art. I spent quite some time breaking down my HTML, piecing together what elements should go together. Once I had figured that out, the CSS was just the cherry on top.
What I've come to love and learnt throughout building my art is that the box-shadow and the gradient colour properties are my favourites. The ability to use these properties very well can bring life to any dull surface in my art.
I am proud of how I've improved at structuring my HTML and efficiently debugging CSS. Moreover, being able to be patient enough to translate my imagination into actual code.
What could happen next? Perhaps integrate animations and animate the bird's wings and the clock's hand movements; the glowing light bulbs could have pulses.
I could add more items on each desk: plant, duck, notebook... the possibilities are endless.
CSS is such a fun language, and I wish everyone knew how much fun it is outside its traditional use of building and styling websites or components.
I look forward to building more art and getting more complex and better at it with time.
Top comments (2)
Congrats!🥰 👏🏻 Is fascinating how you managed to capture the entire office culture and atmosphere using only CSS!
It’s a clear example of how technology and art can go hand in hand to create truly memorable visual experiences. Right? 🙃🥰
I really appreciate the attention to detail and the creative way you used each element to convey not just the physical space but also the mood of a modern work environment.😊 Congratulations on this impressive work! Good luck!🤞🏻
OMG! Thank you, Theodora ❤️