DEV Community

Cover image for πŸ“Έ I re-created an analog camera in HTML & CSS
Sarah
Sarah

Posted on

πŸ“Έ I re-created an analog camera in HTML & CSS

I made another camera in CSS, this time I went for the Sardina (from Lomography). The code can be viewed on CodePen, and I also have a GitHub repo where I collect all the CSS drawings I make.

I had a lot of fun making this one (and even live streamed my process πŸ™Œ), and am trying to create one of those a week. Feel free to send me suggestions if there's something you think I should try to recreate, or follow my Twitch to be notified next time I live-code 🀩

I especially enjoyed creating the flash, viewfinder and lens. Glass reflections can be time-consuming because they require a lot of gradients on top of gradients, but the result is also incredibly rewarding.

Also for reference, this was the picture I started from:
Sardina camera

And if you're having trouble viewing the pen, here's the end result:
Sardina camera in CSS

πŸ‘‰ View all my css drawings on CodePen
πŸ‘‰ Read my Polaroid tutorial
πŸ‘‰ Read my Macintosh tutorial

Top comments (3)

Collapse
 
michaeltharrington profile image
Michael Tharrington

This is awesome!

Collapse
 
fossheim profile image
Sarah

Thank you!

Collapse
 
franca profile image
Franca

πŸ‘