📸✨ Polaroid Camera In CSS

#codepen #css #html

I love cameras and I love CSS, so I decided to recreate this Polaroid camera in HTML and CSS. I only used divs and gradients, no images.

My plan is to write a tutorial about it the upcoming week, so stay tuned for that 🤗

Code also available on Glitch (@fossheim) and GitHub (sarahfossheim).

I wrote a high-level tutorial on my blog. Also available here on dev.

Top comments (22)

Russell R. • Feb 1 '20

Are there any great online tutorials/etc., to learn CSS in-depth like this? Would seriously love to know.

Sarah • Feb 1 '20

Here's a high level tutorial on my blog and it's published here on dev as well.

I think I'll make more tutorials about this later, but split them up as a series component by component. It would take me more time though to create a tutorial that explains each step for each component for a big project like this, so it will take a while until it's ready.

Let me know if you have any questions :)

Sarah • Feb 1 '20

I’m writing one myself about it at the moment with this as an example, should be live within a few days. Will send you the link when it’s done 👍

EMPEROR AY • Feb 1 '20

Please I will like to follow your tutorial

Sarah • Feb 1 '20

High-level tutorial is published on my blog and here on dev too.

A more detailed, component-by-component one will come at a later point since that will take me more time to make.

Brenda Erickson • Feb 1 '20

Would love a link as well please. Is really impressive!

Sarah • Feb 1 '20

High-level tutorial is published on my blog and here on dev too.

A more detailed, component-by-component one will come at a later point since that will take me more time to make.

Adam Whitlock • Feb 1 '20

Wow, the details are epic! Well done. How long do you think that took you?

Sarah • Feb 1 '20

An hour or two last night to create an outline and fill the bottom, and a few hours tonight again, but I didn’t keep track. I’d say between 5 and 7 hours (with breaks) over two days.