Creating browser chrome with CSS

Using a bit of CSS and HTML you can create an element container that replicates a browser window thus future proofing all of your visual assets!

We recently launched our #smartvideo product and as part of the launch, we created a landing page which explained the product and its benefits. We always looking for interesting graphics and interactions to show off features. In this case, I used an animated GIF to show off some of the video analytics. I wanted to use this in a way that was a bit more visually interesting than just dropping the GIF on the page so I decided that it might be interesting to show it in the browser window. I could have captured the entire browser window when I made the GIF but I already had the GIF and thought it might be fun to try and create a simple browser window to contain the GIF.

After a few false starts, this is what I came up with.

The Show

This is what it looks like.

#smartvideo Analytics #smartvideo intelligence

The Tell

This is the code that I used to do it.

This is the HTML that I used. Just a simple paragraph with a class of .browser-chrome that contains the entire image and then a span with a class of .title-bar that contains the URL or whatever you want to be displayed in the address bar.

1
2
3
4
<p class="browser-chrome">
<span class="title-bar">#smartvideo Analytics</span>
<img src="https://firebrand.media/images/uploads/blog/smartvideo-intelligence.gif" alt="#smartvideo intelligence" height="646" width="1144"  />
</p>

And, here is the CSS that I used. 30 lines of code and we’ve mimicked a browser window.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.browser-chrome {
    background-color: RGBA(223, 222, 225, 1.00);
    padding: 10px 2px 0px 2px;
    width: 80%;
    margin: 20px auto 0;
    border-radius: 10px 10px 0 0;
    text-align: center;
    border-top: 5px solid RGBA(223, 222, 225, 1.00);
    border-right: 5px solid RGBA(223, 222, 225, 1.00);
    border-left: 5px solid RGBA(223, 222, 225, 1.00);
    border-bottom: 2px solid RGBA(223, 222, 225, 1.00);
}
 
.browser-chrome img {
    width: 100%;
    padding: 15px 0 0 0;
    margin: 0;
}
 
.title-bar {
    text-align: center;
    background-color: #fff;
    border-radius: 3px;
    padding: 3px 15px;
    width: 50%;
    display: block;
    margin: 0 auto;
    font-size: 70%;
    color: RGBA(178, 178, 178, 1.00);
}

I toyed with the idea of adding window close and maximize buttons (red and green circles) to the left but decided that I didn’t want it to look too much like a window that could be closed, lest a user try and close the looping GIF.

You could also easily change the color of the URL bar text to green if you wanted it to mimic a secure connection.

Obviously, this isn’t a major revelation. I just thought it was a fun way to accomplish something through code that I may have done by capturing the screen. The downside of which is that it’s not future proof. A screen capture with the browser window included is like the frame of a painting being a structural part of the painting. There’s no way to change it. By creating the browser chrome (or frame) in code, we can modify (or remove) it as needed.

⇠ Next Article Previous Article ⇢

About The Author

G. Brad Hopkins's avatar
  • G. Brad Hopkins
  • About Me: I bought my first computer - an Apple Performa 6320 - when I was in college and have been building websites ever since. These days I spend most of my time writing code and helping to bring interesting projects to life.
  • @gbradhopkins