CSS Faux Browser Style on Your Images

by Jonathan Longnecker

While working on the new 47m site we decided that we wanted our portfolio images to look like they were in a browser. Easy enough, right? But I didn't want to save out every image with some fake browser thing at the top. That would be a huge pain if we ever wanted to change the style in the future. CSS to the rescue!

Let's start with your markup:

<div class="faux-browser">
   <img src="/images/image.jpg" />
</div>

I've opted for a pretty simple browser design, but you could totally get crazy with url fields, back/forward buttons. That would probably require an image, though and I was trying to avoid that. To get the browser are at the top we need the containing div to use the :before CSS selector.

Then add some CSS:

.faux-browser:before {
    content: "";
    background-color: #b3b3b5;
    background-image: linear-gradient(top, #b3b3b5, #999999);
    height: 12px;
    display: block;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.20),
                0px 1px 0px 0px #e3e3e3 inset;
    position: relative;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom: 1px solid #9c9c9c;
    width: 100%;
}

That looks pretty good…now what about the bottom? Just add a border to the image:

.faux-browser img {
    margin-bottom: 0px;
    border-bottom: 7px solid #999;
}

And there you have it! Stylish fake browser chrome on your portfolio image. You should know that I've not included other vendor prefixes above - you'll need to use something like Prefix free or roll your own. Also, the :before selector is shaky in IE8 and below. We've just defined fallback styles for those browsers. That is all - enjoy!