Development

Adding iPhone X screenshots with notch to mockups on the web

Iphone Notch

I’m probably a bit late to the game here. However I’ve recently been building a site that required iPhone X app screenshots to a device mockup. Previously this had been very simple with the past generation of iPhone’s as they all had rectangular screens.

For previous sites I had simply added in the iPhone mockup and then used position absolute to align the screen on the device.

Some may upload the mockup with the screenshot already present however we like to give our clients the option to upload their own screenshot should their app change.

The Problem

So the biggest factor to overcome was the notch on the iPhone X. I could take the app screenshot and cut out the notch in Photoshop. However this isn’t easily done by clients.

The Solution

The best method that I’ve found to combat the notch is to use CSS Clipping Masks. According to Can I Use, global usage of browsers that support this feature is at 84.95% so that’s a good proportion of web users but we should still incorporate a fallback.

So here’s the HTML:

<div class="container"><img class="iphone" src="https://madebyfalcon.co.uk/wp-content/uploads/2018/01/iphone-x.png" alt="iPhone" />
<img class="screen" src="https://madebyfalcon.co.uk/wp-content/uploads/2018/01/IMG_E1A41994479F-1.jpeg" alt="App Mockup" /></div>

And the CSS:

.container {
position: relative;
width: 300px;
height: auto;
display: inline-block;
img {
&amp;.iphone {
width: 100%;
height: auto;
}
&amp;.screen {
position: absolute;
top: 3%;
left: 50%;
transform: translate(-50%, 0);
width: 87%;
height: auto;
border-radius: 2em;
overflow: hidden;
@supports (mask-size:contain) or (-webkit-mask-size:contain) {
border-radius: 0;
-webkit-mask-image: url(https://falcon-s7wn9kdt1sj2e.netdna-ssl.com/wp-content/uploads/2018/01/iphone-cutout.svg);
mask-image: url(https://falcon-s7wn9kdt1sj2e.netdna-ssl.com/wp-content/uploads/2018/01/iphone-cutout.svg);
-webkit-mask-size: contain;
mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
}
}
}

Fallback

Notice there’s a border-radius in the css before the supports, this fallback will round the corners of the screenshot so browsers that don’t support CSS Mask will still see the screenshot in the phone however it won’t have the notch cut out. Otherwise they would see square edges.

The Result

Iphone Notch

You may also like