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

๐Ÿ‘