Style tab-bar like in Chrome? - html

Question

I'm trying to recreate Google Chrome's tab bar as accurately as possible with HTML/CSS. But it turns out to be quite a bit more complicated than I thought.
It already looks pretty similar, but I noticed several issues:
when the tabs are resized the angles get messed up
the z-indexing doesn't work as expected
the hover events don't work
where tabs overlap it looks bad
text is not vertically centered (in Firefox it works actually)
the tabs are lacking curves on the bottom
the x buttons don't stick to the right
Any ideas?
I tried to look at chromes source code to see if I could find the original color/transparency/curve values, but I couldn't find anything.
Before I forget, if possible in any way, I'd like this to be more or less compatible with IE8, even if that means that the tabs can't be trapezoid shaped etc.
EDIT2: Rewrote the whole thing from scratch. (Credits to Ben Rhys-Lewis for the new-tab-button)
https://jsfiddle.net/p7vxzLjq/17/
body {
background: #21C256; /* green windows theme */
/* using transparency the tabbar should automatically adjust itself to whatever color is defined here */
}
.tab-bar {
height: 23px; /* tab height */
cursor: default;
user-select: none; /* disable text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
pointer-events: none; /* disable image drag */
margin: 0;
padding: 0px 7px 0px 7px;
}
.tab {
background: #FFFFFF; /* inactive tab background color */
opacity: 0.726; /* inactive tab transparency */
width: 213px; /* tab width */
//max-width: 213px; /* messes up the trapezoid angles */
margin-left: 0px; /* tab overlap */
float: left;
overflow: hidden;
height: 100%;
/*padding-bottom: 1px;*/
border-radius: 3px; /* tab curves */
transform: perspective(100px) rotateX(20deg); /* tab shape angle */
box-shadow: 0 0 2pt 0 rgba(0, 0, 0, 0.9); /* tab outline */
white-space: nowrap;
padding-left: 8px; /* icon left side margin */
display: block;
vertical-align: middle;
z-index: -2; /* inactive tabs are generally in the background */
}
.tab:hover {
opacity: 0.8;
}
.tab-content {
transform: perspective(100px) rotateX(-20deg); /* untransform tab content (this makes stuff blurry! :( ) */
-o-transform: perspective(100px) rotateX(-20deg);
-ms-transform: perspective(100px) rotateX(-20deg);
-moz-transform: perspective(100px) rotateX(-20deg);
-webkit-transform: perspective(100px) rotateX(-20deg);
-khtml-transform: perspective(100px) rotateX(-20deg);
}
.tab-icon {
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
}
.tab-text {
display: inline-block;
vertical-align: middle;
font-family: arial, sans-serif; /* tab text font */
text-rendering: geometricPrecision; /* tab text improve rendering */
font-size: 12px; /* tab text size */
-webkit-mask-image: linear-gradient(to right, #000, #000, 200px, transparent); /* make text fade at the right edge (webkit only)*/
}
.tab-close {
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
right: 5px;
background: url(http://250kb.de/u/160430/p/YlimbFeb56qF.png);
}
.tab-close:hover {
background: url(http://250kb.de/u/160430/p/rNqZRYHpNQBr.png);
}
.active-tab {
z-index: -1; /* active tab is in front of other tabs, but still behind the content box */
background: linear-gradient(to bottom, #FFFFFF, #F8F9F9); /* active tab color */
position: relative;
opacity: 1;
padding-bottom: 2px;
}
.active-tab:hover {
opacity: 1;
}
.new-tab {
overflow: hidden;
float: left;
width: 25px; /* new-tab-button width */
height: 14px; /* new-tab-button height */
margin-top: 5px; /* to vertically center the new-tab-button */
margin-left: 7px; /* margin between tabs and new-tab-button */
box-shadow: 0 0 1pt 0 rgba(0, 0, 0, 0.9); /* new-tab-button outline */
background: #FFFFFF; /* new-tab-button color */
opacity: 0.626; /* new-tab-button transparency */
border-radius: 2px; /* new-tab-button curves */
transform: skew(20deg); /* new-tab-button shape angle */
-o-transform: skew(20deg);
-ms-transform: skew(20deg);
-moz-transform: skew(20deg);
-khtml-transform: skew(20deg);
-webkit-transform: skew(20deg);
}
.new-tab:hover {
opacity: 0.8;
}
#content {
z-index: 1; /* the content box is always in the foreground */
width: 100%;
height: 50px;
background: #F8F9F8;
border-radius: 3px;
}
<ul class="tab-bar">
<li class="tab">
<div class="tab-content">
<img class="tab-icon" src="http://amazon.com/favicon.ico"/>
<span class="tab-text">Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs & more</span>
<span class="tab-close"></span>
</div>
</li>
<li class="tab active-tab">
<div class="tab-content">
<img class="tab-icon" src="http://google.com/favicon.ico"/>
<span class="tab-text">Google</span>
<span class="tab-close"></span>
</div>
</li>
<li class="new-tab"></li>
</ul>
<div id="content">
</div>

Answer 1

OK here is a fiddle of a css shape like the new tab one you want.
#newtab {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: #A8D5C1;
margin-left: 20px;
border-radius: 10px;
}
https://jsfiddle.net/2p74co0q/
For the transparency values, its hard to see from your image but I guess just trial and error. Obviously how your chrome looks is different to how mine looks because of the theme you are using.

Answer 2

Had to change many things for it to work properly. Here is the Fiddle. Some notes on changes:
Hover didn't work because of pointer-events property on tab class. You can put it under tab-close class or you can use jQuery solution for it to work in old browsers.
I don't see any reason to use negative z-index. I didn't use and it seems to work.
For vertical-align to work properly, you should have a constant line-height. Added line-height property to tab class and made all sub classes inherit it so that they will be aligned to middle properly. Also had to wrap images with extra divs for them to align properly.
About the overlap, if you want a result as in Chrome tabs, you should not use opacity. No matter what you do, if you have opacity, result will look like that. You can use constant color instead.
For bottom curve and shadow added new elements. Not sure if it is a must but it looks more like Chrome tabs.
For it to work in IE8
I tested it on IE8 and it did not look pleasant. Don't know where to start. Here are some thoughts:
vertical-align will not work reliably. You can ditch everything with vertical-align and use constant absolute positioning. This means you cannot change tab sizes as you want and you must chose a constant one.
You must write filter equivalents of all transform and opacity properties. Your css will look like the darkest place of hell.
border-radius will not work. There are some dirty workarounds which I do not suggest. Same for box-shadow.
body {
background: #21C256;
/* green windows theme */
/* using transparency the tabbar should automatically adjust itself to whatever color is defined here */
}
.tab-bar {
height: 26px;
/* tab height */
line-height: 26px;
/* this is critical for vertical alligning */
cursor: default;
user-select: none;
/* disable text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
margin: 0;
padding: 0px 7px 0px 7px;
z-index: 0;
white-space: nowrap;
display: block;
overflow: hidden;
width: 100%;
margin: 0;
font-size: 0;
}
.tab-bottom-curve-left {
background: inherit;
border: inherit;
opacity: inherit;
border-left: none;
border-bottom: none;
width: 10px;
height: 4px;
position: absolute;
left: -5px;
bottom: -2px;
z-index: 5;
transform: rotate(-31deg);
}
.tab-bottom-curve-right {
background: inherit;
border: inherit;
opacity: inherit;
border-left: none;
border-bottom: none;
width: 10px;
height: 4px;
position: absolute;
right: -5px;
bottom: -2px;
transform: rotate(31deg);
/* box-shadow: inherit; */
z-index: 0;
}
.tab-icon {
pointer-events: none;
/* disable image drag */
}
.tab-text {
width: 80%;
height: 100%;
padding-left: 4px;
}
.tab {
background: #FFFFFF;
/* inactive tab background color */
opacity: 0.726;
/* inactive tab transparency */
width: 213px;
/* tab width */
margin-left: 0px;
/* tab overlap */
overflow: hidden;
height: 100%;
/*padding-bottom: 1px;*/
border-radius: 3px;
/* tab curves */
transform: perspective(100px) rotateX(20deg);
/* tab shape angle */
box-shadow: 0 0 2pt 0 rgba(0, 0, 0, 0.9);
/* tab outline */
white-space: nowrap;
padding-left: 8px;
/* icon left side margin */
vertical-align: middle;
z-index: 1;
/* inactive tabs are generally in the background */
line-height: inherit;
/* margin-left: -1px; */
/* margin-right: -1px; */
/* margin-top: -6px; */
height: 100%;
vertical-align: top;
font-size: 0;
margin-top: 1px;
overflow: visible;
position: relative;
display: inline-block;
float: left;
display: block;
}
.tab:hover {
opacity: 0.8;
}
.tab-content {
transform: perspective(100px) rotateX(-20deg);
/* untransform tab content (this makes stuff blurry! :( ) */
-o-transform: perspective(100px) rotateX(-20deg);
-ms-transform: perspective(100px) rotateX(-20deg);
-moz-transform: perspective(100px) rotateX(-20deg);
-webkit-transform: perspective(100px) rotateX(-20deg);
-khtml-transform: perspective(100px) rotateX(-20deg);
line-height: inherit;
z-index: 5;
height: 100%;
font-size: 0;
overflow: hidden;
/* position: absolute; */
}
.tab-icon {
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
}
.tab-text {
display: inline-block;
vertical-align: middle;
font-family: arial, sans-serif;
/* tab text font */
text-rendering: geometricPrecision;
/* tab text improve rendering */
font-size: 12px;
/* tab text size */
-webkit-mask-image: linear-gradient(to right, #000, #000, 165px, transparent);
/* make text fade at the right edge (webkit only)*/
overflow: hidden;
}
.tab-close {
display: inline-block;
height: 100%;
width: 16px;
line-height: inherit;
right: 5px;
position: absolute;
z-index: 100000;
vertical-align: middle;
}
.tab-close-img {
display: inline-block;
position: relative;
vertical-align: middle;
width: 16px;
height: 16px;
background: url(http://250kb.de/u/160430/p/YlimbFeb56qF.png);
}
.tab-close-img:hover {
background: url(http://250kb.de/u/160430/p/rNqZRYHpNQBr.png);
}
.active-tab {
z-index: 2;
/* active tab is in front of other tabs, but still behind the content box */
background: linear-gradient(to bottom, #FFFFFF, #F8F9F9);
/* active tab color */
/* position: relative; */
opacity: 1;
/* padding-bottom: 2px; */
}
.active-tab:hover {
opacity: 1;
}
.new-tab {
overflow: hidden;
width: 25px;
/* new-tab-button width */
height: 14px;
/* new-tab-button height */
/* margin-top: 7px; */
/* to vertically center the new-tab-button */
margin-left: 6px;
/* margin between tabs and new-tab-button */
vertical-align: middle;
box-shadow: 0 0 1pt 0 rgba(0, 0, 0, 0.9);
/* new-tab-button outline */
background: #FFFFFF;
/* new-tab-button color */
opacity: 0.626;
/* new-tab-button transparency */
border-radius: 2px;
/* new-tab-button curves */
transform: skew(20deg);
/* new-tab-button shape angle */
-o-transform: skew(20deg);
-ms-transform: skew(20deg);
-moz-transform: skew(20deg);
-khtml-transform: skew(20deg);
-webkit-transform: skew(20deg);
display: inline-block;
}
.new-tab:hover {
opacity: 0.8;
}
#content {
position: absolute;
z-index: 3;
/* the content box is always in the foreground */
width: 100%;
height: 50px;
background: #F8F9F8;
border-radius: 3px;
}
.tab-bottom-shadow {
/* width: 100%; */
position: absolute;
background: black;
height: 1px;
bottom: -1px;
left: 0px;
right: 0;
box-shadow: 0 0 4px black;
z-index: 5;
}
.active-tab .tab-bottom-shadow {
display: none;
}
<div class="tab-bar">
<div class="tab">
<div class="tab-content">
<span class="tab-icon-wrap"><img class="tab-icon" src="http://amazon.com/favicon.ico" /></span>
<span class="tab-text">Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs & more</span>
<span class="tab-close"><span class="tab-close-img"></span></span>
</div>
<div class="tab-bottom-curve-left"></div>
<div class="tab-bottom-curve-right"></div>
<div class="tab-bottom-shadow"></div>
</div>
<div class="tab">
<div class="tab-content">
<span class="tab-icon-wrap"><img class="tab-icon" src="http://youtube.com/favicon.ico" /></span>
<span class="tab-text">YouTube</span>
<span class="tab-close"><span class="tab-close-img"></span></span>
</div>
<div class="tab-bottom-curve-left"></div>
<div class="tab-bottom-curve-right"></div>
<div class="tab-bottom-shadow"></div>
</div>
<div class="tab active-tab">
<div class="tab-content">
<span class="tab-icon-wrap"><img class="tab-icon" src="http://google.com/favicon.ico" /></span>
<span class="tab-text">Google</span>
<span class="tab-close"><span class="tab-close-img"></span></span>
</div>
<div class="tab-bottom-curve-left"></div>
<div class="tab-bottom-curve-right"></div>
<div class="tab-bottom-shadow"></div>
</div>
<div class="new-tab"></div>
</div>
<div id="content">
</div>

Answer 3

Do you have to use pure CSS? Or can you use image mapping. That way, you can create links, hover events with minimal effort, which achieve the same effect.
http://www.image-maps.com/ is a great tool to use for projects like this. You could use the polygon tool to select the buttons.
Don't worry if this isn't what you're looking for.

Answer 4

Please use the below code. I think this is what you are looking for. Demo
body {
background: #21C256; /* green windows theme */
/* using transparency the tabbar should automatically adjust itself to whatever color is defined here */
}
.tab-bar {
height: 23px; /* tab height */
cursor: default;
display: flex;
user-select: none; /* disable text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
pointer-events: none; /* disable image drag */
margin: 0;
padding: 0px 7px 0px 7px;
}
.tab {
background: #FFFFFF; /* inactive tab background color */
opacity: 0.726; /* inactive tab transparency */
width: 213px; /* tab width */
//max-width: 213px; /* messes up the trapezoid angles */
margin-left: 0px; /* tab overlap */
float: left;
overflow: hidden;
height: 100%;
display: flex;
/*padding-bottom: 1px;*/
border-radius: 3px; /* tab curves */
transform: perspective(100px) rotateX(20deg); /* tab shape angle */
box-shadow: 0 0 2pt 0 rgba(0, 0, 0, 0.9); /* tab outline */
white-space: nowrap;
padding-left: 8px; /* icon left side margin */
display: block;
vertical-align: middle;
z-index: -2; /* inactive tabs are generally in the background */
}
.tab:hover {
opacity: 0.8;
}
.tab-content {
display: flex;
justify-content: space-between;
padding: 4px 9px 0px 0px;
transform: perspective(100px) rotateX(-20deg); /* untransform tab content (this makes stuff blurry! :( ) */
-o-transform: perspective(100px) rotateX(-20deg);
-ms-transform: perspective(100px) rotateX(-20deg);
-moz-transform: perspective(100px) rotateX(-20deg);
-webkit-transform: perspective(100px) rotateX(-20deg);
-khtml-transform: perspective(100px) rotateX(-20deg);
}
.tab-icon {
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
}
.tab-text {
display: inline-block;
text-align: left;
width: 76%;
vertical-align: middle;
font-family: arial, sans-serif; /* tab text font */
text-rendering: geometricPrecision; /* tab text improve rendering */
font-size: 12px; /* tab text size */
-webkit-mask-image: linear-gradient(to right, #000, #000, 200px, transparent); /* make text fade at the right edge (webkit only)*/
}
.tab-close {
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
right: 5px;
background: url(http://250kb.de/u/160430/p/YlimbFeb56qF.png);
}
.tab-close:hover {
background: url(http://250kb.de/u/160430/p/rNqZRYHpNQBr.png);
}
.active-tab {
z-index: -1; /* active tab is in front of other tabs, but still behind the content box */
background: linear-gradient(to bottom, #FFFFFF, #F8F9F9); /* active tab color */
position: relative;
opacity: 1;
padding-bottom: 2px;
}
.active-tab:hover {
opacity: 1;
}
.new-tab {
overflow: hidden;
float: left;
width: 25px; /* new-tab-button width */
height: 14px; /* new-tab-button height */
margin-top: 5px; /* to vertically center the new-tab-button */
margin-left: 7px; /* margin between tabs and new-tab-button */
box-shadow: 0 0 1pt 0 rgba(0, 0, 0, 0.9); /* new-tab-button outline */
background: #FFFFFF; /* new-tab-button color */
opacity: 0.626; /* new-tab-button transparency */
border-radius: 2px; /* new-tab-button curves */
transform: skew(20deg); /* new-tab-button shape angle */
-o-transform: skew(20deg);
-ms-transform: skew(20deg);
-moz-transform: skew(20deg);
-khtml-transform: skew(20deg);
-webkit-transform: skew(20deg);
}
.new-tab:hover {
opacity: 0.8;
}
#content {
z-index: 1; /* the content box is always in the foreground */
width: 100%;
height: 50px;
background: #F8F9F8;
border-radius: 3px;
}

Answer 5

If you want that the tabs overlap properly, you have to get remove the transparency. My solution also includes various other improvements:
body {
background: #21C256; /* green windows theme */
/* using transparency the tabbar should automatically adjust itself to whatever color is defined here */
}
.tab-bar {
height: 25px; /* tab height */
cursor: default;
user-select: none; /* disable text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
pointer-events: none; /* disable image drag */
margin: 0;
padding: 0px 7px;
}
.tab {
background: #BAF1CB; /* inactive tab background color */
opacity: 1; /* inactive tab transparency */
width: 213px; /* tab width */
margin-left: 0px; /* tab overlap */
float: left;
overflow: hidden;
height: 100%;
padding: 1px 0;
border-radius: 3px; /* tab curves */
transform: perspective(100px) rotateX(20deg); /* tab shape angle */
box-shadow: 2px -2px 2px -2px black, -2px -1px 2px -2px black; /* tab outline */
white-space: nowrap;
padding-left: 8px; /* icon left side margin */
display: block;
vertical-align: middle;
z-index: -2; /* inactive tabs are generally in the background */
}
.tab:hover {
background-color: #D0F5DB;
}
.tab-content {
padding: 2px 0;
transform: perspective(100px) rotateX(-20deg); /* untransform tab content (this makes stuff blurry! :( ) */
-o-transform: perspective(100px) rotateX(-20deg);
-ms-transform: perspective(100px) rotateX(-20deg);
-moz-transform: perspective(100px) rotateX(-20deg);
-webkit-transform: perspective(100px) rotateX(-20deg);
-khtml-transform: perspective(100px) rotateX(-20deg);
}
.tab-icon {
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
}
.tab-text {
display: inline-block;
vertical-align: middle;
font-family: arial, sans-serif; /* tab text font */
text-rendering: geometricPrecision; /* tab text improve rendering */
font-size: 12px; /* tab text size */
-webkit-mask-image: linear-gradient(to right, #000, #000, 200px, transparent); /* make text fade at the right edge (webkit only)*/
max-width: 170px;
overflow: hidden;
}
.tab-close {
float: right;
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
margin: 3px 5px 0 0;
background: url(http://250kb.de/u/160430/p/YlimbFeb56qF.png);
}
.tab-close:hover {
background: url(http://250kb.de/u/160430/p/rNqZRYHpNQBr.png);
}
.active-tab {
z-index: 1000000; /* active tab is in front of other tabs, but still behind the content box */
background: linear-gradient(to bottom, #FFFFFF, #F8F9F9); /* active tab color */
position: relative;
opacity: 1;
padding-bottom: 2px;
}
.active-tab:hover {
opacity: 1;
}
.new-tab {
overflow: hidden;
float: left;
width: 25px; /* new-tab-button width */
height: 14px; /* new-tab-button height */
margin-top: 5px; /* to vertically center the new-tab-button */
margin-left: 7px; /* margin between tabs and new-tab-button */
box-shadow: 0 0 1pt 0 rgba(0, 0, 0, 0.9); /* new-tab-button outline */
background: #FFFFFF; /* new-tab-button color */
opacity: 0.65; /* new-tab-button transparency */
border-radius: 2px; /* new-tab-button curves */
transform: skew(20deg); /* new-tab-button shape angle */
-o-transform: skew(20deg);
-ms-transform: skew(20deg);
-moz-transform: skew(20deg);
-khtml-transform: skew(20deg);
-webkit-transform: skew(20deg);
}
.new-tab:hover {
opacity: 0.8;
}
#content {
position: relative;
z-index: 2; /* the content box is always in the foreground */
width: 100%;
height: 50px;
background: #F8F9F8;
border-radius: 3px;
border: 1px solid #aaaaaa;
border-width: 1px 0 0 0;
}
<ul class="tab-bar">
<li class="tab">
<div class="tab-content">
<!-- Move the close-Button to the beginning -->
<span class="tab-close"></span>
<img class="tab-icon" src="http://amazon.com/favicon.ico"/>
<span class="tab-text">Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs & more</span>
</div>
</li>
<li class="tab active-tab">
<div class="tab-content">
<span class="tab-close"></span>
<img class="tab-icon" src="http://google.com/favicon.ico"/>
<span class="tab-text">Google</span>
</div>
</li>
<li class="new-tab"></li>
</ul>
<div id="content">
</div>