¿Hay alguna manera de crear una pestaña similar a Chrome utilizando css?

Question

He estado buscando una pestaña similar a Google Chrome escrita usando css pero no puedo encontrar una.

Lo sentimos, para asegurarse de que estoy claro, yo estoy tratando de reproducir el aspecto con el fin de utilizarlo en una aplicación web o una página web

Answer 1

Sí, es posible, con CSS3

he escrito un blog sobre cómo su un depthy lil, y tristemente enouth no va a trabajar en decir a menos que utilice imágenes

Editar:

Eliminado de edad referencia a redeyeoperations porque es una granja de enlace ahora. Esta es una versión un poco más ligera y también está en un sitio de terceros, por lo que es menos probable que esté caído.

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

Este es el código

HTML

<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

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; } 

JS para la conmutación pestaña ~ incluyen jQuery para conseguir trabajo o visite el

codepen

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

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

Answer 2

Ha intentado jQuery UI que se puede encontrar aquí:

http://jqueryui.com

Answer 3

he encontrado esto en trucos CSS, muy profundamente oculta:

http://css-tricks.com/examples/MovingHighlight/

Answer 4

Solo estoy dando algunos css para obtener pestañas similares a Chrome, descanse para que pueda usarlas como desee.

<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> 

demostración aquí http://jsfiddle.net/GH7d6/

Answer 5

This github project parece hacerlo, pero no se ve tan bien en mi IE 11 ... :(

Answer 6

Si necesita una solución de inicio y su AngularJS . hice una yo están decoradas con anulando los estilos predeterminados Bootstrap

puede comprobar el tutorial aquí:. https://scotch.io/tutorials/build-chrome-like-tabs-with-bootstrap-and-angularjs

y agarrar el código aquí: https://github.com/imjustd/chrome-tabs

Answer 7

Qué tal esto: http://codepen.io/justd/pen/dPeKEG/

Encuentra tuto here.

@import "compass/css3"; 

@import "compass"; 

.tab-container { 
    background: #8dc8fb; 
    margin: 0; 
    padding: 0; 
    max-height: 40px; 

    ul { 
    &.nav-tabs { 
     margin: 0; 
     list-style-type: none; 
     line-height: 40px; 
     max-height: 40px; 
     overflow: hidden; 
     display: inline-block; 
     @include display-flex; 
     padding-right: 20px; 
     border-bottom: 5px solid #f7f7f7; 

     $color: #c3d5e6; 

     > li { 
     $raduis: 28px 145px; 

     margin: 5px -14px 0; 
     @include border-top-left-radius($raduis); 
     @include border-top-right-radius($raduis); 
     padding: 0 30px 0 25px; 
     height: 170px; 
     background: $color; 
     position: relative; 
     @include box-shadow(0 4px 6px rgba(0,0,0,.5)); 
     width: 200px; 
     max-width: 200px; 
     min-width: 20px; 
     border:1px solid #aaa; 

     &:first-child { 
      margin-left: 0; 
     } 

     &:last-of-type { 
      margin-right: 0; 
     } 

     > a { 
      display: block; 
      max-width:100%; 
      text-decoration: none; 
      color: #222; 
      padding: 3px 7px; 

      span { 
      overflow: hidden; 
      white-space: nowrap; 
      display: block; 
      } 

      &:focus, 
      &:hover { 
      background-color: transparent; 
      border-color: transparent; 
      } 

      .glyphicon-remove { 
      color: #777; 
      display: inline-block; 
      padding:3px; 
      font-size: 10px; 
      position:absolute; 
      z-index: 10; 
      top:7px; 
      right: -10px; 
      @include border-radius(50%); 

      &:hover { 
       background: #d39ea3; 
       color: white; 
       @include box-shadow(inset 0 1px 1px rgba(0,0,0,.25)); 
       @include text-shadow(0 1px 1px rgba(0,0,0,.25)); 
      } 
      } 
     } 

     &.active { 
      z-index: 2; 
      @include background-image(linear-gradient(white, #f7f7f7 30px)); 

      > a { 
      background-color: transparent; 
      border-color: transparent; 
      border-bottom-color: transparent; 

      &:focus, 
      &:hover { 
       background-color: transparent; 
       border-color: transparent; 
       border-bottom-color: transparent; 
      } 
      } 
     } 
     } 

     .btn { 
     float: left; 
     height: 20px; 
     width: 35px; 
     min-width: 35px; 
     max-width: 35px; 
     margin: 10px 0 0 0; 
     border-color: #71a0c9; 
     outline: none; 

     @include transform(skew(30deg)); 

     &.btn-default { 
      background: $color; 

      &:hover { 
      background: #d2deeb; 
      } 

      &:active { 
      background: #9cb5cc; 
      } 
     } 
     } 
    } 
    } 

    .tab-pane { 
    padding: 60px 40px; 
    text-align: center; 

    &.active { 
     border-top:1px solid #ddd; 
    } 
    } 
}