How to Create a Chrome-Like Tab Using CSS

Is there a way to create a chrome-like tab using CSS?

yeah its possible, with css3

Ive posted a blog about how to its a lil depthy, and sadly enouth not going to work on ie unless you use images

Edit:

Removed old reference to redeyeoperations cause its a link farm now.
This is a bit lighter version also it is up on a 3rd party site, so its less likely to be down.

http://codepen.io/jacoblwe20/pen/DxAJF

Here is the code

var tabs = $('.tabs > li');

tabs.on("click", function(){
  tabs.removeClass('active');
  $(this).addClass('active');
});

body {
  background: #efefef;
  font: .8em sans-serif;
  margin: 0;
}

.tab-container {
  background: #2BA6CB;
  margin: 0;
  padding: 0;
  max-height: 35px;
}

ul.tabs {
  margin: 0;
  list-style-type: none;
  line-height: 35px;
  max-height: 35px;
  overflow: hidden;
  display: inline-block;
  padding-right: 20px
}

ul.tabs > li.active {
  z-index: 2;
  background: #efefef;
}

ul.tabs > li.active:before {
  border-color: transparent #efefef transparent transparent;
}

ul.tabs > li.active:after {
  border-color: transparent transparent transparent #efefef;
}

ul.tabs > li {
  float: right;
  margin: 5px -10px 0;
  border-top-right-radius: 25px 170px;
  border-top-left-radius: 20px 90px;
  padding: 0 30px 0 25px;
  height: 170px;
  background: #ddd;
  position: relative;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
  max-width: 200px;
}

ul.tabs > li > a {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  color: #222;
}

ul.tabs > li:before,
ul.tabs > li:after {
  content: '';
  background: transparent;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  border-width: 10px;
  top: 0px;
  border-style: solid;
  position: absolute;
}

ul.tabs > li:before {
  border-color: transparent #ddd transparent transparent;
  -webkit-transform: rotate(48deg);
  -moz-transform: rotate(48deg);
  -ms-transform: rotate(48deg);
  -o-transform: rotate(48deg);
  transform: rotate(48deg);
  left: -23px;
}

ul.tabs > li:after {
  border-color: transparent transparent transparent #ddd;
  -webkit-transform: rotate(-48deg);
  -moz-transform: rotate(-48deg);
  -ms-transform: rotate(-48deg);
  -o-transform: rotate(-48deg);
  transform: rotate(-48deg);
  right: -17px;
}

/* Clear Fix took for HTML 5 Boilerlate*/

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=tab-container>
  <ul class="tabs clearfix" >
    <li>
      <a href=# >Users</a> 
    </li>
    <li class=active > 
      <a href=# >Pending Lots</a> 
    </li>
    <li> 
      <a href=# >Nearby Lots</a> 
    </li>
    <li>
      <a href=# >Recent Lots</a>
    </li>
  </ul>
</div>
<div class=outer-circle></div>

CSS tabs as Google Chrome

Ok, thanks everyone for suggestions.
I made it work in all browsers:

CSS

.tabs {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}
.tabs li {
    width: 150px;
}
.tabs li a {
    text-align: center;
    display: block;
    color: #979797;
    padding: 10px 15px;
    white-space: nowrap;
    text-decoration: none;
    text-overflow: ellipsis;
    overflow: hidden;
}
.tabs li.active a {
    background: #22234e;
    color: #fff;
}
.tabs li.active, .tabs li:not(.active):hover {
    min-width: 150px;
    max-width: 150px;
}

http://jsfiddle.net/k9rLLqwo/40/

It is based on:
https://stackoverflow.com/a/9390015/1741042

google chrome like close button behavior in css

I'm going to assume that you need two separate answers to your question:

• How do you nest the element properly?
• How do you perform the close action?

Let's start with nesting the elements. I chose to make my tabs in a ul and make each tab an li within that list. The close button is an a tag that is floated to the right inside the li.

<ul>
    <li>Tab 1 <a>x</a></li>
    <li>Tab 2 <a>x</a></li>
    <li>Tab 3 <a>x</a></li>
    <li>Tab 4 <a>x</a></li>
    <li>Tab 5 <a>x</a></li>
</ul>

(I highly recommend you give them all the appropriate classes for what you're trying to do, but for this case, I used the minimal amount of code to keep it clean and easy to read.)

Next up, we'll go into performing the close action with JavaScript.

I was able to create the following jsFiddle for you to demonstrate both of these points:

original jsFiddle

EDIT: revised jsFiddle

Essentially, the code works as follows:

$('a').click(function() {
    $(this).closest('li').animate({padding:0, margin:0, width: 0}, function () {  
        $(this).closest('li').hide();   
    });
});

When you click the a tag, which is what I've made the x button (similar to a chrome tab), it animates the list item (list of tabs, floated to the left) by changing the padding, margin, and width to 0.

Technically, since I set the li to border-box for the box-sizing, I don't have to have padding:0 in the animate function at all.

When animation is complete, I hide the list item entirely. (I could even remove it entirely at that point if I wanted to get rid of it, but I wanted you to see what I'm doing.)

Some additional takeaways:

• You can have a click event on almost any item in jQuery, but certain mobile devices get finicky if they aren't a tags.
• You're correct that you shouldn't put a button inside of an anchor tag, but putting two anchor tags or a button and an anchor tag into one list item is fine.

Everything else like setting the active tab and using a % as a max-width should be pretty obvious, but if you need more help or clarification, just let me know!

Is it possible to style the browser tab and bar?

Nope, but you can style the scroll bar and favicon :D

Link to the answer about scroll bar styling: CSS customized scroll bar in div

Changing the favicon: Adding a favicon to a static HTML page

Google Chrome clears CSS styles for current page when opening link in new tab or opening a new window

This issue was fixed by Google developers and will be merged to the stable channel soon already merged into Version 53.0.2785.143 m (64-bit).

https://bugs.chromium.org/p/chromium/issues/detail?id=648237#c6

---

Related Topics