Menu

Creating a CSS3 Web Browser Window Inspired by Chrome

LIKE & SHARE

Last time, we created an awesome portfolio layout in HTML5 & CSS3 by converting the PSD from our tutorial into the said language. We also recreated the Skype logo using pure CSS3. Today, we will present you another HTML & CSS tutorial.

In this tutorial, we will create a web browser inspired by Google Chrome. Learn how to make a CSS3 web browser window through a step-by-step CSS tutorial.

You might want to take a look at the following related articles:

Dont forget to subscribe to our RSS-feed and follow us on Twitter – for recent updates.

Most Popular WordPress Themes on ThemeForest

How to Create a CSS3 Web Browser Window

Creating a CSS3 Web Browser Window Inspired by Chrome

Step 1: Creating the HTML Document

Let’s start our CSS browser window tutorial by creating our HTML document consisting of the basic HTML structure. We will also embed a style sheet inside the HTML file – the style sheet will be located in the “css” folder.

<html>

<head>
<title>CSS3 Chrome Browser Window</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>

<body>
<!-- Insert Step 2 Here -->
</body>

</html>

Open your CSS document and add the following default configuration such as the background, font size & color, padding, margin, etc.

body {
background: #CCC;
font: normal 12px/1.3 Arial, sans-serif; color: #333;
}

* {
margin: 0;
padding: 0;
}

.clear:before, .clear:after {
content: " ";
display: table;
}

.clear:after {
clear: both;
}

.clear {
*zoom: 1;
}

.none {
display: none;
}

:focus, :active {
outline: 0
}

a {
text-decoration: none
}

li {
list-style: none
}

Step 2: Creating the Browser Frame

Inside the <body> tag, add the following HTML code. This will be the container of the contents of our web browser.

<div id="browser">
<!-- Insert Step 3 Here -->
</div>

Again, on your CSS file, add the following CSS code to add the configuration to our window. This will be important as it declares the background, size, margin and other CSS style of the web browser.

#browser {
width: 90%;
min-width: 900px;
margin: 40px 5%;
background: #ccc;
border: 1px solid #666;
border-radius: 5px;
overflow: hidden;
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 60px rgba(0,0,0,.6);
}

There is nothing yet on our window but a straight line that indicates the size of our browser window.

Step 3: Window Tabs

We will use <ul> tag to add our window tabs. There will be three window tabs to demonstrate the look between the active window and not.

<!-- tabs -->

<ul class="tabs">
<li>
<img src="http://wordpress.org/favicon.ico">
<span>WordPress - Blog Tool, Publishing Platform, and CMS</span>
<a class="close" href="http://wordpress.org">×</a>
</li>

<li class="active">
<img src="http://cdn.designrshub.com/wp-content/themes/Designrshub/images/favicon.ico">
<span>Designrshub - Design Articles, Inspirations, Resources and Freebies</span>
<a class="close" href="http://designrshub.com">×</a>
</li>

<li>
<img src="http://www.google.com/images/google_favicon_128.png">
<span>Google</span>
<a class="close" href="https://google.com">×</a>
</li>
</ul>

<!-- add tab -->

<a href="#" class="add"></a>

<!-- Insert Step 4 Here -->

To add the style on our window tabs both active and not, add the following CSS code to your CSS file.

/* tabs */

.tabs {
float: left;
margin-left: 20px;
height: 40px;
}

.tabs li, .tabs li:before {
cursor: default;
z-index: 1;
position: relative;
border: 1px solid #aaa;
border-bottom: 0;
-webkit-transform: skewX(25deg);
moz-transform: skewX(25deg);
-o-transform: skewX(25deg);
float: left;
height: 29px;
margin: 10px 0 0 12px;
padding: 0 15px;
width: 160px;
border-radius: 5px 5px 0 0;
box-shadow: inset -1px 1px 0 rgba(255,255,255,.5);
background: #ddd;
}

.tabs li:nth-child(1) { z-index: 7 }

.tabs li:nth-child(2) { z-index: 6 }

.tabs li:nth-child(3) { z-index: 5 }

.tabs li:nth-child(4) { z-index: 4 }

.tabs li:nth-child(5) { z-index: 3 }

.tabs li:nth-child(6) { z-index: 2 }

.tabs li:nth-child(7) { z-index: 1 }

.tabs li.active, .tabs li.active:before {
z-index: 9 !important;
background: #eee;
height: 30px;
margin-bottom: -1px;
border-color: #888;
}

.tabs li:before {
content: '';
position: absolute;
left: -18px;
top: -1px;
-webkit-transform: skewX(140deg);
moz-transform: skewX(140deg);
-o-transform: skewX(140deg);
border-right: 0;
margin: 0;
padding: 0;
width: 30px;
border-radius: 5px 0 0 0;
box-shadow: inset 1px 1px 0 rgba(255,255,255,.5);
}

.tabs li img {
z-index: 9;
position: absolute;
left: -6px;
top: 6px;
width: 16px;
height: 16px;
-webkit-transform: skewX(-25deg);
moz-transform: skewX(-25deg);
-o-transform: skewX(-25deg);
border-radius: 3px;
}

.tabs li a {
z-index: 3;
position: absolute;
right: 10px;
top: 7px;
font-size: 18px;
color: #777; width: 15px;
height: 15px;
line-height: 16px;
text-align: center;
-webkit-transform: skewX(-25deg);
moz-transform: skewX(-25deg);
-o-transform: skewX(-25deg);
border-radius: 100%;
}

.tabs li a:hover {
color: #fff;
background-color: #e05d68;
box-shadow: inset 0 1px 1px rgba(0,0,0,.4);
}

.tabs li a:active {
background-color: #d83240
}

.tabs li span {
display: block;
width: 98%;
line-height: 30px;
-webkit-transform: skewX(-25deg);
moz-transform: skewX(-25deg);
-o-transform: skewX(-25deg);
white-space: nowrap;
overflow: hidden;
}

.tabs li span:after {
content: '';
width: 25px;
height: 28px;
position: absolute;
right: 0;
top: 1px;
background: -webkit-linear-gradient(left, hsla(0,0%,87%,0) 0%,hsla(0,0%,87%,1) 77%,hsla(0,0%,87%,1) 100%);
}

.tabs li.active span:after {
background: -webkit-linear-gradient(left, hsla(0,0%,93%,0) 0%,hsla(0,0%,93%,1) 77%,hsla(0,0%,93%,1) 100%)
}

/* tab add */

.add {
text-align: center;
font-weight: bold;
color: #ccc;
line-height: 17px;
font-size: 15px;
float: left;
margin: 16px 8px 0;
width: 23px;
height: 16px;
background: #ddd;
border-radius: 5px;
border: 1px solid #aaa;
-webkit-transform: skewX(25deg);
moz-transform: skewX(25deg);
-o-transform: skewX(25deg);
box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.add:hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,1);
background: #f8f8f8;
}

.add:active {
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
background: #ccc; color: #555;
}

After several steps, here’s what we have so far:

Creating a CSS3 Web Browser Window Inspired by Chrome

Step 4: Navigation Buttons and Address Bar

Now, we will add a location bar, also known as URL bar or Address bar, as well as the navigation buttons such as back, next, refresh and home. We will also add the favorite (star) icon and the control settings.


<!-- bar -->

<div class="bar clear">

<ul>
<li><a class="icon-arrow-left" href="#"></a></li>
<li><a class="icon-arrow-right" href="#"></a></li>
<li><a class="icon-refresh" href="#"></a></li>
<li><a class="icon-home" href="#"></a></li>
</ul>

<input id="favorite" type="checkbox" class="none">
<label for="favorite" class="favorite icon-star-empty"></label>
<input placeholder="Search" value="http://designrshub.com/" type="text">

<ul class="drop">

<li>
<input id="panel" type="checkbox">
<label for="panel" class="icon-reorder">
</label>

<ul>
<li><a href="#">New Tab <span>Ctrl + T</span></a></li>
<li><a href="#">New Window <span>Ctrl + N</span></a></li>
<li><a href="#">New Incognito Window <span>Ctrl + Shift + N</span></a></li>
<li><a href="#">Bookmarks</a></li>

<li class="slice"></li>

<li><a href="#">Edit</a></li>

<li class="slice"></li>

<li><a href="#">Zoom</a></li>

<li class="slice"></li>

<li><a href="#">Save Page As.. <span>Ctrl + S</span></a></li>
<li><a href="#">Find.. <span>Ctrl +F</span></a></li>
<li><a href="#">Print.. <span>Ctrl +P</span></a></li>
<li><a href="#">Tools</a></li>

<li class="slice"></li>

<li><a href="#">History <span>Ctrl + H</span></a></li>
<li><a href="#">Downloads <span>Ctrl + J</span></a></li>

<li class="slice"></li>

<li><a href="#">Signed in as youremail@yahoo.com</a></li>

<li class="slice"></li>

<li><a href="#">Settings</a></li>
<li><a href="#">About Google Chrome</a></li>
<li><a href="#">View Background Pages (8)</a></li>
<li><a href="#">Help</a></li>
</ul>

</li>
</ul>
</div>

<!-- Insert Step 5 Here -->

On your CSS file, add the following CSS code to add the proper style to our navigation buttons and address bar.

/* bar */
.bar {
z-index: 3;
position: relative;
clear: both;
padding: 6px;
background: #eee;
border-top: 1px solid #aaa;
}

.bar ul {
float: left;
}

.bar > ul > li {
position: relative;
float: left; margin: 0 2px;
}

.bar > ul > li > a, .bar ul li label{
display: block;
width: 26px;
height: 26px;
color: #444;
text-align: center;
line-height: 26px;
font-size: 20px;
border-radius: 4px;
border: 1px solid #eee;
}

.bar > ul > li > a:hover, .bar ul li label:hover {
border: 1px solid #ccc;
background: #eee;
box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 1px rgba (0,0,0,.1);
}

.bar > ul > li > a:active , .bar ul li label:active, .bar ul.drop li input:checked ~ label {
border: 1px solid #bbb;
background: #ccc;
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

.bar .favorite {
z-index: 5;
position: absolute;
right:48px;
top: 8px;
width: 26px;
height: 26px;
color: #888;
text-align: center;
line-height: 26px;
font-size: 24px;
}

.bar input:checked ~ .favorite {
color: #e8bc02;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
}

.bar input:checked ~ .icon-star-empty:before {
content: "\f005";
}

/* addres bar */

.bar input {
display:block;
float:left;
left: 130px;
right: 45px;
position: absolute;
margin-left: 10px;
border: 1px solid #bbb;
height: 26px;
font-size: 13px;
line-height: 26px;
border-radius: 5px;
padding: 0 10px;
box-shadow: inset 0 1px 0 rgba(0,0,0,.08), 0 1px 0 rgba (255,255,255,1);
}

/* menu .drop */

.bar ul.drop {
float: right;
}

.bar ul.drop li input {
display: none;
}

.bar ul.drop li ul {
display: none;
position: absolute;
right: 0;
top: 30px;
width: 270px;
padding: 5px 0;
background-color: rgba(255,255,255,.94);
box-shadow: 0 1px 7px rgba(0,0,0,.4);
border-radius: 5px; border-top: 1px solid #ddd;
}

.bar ul.drop li input:checked ~ ul {
display: block;
}

.bar ul.drop li ul li.slice {
margin: 6px 0;
height: 2px;
border-top: 1px solid #ddd;
}

.bar ul.drop li ul li a {
display: block;
height: 20px;
line-height: 20px;
padding-left: 10px;
font-size: 13px;
color: #222;
}

.bar ul.drop li ul li a:hover, .bar ul.drop li ul li a:hover span{
background: -webkit-linear-gradient(top, #5da4ea 0%,#4096ee 100%);
color: #fff;
}

.bar ul.drop li ul li a span { float: right; margin-right: 10px;
color: #999;
}
Creating a CSS3 Web Browser Window Inspired by Chrome

Step 5: Bookmark Bar

Since we already have the windows tab and the address bar, now is the time to add our bookmark bar. We will use again the <ul> tag to list all our bookmark pages.

<!-- bookmark -->

<div class="bookmark">

<ul>

<li>
<a href="http://designrshub.com">
<img src="http://designrshub.com/wp- content/themes/Designrshub/images/favicon.ico">
<span>Designrshub - Design Articles, Inspirations, Resources and Freebies</span>
</a>
</li>

<li>
<a href="https://plus.google.com/u/0/115967451510932415509/posts">
<img src="https://ssl.gstatic.com/s2/oz/images/faviconr2.ico">
<span>Designrshub on Google+</span>
</a>
</li>

<li>
<a href="https://twitter.com/Designrshub">
<img src="https://si0.twimg.com/favicons/favicon.ico">
<span>Designrshub on Twitter</span>
</a>
</li>

<li>
<a href="https://www.facebook.com/PhotoshopPH">
<img src="http://cdn1.iconfinder.com/data/icons/socialnetworking/16/faceboo k.png">
<span>Designrshub on Facebook</span>
</a>
</li>

<li>
<a href="http://pinterest.com/manuelgarciaph/">
<img src="http://passets- lt.pinterest.com/images/favicon.png">
<span>Designrshub on Pinterest</span>
</a>
</li>

</ul>

</div>

<!-- Insert Step 6 Here -->

To add the style on our bookmarks, copy the CSS code below and paste it on your CSS document.

/* bookmarks */

.bookmark {
position: relative;
z-index: 2;
clear: both;
background: #eee;
border-bottom: 1px solid #bbb;
}

.bookmark ul {
overflow: hidden;
margin: 0 5px;
height: 32px;
}

.bookmark ul li {
float: left;
margin: 0 0 5px;
}

.bookmark ul li a {
position: relative;
display: block;
max-width: 130px;
padding: 0 8px 0 28px;
height: 25px;
line-height: 25px;
background: #eee;
border-radius: 5px;
border: 1px solid #eee;
color: #444;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
transition: all .2s ease;
}

.bookmark ul li a:hover {
border: 1px solid #ccc;
background: #eee;
box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 1px rgba(0,0,0,.1);
}

.bookmark ul li a:active {
border: 1px solid #bbb;
background: #ddd;
box-shadow: inset 0 1px 0 rgba(0,0,0,.1);
}

.bookmark ul li a img {
width: 16px;
position: absolute;
left: 7px;
top: 4px;
border-radius: 3px;
}

.bookmark ul li a span { }
Creating a CSS3 Web Browser Window Inspired by Chrome

Step 6: The Content of the Web Browser

We are now done with our web browser except if you want to add a content inside of it. To lessen the burden of adding more codes, we will use the <iframe> tag to embed another HTML document that can be found online.

<div class="page">
<iframe width="100%" height="100%" src="http://designrshub.com" frameborder="0"></iframe>
</div>

And for the CSS code of our iframe, add the following to your CSS document:

/* page - iframe */

.page {
clear: both;
height: 450px;
background: #c5c5c5;
border-radius: 0 0 5px 5px;
overflow: hidden;
}

Here’s the screenshot of the final output of our web browser created using CSS3. You can also use the button provided below the screenshot to view the demo page.

Creating a CSS3 Web Browser Window Inspired by Chrome
View Demo

Download CSS3 Web Browser Window Code Snippet

If you want to experiment with the HTML and/or CSS code of this CSS3 web browser window inspired by Google Chrome, you can download the project file below.

Download Exclusive Freebie

You want this freebie? Like, Tweet or +1 to download the file.

Custom Facebook Timeline Cover Template

Written by Kim Murillo

Kim Murillo is the social media manager of Designrshub - a design blog that focuses on everything design related - and the one who maintains the gallery section. Occasionally, she posts HTML/CSS tutorials on various design blogs. You can use our contact form to inquire for a tutorial exclusively for your blog.

COPYRIGHT © 2013 DESIGNRSHUB | ABOUT | ADVERTISE | CONTACT US | SUBMIT NEWS | WRITE FOR US
Designrshub.com. Created and Designed by Manuel Garcia.
Reproduction without explicit permission is prohibited. All Rights Reserved.