La siguiente es una publicación invitada de Menno van Slooten. Es posible que notes que hemos recorrido este camino antes, pero me gusta bastante el enfoque de Menno aquí. El resultado final demuestra que puedes ponerte un poco más elegante con el diseño de lo que lo hice originalmente, con bordes, degradados y sombras y, en realidad, usando menos elementos.
Un control de pestañas atractivo generalmente tiene una característica que siempre he encontrado imposible de reproducir sin imágenes: bordes que se doblan hacia afuera en la parte inferior de cada pestaña. En este artículo me gustaría mostrar cómo se puede utilizar CSS :before y :after pseudo elementos para crear este efecto sin utilizar imágenes. Primero, comencemos con algunas marcas básicas.
El marcado
<ul class="tabrow">
<li>Lorem</li>
<li>Ipsum</li>
<li class="selected">Sit amet</li>
<li>Consectetur adipisicing</li>
</ul>Esto sería lo más básico posible. No hay muchos elementos con los que trabajar aquí, pero servirá.
Empezando
Para empezar, eliminemos el valor predeterminado <ul> y <li> estilizar y poner a estos bebés en línea.
- Lorem
- Ipsum
- Sentarse amet
- Consectetur adipisicing
.tabrow {
text-align: center;
list-style: none;
margin: 0;
padding: 0;
line-height: 24px;
}
.tabrow li {
margin: 0 10px;
padding: 0 10px;
border: 1px solid #AAA;
background: #ECECEC;
display: inline-block;
}Seleccionar una pestaña
Por supuesto, la pestaña seleccionada debe ser claramente visible.
- Lorem
- Ipsum
- Sentarse amet
- Consectetur adipisicing
.tabrow li.selected {
background: #FFF;
color: #000;
}Llegando al fondo de las cosas
Cada control de pestaña necesita un borde inferior bien definido. No servirá de mucho ahora, pero luego ayudará a enfatizar el efecto de que la pestaña seleccionada esté en la parte superior.
- Lorem
- Ipsum
- Sentarse amet
- Consectetur adipisicing
.tabrow {
position: relative;
}
.tabrow:after {
position: absolute;
content: "";
width: 100%;
bottom: 0;
left: 0;
border-bottom: 1px solid #AAA;
z-index: 1;
}Aquí presentamos nuestro primer :after pseudo-elemento. Básicamente, :after agrega otro niño a un elemento. No está en el DOM (por eso se llama un pseudo elemento), por lo que no es un niño real, pero es completamente modificable, siempre que agregue algo content, en este caso un carácter de espacio único.
En mi opinión, los términos :before y :after son un poco confusos ya que los pseudo no se agregan antes o después del elemento al que se aplican, sino que se insertan como elementos secundarios. Esta es también la razón por la que no puede postularse. :before y :after a elementos que no pueden contener elementos secundarios (elementos “sin contenido”), como <input>.
En este caso, usamos el pseudo elemento para crear un borde inferior que no influye en la posición de las pestañas. Podríamos haber puesto un borde inferior en el <ul> pero eso hubiera hecho que el siguiente paso fuera un poco más complicado.
Mucho más allá de
Ahora, una parte esencial de un control de pestañas de apariencia convincente es que la pestaña seleccionada se encuentra frente al borde mientras que el resto queda detrás del borde. Para hacer esto, cambiamos su borde inferior y hacemos algunos z-index magia.
- Lorem
- Ipsum
- Sentarse amet
- Consectetur adipisicing
.tabrow:before {
z-index: 1;
}
.tabrow li {
position: relative;
z-index: 0;
}
.tabrow li.selected {
z-index: 2;
border-bottom-color: #FFF;
}Alrededor de las curvas
Ahora es el momento de agregar el borde esquivo que se dobla hacia el exterior y usaremos :before y :after para esto. Tomemos esto paso a paso y primero coloquemos todo en su sitio.
- Lorem
- Ipsum
- Sentarse amet
- Consectetur adipisicing
.tabrow li:before,
.tabrow li:after {
position: absolute;
bottom: -1px;
width: 6px;
height: 6px;
content: " ";
}
.tabrow li:before {
left: -6px;
}
.tabrow li:after {
right: -6px;
}
.tabrow li:after, .tabrow li:before {
border: 1px solid #AAA;
}No seas tan cuadrado
Probablemente puedas ver a dónde va esto. Eliminemos los bordes que no queremos y agreguemos algunas esquinas redondeadas.
- Lorem
- Ipsum
- Sentarse amet
- Consectetur adipisicing
.tabrow li {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.tabrow li:before {
border-bottom-right-radius: 6px;
border-width: 0 1px 1px 0;
}
.tabrow li:after {
border-bottom-left-radius: 6px;
border-width: 0 0 1px 1px;
}Esquinas de corte
Hay algo que no está del todo correcto en este resultado. Veámoslo de cerca. Como puede ver, tanto la esquina recta original como la esquina redondeada son visibles. Necesitamos deshacernos de la esquina recta de alguna manera. Para hacer eso, lo cubriremos con una sombra. Para ilustrar lo que está sucediendo, hagamos que la sombra se destaque un poco.
- Lorem
- Ipsum
- Sentarse amet
- Consectetur adipisicing
.tabrow li:before {
box-shadow: 2px 2px 0 red;
}
.tabrow li:after {
box-shadow: -2px 2px 0 red;
}Casi llegamos
Como puede ver, las sombras rojas cubren por completo las esquinas cuadradas que nos gustaría ocultar. Si le damos a la sombra los colores correctos, la ilusión es completa.
- Lorem
- Ipsum
- Sentarse amet
- Consectetur adipisicing
.tabrow li:before {
box-shadow: 2px 2px 0 #ECECEC;
}
.tabrow li:after {
box-shadow: -2px 2px 0 #ECECEC;
}
.tabrow li.selected:before {
box-shadow: 2px 2px 0 #FFF;
}
.tabrow li.selected:after {
box-shadow: -2px 2px 0 #FFF;
}Piezas de estilo
Todo lo que queda por hacer ahora es agregar una pizca de degradados y sombras para darle un poco de sabor.
- Lorem
- Ipsum
- Sentarse amet
- Consectetur adipisicing
.tabrow li {
background: linear-gradient(to bottom, #ECECEC 50%, #D1D1D1 100%);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
text-shadow: 0 1px #FFF;
margin: 0 -5px;
padding: 0 20px;
}Si se está preguntando acerca de la compatibilidad del navegador, es exactamente lo que esperaría: todo menos IE. Es muy posible que funcione en IE10, pero no he tenido la oportunidad de probar con una versión preliminar. Dado que IE8 e IE9 son compatibles :before y :after pero no border-radius Tendrá que crear una hoja de estilo separada para ellos si desea brindarles a sus usuarios una experiencia visual agradable.
Ver demostración Descargar archivos
Nota del editor: Agregué enlaces de anclaje dentro de las pestañas en la demostración, ya que creo que es el caso más probable que la navegación con pestañas como esta los tenga. Lo más probable es que tuvieran un href atributo que enlazaría con el contenido con el que van por id, y ese comportamiento estaría controlado por JavaScript. El hecho de que este tutorial no necesite los enlaces de anclaje para los pseudo elementos adicionales es un testimonio más de que es mejor que mi original.
Actualizar: Allan Watkins me envió una variación de estos que apuntan hacia abajo:
Vea las pestañas de redondeo de lápiz que apuntan hacia abajo por Chris Coyier (@chriscoyier) en CodePen.