This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.
Inspiration
For this CSS Art challenge, I wanted to step out of my comfort zone. While I've used CSS extensively for web apps and websites, I had never built an art piece purely with CSS. I started by diving into codepen and other inspiration sites, getting a feel for what was possible. Eventually, a rough sketch of an office atmosphere in Excalidraw became my guiding vision. My goal was to depict a typical office scene, complete with everyday elements and subtle animations.
Rough sketch:
Eventually, after starting to build, I got ideas for adding a few more elements.
Demo
Note: For the best experience, please **view in a web browser.
Live link of my CSS Art: CSS Art
Source code: Github repo
Video demo: video demo
A closer look: 19 elements in the CSS Office
Journey
My journey into CSS Art was both challenging and incredibly rewarding. Initially, seeing the intricate works on codepen was a bit overwhelming. I wondered how I could ever achieve something similar. The breakthrough came when I decided to break down the entire office atmosphere into smaller, manageable elements: a clock, an AC unit, a chair, a desk, a coffee cup, and so on.
I started building each piece one by one. Honestly, it looked quite clumsy at first! But as I began adding colors and meticulously positioning each element, the entire scene started to come together beautifully. It reminded me of Mark Zuckerberg's famous quote,
Ideas do not come fully formed; they develop as you build.
That's exactly what happened here. With each element I added, new ideas sparked – a printer, a plant, wall posters – I kept integrating them, ensuring I utilized the entire viewport effectively.
Finally, to truly bring the scene to life and add an interactive touch, I incorporated some delightful animations. These weren't just for show; they add a layer of realism and engagement:
Hovering over the coffee cup reveals subtle steam, giving it a fresh-brewed feel.
Mousing over the sticky notes makes them gently zoom, inviting a closer look.
Interacting with the lights dynamically changes their color, simulating different moods or states.
I also added other subtle animations to give a realistic touch to the printer, books.
I heavily relied on several key CSS properties and techniques:
Gradients for the window background, adding depth and light.
box-shadowto create a realistic sense of dimension and depth for various objects.clip-path, which I used for the first time, was a game-changer for creating precise light rays.Pseudo-elements like
::afterand::beforeproved invaluable for adding intricate details without cluttering the HTML.positionproperty made easier to fix things in thier places by adjusting top, left, bottom and right.And, of course, Flexbox was essential for efficient layout and positioning of elements.
The first major challenge was making the entire piece aesthetically pleasing. Being quite particular about colors, I aimed for a minimal and clean palette. The next hurdle was making each element appear at least somewhat realistic with CSS alone. Overcoming these challenges taught me so much, especially the power and versatility of pseudo-elements and the practical application of clip-path.
I'm incredibly proud of this entire project. I never imagined I would write over 900 lines of pure CSS code for an art piece! It's a testament to what can be achieved with dedication and a touch of creativity.
For future projects, I'd love to explore more about animations and push the limits of realism even further with CSS.
This was a solo effort – just me, diving into the fascinating world of CSS Art!
Thank you for exploring my CSS Art: Office Edition!. This project was a big learning experience, and I'm excited to have taken part in the Axero & DEV Community Frontend Challenge.
Feel free to check out the code on GitHub and revisit the live demo here to experience the interactive elements yourself!"
Top comments (0)