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
::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
::after pseudo content are
contained by the element’s formatting box and therefore don’t apply to “replaced elements”, including
<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:
See the Pen CSS Browser Frame for Screenshots with Semantic Markup by Di (@didoesdigital) on CodePen.