CSS Browser Frame for Screenshots

I prepared this snippet on CodePen to help me frame screenshots for a conference talk slide deck. You can specify your screenshot width and height in the pen’s CSS, take a screenshot of the browser frame, and add it behind your screenshot in your presentation.

Pseudo content for buttons

To create the faux browser buttons, I used ::before and ::after pseudo content on the enclosing figure element, as well as another ::before element on the link element wrapping the image. Why on the link element? Well ::before/::after pseudo content are contained by the element’s formatting box and therefore don’t apply to “replaced elements”, including <img> (or <br>). So I cannot attach the pseudo content to the <img>. Alternatively, I might have placed the pseudo content on the caption element, but I’m less sure I’ll always want a caption visible.

I made another pen for a CSS Browser Frame for Screenshots with Additional Elements, if you are able to add more markup.

Transparent GIF placeholder image

For the screenshot image itself, I used a transparent 1px GIF encoded as a base64 data URI:

<!-- Transparent 1px image encoded as base64 data URI -->
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="">

This lets you use CSS to control the background color, but also illustrates where you might place an actual image. You might link the img src="" directly to your desired screenshot if it’s hosted somewhere. Otherwise, you might also be interested in a placeholder kitten:

<img src="http://placekitten.com/272/340" alt="Adorable placeholder kittens">

LICEcap for sizing

If I already have a screenshot of an unknown size that I want to frame, I use LICEcap, which I usually use to capture animated GIFs of my desktop. You can easily resize LICEcap’s window to match the size of your screenshot and it will tell you the dimensions of the frame to use in the pen.

CSS Browser Frame for Screenshots with Semantic Markup CodePen

Here’s the pen:

CSS Browser Frame for Screenshots CodePen
If this pen is interesting to you, be sure to follow DiDoesDigital on CodePen!