Style tab-bar like in Chrome? Style tab-bar like in Chrome? google-chrome google-chrome

Style tab-bar like in Chrome?


html css google-chrome tabs

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.

html css google-chrome tabs

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.

Show code snippet