<body>
<div class="browser_wrapper">
<div class="browser_header">
<h1 class="name">Websites</h1>
<div class="cf">
<div class="button_wrapper cf">
<a class="previous button" href="#"><span>Previous</span></a>
<a class="next button" href="#"><span>Next</span></a>
</div>
<div class="address_bar"><a href="#">http://domain.com</a></div>
</div>
</div>
<div class="browser_content">
<p>Content here</p>
</div>
</div>
</body>@import "compass/css3";
body { font-size: 100%; }
@import "compass/css3";
@import "compass/utilities";
* { @include box-sizing(border-box); }
@mixin transition($property, $time) {
@include transition-property($property);
@include transition-duration($time);
}
@mixin rotate ($rotation) {
-webkit-transform: rotate($rotation);
-moz-transform: rotate($rotation);
-ms-transform: rotate($rotation);
-o-transform: rotate($rotation);
transform: rotate($rotation);
}
.browser_wrapper { position: relative; max-width: 56.25em; margin: auto; padding: 2em; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
.browser_header { @include background-image(linear-gradient(#f8f8f8, #d3d3d3)); @include border-top-radius(.25em); padding: 1em .5em 2.25em; border: .0625em solid #b2b2b2; position: relative;
.name { margin: 0 0 .5em; padding: 0; text-align: center; font-size: .8em; color: #333; text-shadow: .0625em .0625em .0625em #fff; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-weight: normal; }
.button_wrapper { float: left; margin-left: .5em; }
.button { position: relative; display: block; width: 1.75em; height: 1.75em; float: left; @include background-image(linear-gradient(#f8f8f8, #d3d3d3)); border: .0625em solid #a3a3a3; @include border-radius(.125em);
span { overflow: hidden; width: .6em; height: .6em; top: .5em; display: block; position: absolute; border: 0.1875em solid #666; border-top: 0; border-left: 0; text-indent: -999em; @include transition(border-color, 250ms); }
&:hover span { border-color: #333; }
}
.previous { padding-right: .75em; padding-left: .25em;
span { @include rotate(135deg); left: .55em; }
}
.next { border-left: none; padding-left: .75em; padding-right: .25em;
span { @include rotate(315deg); left: .45em; }
}
.address_bar { left: 5em; right: 1.25em; position: absolute; background: #fcfcfc; padding: .2em .5em; border: .0625em solid #d8d8d8; @include box-shadow(rgba(0, 0, 0, 1) 0 0 .125em inset); @include border-radius(.25em);
a { font-size: .75em; text-decoration: none; color: #888; @include transition(color, 250ms);
&:before { content: ""; display: block; float: left; margin-right: 1em; margin-top: .25em; width: 1em; height: 1em; background: #f90; }
}
a:hover { color: #333; }
}
}
.browser_content { border: .0625em solid #a3a3a3; border-top: none; background: #f9f9f9;
p { margin: 0; padding: 10em 2em; text-align: center; color: #444; }
}
External CSS
This Pen doesn't use any external CSS resources.