Suppose you want to create an interface that displays photos as Polaroids pinned to a cork bulletin board. Non-static positioning and the transform property can help. You start with a div containing an image of a quokka and its name:
Polaroids have a fixed size and tend to be square. This image is too big and too non-square. You set the dimensions of the image while preserving its aspect ratio:
The background-image property tiles an image across its element. It can be applied to the body to make an image of cork fill the viewport:
Polaroids are distinguished by the white trim around their edges, which you produce using padding and a background color:
Right now the Polaroid is a block element filling the width of the viewport. Additionally, the name appears to the side rather than below the image. You fix both issues by switching to a Flexbox layout. Instead of using flex for the display property, you use inline-flex:
To make this really feel like a Polaroid, the name should appear hand-written, perhaps using a permanent marker font. You find one on Google Fonts, import it, and apply it to the name:
There's too much padding on the bottom, so you remove some of it. You also add a drop shadow to give a feeling of depth:
Photos don't stick to bulletin boards on their own. They need some help from pushpins. You add one:
The pin should float in front of the photo, which you achieve by positioning it absolutely and its parent relatively:
The top property is set to a negative value, which nudges the top of the pin up from its parent.
With one Polaroid in place, you pin up two others:
The photos are too close together and too near the edge of the viewport, so you add some margin:
Photos on a bulletin board are never perfectly aligned, so you perturb them a bit with a rotation transform. You target each photo individually using the nth-child selector to rotate them different amounts:
All this bulletin board needs now is more quokkas.