I took this photo while traveling through Spain in 2021. I loved my brief time in Seville and thought this photo would be a fun challenge to try and replicate with HTML and CSS.
I started with the background - the sky and rear building - and worked my way toward the foreground. What began as a cartoonish replica became more life-like and I became increasingly obsessed with shadows and gradients. Linear gradients in particular became an effective way to capture light and shadow and they also kept my number of divs to a relative minimum.
The tiled alley and the way in which the tiles skew as they recede into the distance was particularly challenging.
Overall, I am pleased with how this project turned out.
For a potentially seizure-inducing time-lapse video showing part of the build, please click here.
