html - restablecer - ¿Barra de pestañas de estilo como en Chrome?

restablecer google chrome

Question

Estoy intentando recrear la barra de pestañas de Google Chrome con la mayor precisión posible con HTML / CSS. Pero resulta ser un poco más complicado de lo que pensaba.

Ya se ve bastante similar, pero noté varios problemas:

• cuando las pestañas cambian de tamaño, los ángulos se desordenan
• la indexación z no funciona como se esperaba
• los eventos flotantes no funcionan
• donde las pestañas se superponen se ve mal
• el texto no está centrado verticalmente (en Firefox funciona realmente)
• Las pestañas carecen de curvas en la parte inferior.
• los botones x no se pegan a la derecha

¿Algunas ideas?

Intenté ver el código fuente de cromos para ver si podía encontrar los valores de color / transparencia / curva originales, pero no pude encontrar nada .

Antes de que olvide, si es posible de alguna manera, me gustaría que esto fuera más o menos compatible con IE8, incluso si eso significa que las pestañas no pueden tener forma de trapecio, etc.

EDIT2 : reescribió todo desde cero. (Créditos a Ben Rhys-Lewis para el botón de nueva pestaña)
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

¿Tienes que usar CSS puro? O puedes usar mapeo de imágenes De esa manera, puede crear enlaces, eventos de hover con el mínimo esfuerzo, que logran el mismo efecto.

http://www.image-maps.com/ es una gran herramienta para usar en proyectos como este. Puede utilizar la herramienta de polígono para seleccionar los botones.

No te preocupes si esto no es lo que estás buscando.

Answer 2

OK, aquí hay un violín de una forma css como la nueva pestaña que deseas.

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

Para los valores de transparencia, es difícil de ver en su imagen, pero supongo que solo prueba y error. Obviamente, la apariencia de tu chrome es diferente a la mía debido al tema que estás usando.

Answer 3

Por favor, utilice el siguiente código. Creo que esto es lo que estás buscando. 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 4

Si desea que las pestañas se superpongan correctamente, debe eliminar la transparencia. Mi solución también incluye varias otras mejoras:

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>

Answer 5

Tuve que cambiar muchas cosas para que funcione correctamente. Aquí está el Fiddle . Algunas notas sobre los cambios:

• Hover no funcionó debido a la propiedad pointer-events en la clase de pestaña. Puede ponerlo bajo la clase tab-close o puede usar la solución jQuery para que funcione en navegadores antiguos.
• No veo ninguna razón para usar el z-index negativo. No lo usé y parece funcionar.
• Para que vertical-align funcione correctamente, debe tener una line-height constante. Se agregó la propiedad de line-height a la clase de tabulación e hizo que todas las subclases la heredaran para que se alineen correctamente en el centro. También tenía que envolver imágenes con divs adicionales para que se alinearan correctamente.
• Sobre la superposición, si desea un resultado como en las pestañas de Chrome, no debe usar la opacidad. No importa lo que hagas, si tienes opacidad, el resultado se verá así. Puedes usar color constante en su lugar.
• Para la curva inferior y la sombra se añaden nuevos elementos. No estoy seguro de si es una necesidad pero se parece más a las pestañas de Chrome.

Para que funcione en IE8.

Lo probé en IE8 y no parecía agradable. No sé por dónde empezar. Aquí hay algunos pensamientos:

• vertical-align no funcionará de manera confiable. Puede deshacerse de todo con vertical-align y utilizar un posicionamiento absolute constante. Esto significa que no puede cambiar el tamaño de las pestañas como desea y debe elegir una constante.
• Debe escribir filter equivalentes de todas las propiedades de transform y opacity . Tu css se verá como el lugar más oscuro del infierno.
• border-radius no funcionará. Hay algunas soluciones sucias que no sugiero. Lo mismo para 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>