DEV Community

Cover image for 📸✨ Polaroid Camera In CSS

📸✨ Polaroid Camera In CSS

Sarah on January 31, 2020

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 p...
Collapse
 
netside profile image
Russell R.

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

Collapse
 
fossheim profile image
Sarah

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 :)

Collapse
 
fossheim profile image
Sarah

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 👍

Collapse
 
emperor_ay profile image
EMPEROR AY

Please I will like to follow your tutorial

Thread Thread
 
fossheim profile image
Sarah

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.

Collapse
 
lakeside_brenda profile image
Brenda Erickson

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

Thread Thread
 
fossheim profile image
Sarah

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.

Collapse
 
codestuff2 profile image
Adam Whitlock

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

Collapse
 
fossheim profile image
Sarah

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.

Collapse
 
katnel20 profile image
Katie Nelson

Wow Sarah, that is really awesome!!

Collapse
 
netside profile image
Russell R.

I still don't think I'd be able to do this no matter how much front-end experience I get. Really nice work.

Collapse
 
fossheim profile image
Sarah

Thank you!

Collapse
 
sarthology profile image
Sarthak Sharma

Great work 👌🏻

Collapse
 
fossheim profile image
Sarah

Thank you!

Collapse
 
stojakovic99 profile image
Nikola Stojaković • Edited

And here I am, struggling to center text on the page...

Truly amazing work Sarah!

Collapse
 
ekeijl profile image
Edwin

You kinda inspired me to write my own article! Thank you for this! 😄

Collapse
 
fossheim profile image
Sarah

Awesome! Just tried it and love how interactive you made it

Collapse
 
epranka profile image
Edvinas Pranka

Awesome! Is it responsive? 😂

Collapse
 
alvarojsnish profile image
Álvaro

I would pay millions to be able to do that. Very nice work, Sarah.

Collapse
 
fossheim profile image
Sarah

High-level tutorial is live on my blog and here on dev as well

Collapse
 
realsaddy profile image
Jack

Very nice

Collapse
 
fossheim profile image
Sarah

Thanks 🙏