Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

I have been looking for a Google Chrome-like tab written using CSS but cannot find one.

I am trying to replicate the look in order to use it in a web application or a website.

like image 432
user220755 Avatar asked Mar 16 '11 08:03

user220755


People also ask

Can I customize Chrome tabs?

You can upload a photo or choose a color to change the background of Chrome browser. When you open a new tab, you can also have your favorite or most visited websites appear, so you can get to them quickly.

How do I change the tab style in Chrome?

Change tab view in Chrome Android To change the tab view in Chrome Android, you simply need to click on the number icon which can be found right next to the browsers address bar. This will take you to the new grid view in Chrome.

How do you make a color tab?

To change the color of a sheet tab, right-click the tab, point to Tab Color and pick a color that you want. Tip: Click away from the formatted tab to see the new tab color. If you want to remove the color, right-click the tab, point to Tab Color, and pick No Color.


2 Answers

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>
like image 177
Jacob Lowe Avatar answered Oct 08 '22 01:10

Jacob Lowe


I am just giving some css for getting chrome like tabs, rest its up to you to use as you want.

<style type='text/css'>
  .chrome_tab {
    width: 150px;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 20px solid grey;
    border-radius: 80px 80px 2px 2px;
    color: white;
    text-align: center;
  }
</style>


<div class='chrome_tab'>
    muhammad(peace be upon him)
</div>

demo here http://jsfiddle.net/GH7d6/

like image 39
Shoib Mohammed A Avatar answered Oct 08 '22 03:10

Shoib Mohammed A