Polaroid | Pure CSS Day 66

Another day another challenge. Today when picking up an image, I wanted to make something that later I can add on. So I had an idea. I want a camera. I scoured for some inspiration and happen to fall into this amazing graphic by 

At the beginning when thinking of all the components, I felt a tad bit intimidated but then I was like, NO! I must do this because I am intimidated. I found a lovely color pallet that I chose to build this on

In order for me to grasp the nesting correctly, I did the illustration in Sketch

I’m actually getting better at these graphics. And let’s all appreciate the groupings I’m doing!

okay, now that I know how I’ll nest the elements, and figured out the colors, and sizings, it’s time to move into code. here’s an illustrated guide of my process and a bit of commentary.

at this point here, I realized a couple of my sizing is all wrong. for some reason, my head wasn’t wrapping around how to convert to percentages from a pixel base. It took me a while but finally figured it out thanks to an article attached to the readme section in Github. So I started adjusting the size accordingly and it turned out pretty well.

I started with the top section of the Polaroid and moving my way down

Now I was a bit off when trying to give the illusion of skew so I messed around with transform, clip path and so on to get the desired result

I’m almost done, but I’m not satisfied with the midsection so I started messing around some more in that area

finally, I got it to look good! You can see the final result which I haven’t uploaded a screenshot of, here.

I actually learned a lot from this project from pug, SCSS, variables, converting units. It was really fun. I have a couple of things on my reading list that I have to finish today so that’s all for today.

Happy coding 🙂

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *