loading...

πŸ“Έβœ¨ Polaroid Camera In CSS

twitter logo github logo ・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.

twitter logo DISCUSS (21)
markdown guide
 

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

 

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 πŸ‘

 

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

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.

 

Please I will like to follow your tutorial

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.

 

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

 

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

 
 

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

 

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.

 

Awesome job, not sure about you but it always takes me way longer than I originally planned to make CSS art

 
 

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

 

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

 
 
 

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

Truly amazing work Sarah!

 
Classic DEV Post from May 24 '19

Follow Friday: What DEV member would you recommend following?

Sarah profile image
Lesbian. Feminist. Working in tech as a software developer and UX person. Interested in ethics, equality and AI. They/them.

dev.to now has dark theme. 🌝

Go to the "misc" section of your settings and select night theme

(You can also change font to sans serif, which a lot of folks prefer.) πŸ’–