Recreating Urban Landscapes with CSS

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.

.paper {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

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.

$floor: #cccccc;
$seat: #666666;
//...

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.

.element {
  /* styles */
}

.element:before {
  /* highlight styles */
}

.element:after {
  /* shadow styles */
}

Complicated Shapes

Not all shapes can be created using simple rectangles and circles. To create more complex shapes, I used borders and transforms.

.shape {
  border: 10px solid $color;
  transform: rotate(45deg);
}

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.

@mixin paint-element($height, $width, $background-color, $position) {
  height: $height;
  width: $width;
  background-color: $background-color;
  position: $position;
}

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!