This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.
Inspiration
When I think of modern office culture, I immediately picture the hybrid work environment we've all adapted to - that perfect blend of traditional office elements with the new reality of video calls and remote collaboration. I wanted to capture that "lived-in" feeling of a real workspace: the essential coffee that keeps us going, the satisfying click of a mechanical keyboard, the desk plant that makes us feel more human, and those ever-present sticky notes trying to keep our chaotic work lives organized.
The scene tells the story of someone mid-video call, surrounded by all the little details that make up our daily work ritual. It's both nostalgic for the classic office elements and contemporary with the video conferencing that's become central to how we work.
Demo
gilly7
/
office-culture-css-art
An interactive and visually rich CSS art project that recreates a modern office desk scene using only HTML and CSS. This project demonstrates advanced CSS techniques, creative use of gradients, flexbox, grid, and keyframe animations to bring an office environment to life.
Office Culture CSS Art
An interactive and visually rich CSS art project that recreates a modern office desk scene using only HTML and CSS. This project demonstrates advanced CSS techniques, creative use of gradients, flexbox, grid, and keyframe animations to bring an office environment to life—no images or SVGs, just pure CSS and HTML.
Features
- Fully CSS-based Art: All elements (desk, monitor, keyboard, coffee mug, plant, sticky notes, lamp, stress ball, papers, pen holder, and more) are created using HTML and styled with CSS.
- Animated Details: Includes animated steam from the coffee mug, blinking avatars in a video call, pulsing mouse light, swaying plant leaves, flickering lamp, and more.
- Responsive Layout: The scene is centered and adapts to different screen sizes for a pleasant viewing experience.
- No Images or SVGs: 100% CSS and HTML—great for learning and inspiration.
Preview
Open index.html in your browser to view…
Journey
This project was a deep dive into advanced CSS techniques. I started by sketching out the desk layout and then built each element layer by layer, focusing on creating depth through CSS transforms and perspective.
What I'm particularly proud of:
-
The 3D perspective effect - Using
transform: perspective(1000px) rotateX(10deg)to give the entire scene depth - Complex layered animations - Multiple elements animating independently but harmoniously (steam rising, keys typing, leaves swaying)
- Realistic materials - Achieving wood grain, metal surfaces, and liquid effects purely through CSS gradients
- Attention to detail - From the glowing mouse sensor to the different colored pens, every element tells part of the office story
Technical challenges I overcame:
- Coordinating multiple animation timelines to feel natural
- Creating realistic steam effects using opacity and transform animations
- Building a convincing video call interface with CSS grid
- Achieving proper layering and depth with z-index management
What I learned:
- CSS keyframes can create incredibly sophisticated animations when layered thoughtfully.
- The power of CSS gradients for creating realistic textures and lighting.
- How perspective and transform can turn flat CSS into dimensional art.
This piece captures not just what an office looks like, but what it feels like - the energy, the routine, the small moments that make up our work lives. It's a love letter to the spaces where we spend so much of our time, rendered entirely in the web's most fundamental styling language.
Next steps: I'd love to explore adding seasonal variations (holiday decorations, different lighting) or creating an interactive version where elements respond to user interaction while maintaining the pure CSS approach.
License: MIT - Feel free to use and modify!
Top comments (0)