Bringing the CSS-only Polaroid camera to life! 📸

I was blown away by the Polaroid camera @fossheim made with just HTML/CSS. If you missed it, go check it out here:

How I recreated a Polaroid camera with CSS gradients only

Sarah ・ Feb 1 '20 ・ 10 min read

#css #tutorial #html #codepen

It's so well done, especially the flash 🌟💯 but I wish I could play with it! At the bottom of their article were some ideas for adding interactivity (and I needed a new side-project) so I decided to take a stab at some.

I'm a fan of replicating real-world objects in CSS. I don't particularly enjoy writing CSS, but I love how any browser can paint an object with just a few lines of code. And with a little trigonometry it can make things spin!

Without further ado, here it is:

Note: it's set to scale down in an iframe to fit in the article embed, I recommend opening it in full-screen.

What I added

1. A zoomable lens 🔭

Disclaimer: I don't actually own one of these so I just assumed it's a zoom lens. But using some basic angle calculations I made it so clicking & dragging it around will change the size of the camera iris (an additional radial gradient I added) to give the illusion of ~zooming~.

It's not perfect; the angle resets at 360° and doesn't have a state to reference when you start dragging it, so it immediately jumps to wherever you start dragging it from. But relative angle calculation was already getting pretty complex so I left it as-is for now. Also it doesn't work on mobile. (remixes welcome! 😇)

Originally I also made it trigger a blur CSS filter on the background image, but that was pretty GPU-intensive (my air couldn't handle it) so I disabled it and replaced with background-size.

2. Clickable buttons 📸

Clicking the shutter makes it go flash! It triggers a box-shadow & background override to the flash bulb and an opacity effect on the background. A transition rule is applied after these are set to give a fade-out effect.

The only other button I saw was the timer button (next to flash), but I wasn't sure how that worked...does it start a timer or do you need to hit the shutter too? I made it clickable but it doesn't do anything (yet).

3. Toggle-able toggles

The yellow one lightens/darkens the background. Again, I wanted to use filters here for brightness/contrast but opacity is much less GPU-intensive. The other just moves back/forth (but really should eject the photo cartridge).

Here's the script that makes everything work:

The only code I modified from the original was to add some classes and a background image to the HTML, the iris gradient to the camera and the style block below /* Interactive styles */. The rest is unchanged.

And I left enableCSSFilters in if you're reading this on a computer that can handle it, or have any ideas for optimizing it. Give it a try!

All credit to @fossheim for making this possible. It's so cool! And thanks unsplash for the pretty picture.