CSS iPhone

An iPhone drawn in CSS to frame my app demos.

A case study needed a phone to hold its screens, and a photograph cannot hold a live one. So I drew it: rails, chamfers, antenna bands and the island are all gradients, every value off one photograph.

The photograph the phone was measured from, laid over it
Look at
Show

The CSS that draws it

Device.tsx
as rendered
  1. .phone {
  2. aspect-ratio: 454 / 951;
  3. border-radius: 17.79cqw;
  4. }

What it is

One element, no images. The rails, the chamfers, the antenna bands, the buttons and the island are all gradients, and the corner is a true circular arc: a least-squares fit lands at 0.45px of error, which is why a plain border-radius is the right thing there.

Why I needed it

A case study of mine needed a phone to put its screens in, and a photograph of one cannot hold a live screen — the recreations inside it are real markup that scrolls and responds to a tap. So the device around them had to be drawn rather than photographed.

How I did it

Every value came off one reference photograph, sampled pixel by pixel. I spent a long time treating that image as a silver phone; it is black under a hard light from the top right, which the file says plainly once you measure it, since the same rail runs 758 at its top end and 255 at its bottom.