DEV Community

loading...
Cover image for 📸✨ Polaroid Camera In CSS

📸✨ Polaroid Camera In CSS

fossheim profile image Sarah ・1 min read

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.

Discussion (22)

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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

Thank you!

Collapse
sarthology profile image
Sarthak Sharma

Great work 👌🏻

Collapse
fossheim profile image
Sarah Author

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 Author

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 Author

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 Author

Thanks 🙏

Forem Open with the Forem app