This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.
Inspiration
My inspiration for this project comes from a mobile workspace, working from a cafe with a lot of space and sitting areas where people area sitting in front of their laptops, sipping coffee, and working on their projects. I want to capture the essence of a high desk: the essential laptop from the back, the ever-present cup of coffee and a window in the back with the sun shining in. The style is simple and minimalistic, with a focus on the details that make a workspace feel personal and inviting. The office culture – non office culture.
Demo
The live demo showcases a dynamic and responsive CSS art piece. The entire office desk scene is rendered with HTML and styled with CSS, featuring subtle animations that bring it to life.
Key features include:
- Pure CSS Art: No image files are used for the artwork.
- Interactive Elements: Click on the laptop to reveal a new scene.
- Subtle Animations: Gentle animations like the movement of the sun and typing arms.
- Responsive Design: The layout gracefully adapts to different screen sizes.
Journey
My journey began with a simple concept: to create a CSS art piece that captures the essence of a modern workspace. I started by building the initial scene with a desk, a laptop, and a coffee cup, all styled with a custom color palette. I then separated the HTML and CSS for better organization.
Next, I added a window with a moving sun to bring the scene to life. I then introduced an interactive element: clicking the laptop reveals a new scene with two figures. These figures, inspired by the provided images, are also created purely with CSS.
I continued to refine the second scene, adding details like smiling mouths, animated arms that simulate typing, and individual laptops and coffee cups for each figure. Throughout the process, I focused on creating a clean, minimalistic, and engaging piece of CSS art.
License
The source code for this project is made available under the MIT License, encouraging open collaboration and reuse.
Screenshot of project
Thanks and have a cup of coffee 😉