šŸ“ø I re-created an analog camera in HTML & CSS

fossheim

Sarah

Posted on May 12, 2020

šŸ“ø 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

šŸ’– šŸ’Ŗ šŸ™… šŸš©
fossheim
Sarah

Posted on May 12, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related