A CodePen by Brian Hanson. Simple CSS Browser Chrome - Simple way to display a browser around images for my portfolio. Still trying to figure out a way to make it easier to use.

simple-broswer.html

<div class="wrapper">
  <h1>Single Element Simple Browser Chrome</h1>
  <figure class="web">
    <img src="http://placekitten.com/1000/600">
  </figure>
</div><!-- end .wrapper -->

style.scss

@import "compass";
*{
  @include box-sizing(border-box);
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}


.wrapper{
  max-width: 1000px;
  margin: 0 auto;
  padding: 1em;
}

h1{
  font: 24px/1.1 helvetica;
  font-weight: 700;
}

img{
  max-width: 100%;
  display: block;
  height: auto !important;
}

.web{
  &:before{
    content: "● ● ●";
    color: #999;
    text-align: left;
    font-size: 1.5em;
    background: #ccc;
    display: block;
    /*border: 1px solid #999;*/
    padding: 2px 8px 6px 8px;
    @include border-top-radius(3px);
  }
 &:after{
    content:" ";
    background: #ccc;
    display: block;
   /* border: 1px solid #999;*/
    padding: 8px;
    @include border-bottom-radius(3px);
  }
  img{
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    margin: 0 auto;
  }
}

figcaption{
  padding-top: .5em;
  color: #666;
  font-style: italic;
}