Recreating Urban Landscapes with CSS
As an artist who works primarily with oil paints, I recently experimented with recreating my urban landscapes using only CSS. Surprisingly, the process of painting with CSS is similar to painting with oil; starting with broad strokes and working down to finer details, then refactoring and refining.
Setup
To begin, I set up a .paper class to contain all the pieces of the painting. I used viewport units to set the height and width to 100vh and 100vw, ensuring the painting would be responsive to the browser window. I also used flexbox to center the paper and set its position to relative, allowing it to serve as a baseline for the painting pieces.
Approach
I used SCSS variables to simplify the process and make it easier to manage colors. Since I was working from a photograph, I used a digital color meter to create color variables that accurately represented the physical objects in the scene. I named each color variable descriptively, such as $floor and $seat, to keep the code organized and easy to understand.
Painting
I broke down the painting into modules, starting with the background and working my way forward. This approach allowed me to focus on one element at a time and avoid the complexity of reordering divs and tinkering with z-index. I used pseudo-element selectors, such as :before and :after, to add highlights and shadows to certain elements.
Complicated Shapes
Not all shapes can be created using simple rectangles and circles. To create more complex shapes, I used borders and transforms. I also used the :before and :after pseudo-elements to create additional shapes and layer them on top of each other.
Refactoring
As I worked on the painting, I realized that I could refactor the code to make it more reusable. I created a mixin that used the height, width, background color, and positioning to create a paint element. However, I ultimately decided to stick with explicit styling for each element, as it made it easier to reference and modify specific parts of the painting.
Challenges
One challenge I faced was working with viewport lengths. I found that using smaller values, such as 4.15vmin, resulted in less accurate measurements. I also noticed that precise measurements seemed to change slightly when the page was resized.
Takeaways
This exercise gave me a broader understanding of CSS and how to approach it in a more artistic and modular way. By breaking down the painting into individual elements and using descriptive variable names, I was able to create a more organized and maintainable codebase. If you’re interested in trying your hand at CSS painting, I encourage you to experiment and share your results!