Back in 2010, after reading Zurb’s Polaroids with CSS3 blog post, I told myself it could be a really cool effect to present Dead Rooster’s MP3 selections1 so I adapted the code and made it work with (at the time) very hot’n’sexy fluid grids.

Flash forward to 2021.

I’m migrating Dead Rooster to modern tools. Let’s revisit this effect to re-enable it.

Jekyll is a decent Sass/SCSS authoring tool

The original version of this post mentioned Compass as a good Sass authoring framework. It is no longer actively maintainted and nowadays, I rarely author any CSS outside of a Jekyll project or CSS-in-JS tools such as styled-components or Emotion.

We will use Jekyll’s Sass/SCSS support today.

The Polaroid Effect

  • A random squared photo to illustrate the Polaroid effect.
  • A random squared photo to illustrate the Polaroid effect.
  • A random squared photo to illustrate the Polaroid effect.

How it works

I created 2 codepens to compare the code from 2010 to the code of 2021:

What changed since 2010?

The old code used a lot of fixed sizes and maths, with a variable for the number of columns at compile time that became a constant at runtime. To mimic this behavior, we could have used a CSS Grid Layout since, on Dead Rooster, each post using this effect featured a 3 ⨉ 3 grid of images. But on smaller screens, the code made the images become too small so I decided CSS Flexbox Layout led to better results in terms of responsiveness.

Vendor prefixes are for the most part useless nowadays. I removed all their occurrences from the original code and the code behaves as expected on Safari, Chrome and Firefox on macOS, and on Safari Mobile on iOS.

Finally, SCSS now has a fun random native method that can bring more unpredictability — which is the fun part of this effect — than the Fibonacci suite multiples that were used in the original code. The random value is only random at compile-time though, so we still need multiple classes using :nth-child to avoid all polaroids to all be tilted at the same angle.

You can see the effect live on Dead Rooster here, here or here.

Rock on. 🤘

  1. Dead Rooster is my blog, written in French, where I write about pop culture since 2005. ↩