soy Kseso y esto EsCSS

Tabs o pestañas puro css para una landing page. Inputs y sus labels separados

Landing page en base a tabs o pestañas en puro Css (:checked) con los inputs y sus labels separados en el DOM

Tabs o pestañas puro css para una landing page. Inputs y sus labels separados

·Por Kseso ✎ 5

Tabs o pestañas para una landing page: inputs y sus labels separadosLa realización de tabs o navegación por pestañas basadas en inputs y su estado :checked es un recurso muy, muy veterano.

En este blog he dedicado más de dos artículos tanto a ellas (las pestañas) como a los diferentes métodos de lograr su funcionamiento, ya sea basado en :checked o :target.

Debido a que Css no posibilita la selección de un ancestro o predecesor en el DOM (de momento), estamos obligados a escribir los inputs en el html precediendo a las pestañas y su contenedor padre y estando a igual o menor profundidad en el árbol de elementos de esa caja padre para poder utilizar el selector de hermanos: input:checked ~ .padre .tabnº

Esto supone muchas veces tener que complicar el Css para lograr la apariencia deseada manteniendo la funcionalidad. Y en otras hacer verdaderos malabarismos que terminan por fallar en alguna circunstancia.

Sin embargo hay una forma de liberarnos de esta limitación de Css y emplazar las pestañas selectoras allá donde queramos, tanto en el html como en la presentación visual de una forma sencilla.

Antes de seguir con el artículo. Si necesitas información complementaria, estos posts te podrán ayudar.

El marcado Html de los inputs

El marcado típico de los inputs y sus labels es el siguiente:

<input type="radio" id="specs" value="1" name="tractor" checked='checked' /> <label for="specs">Specs</label>

Sin entrar en detalle en todos y cada uno de los atributos de cada uno de ellos, sólo nos fijaremos en uno de cada elemento: el 'id' del input y el 'for' de la etiqueta.

Su concordancia exacta, o lo que es lo mismo, que tengan exactamente el mismo valor en ambos atributos, es lo que crea el lazo de unión entre el input y su etiqueta. En el ejemplo el valor 'specs' para el 'id' de uno y el 'for' de la otra. Este valor no puede asignarse a ninguna otra pareja.

La costumbre es escribir el input y su label juntos en el html. Esto es, uno tras otro. Esa es la costumbre. Pero nada impide separlos. La funcionalidad de ambos y esa comunión existente entre ellos se mantiene con independencia de dónde se encuentre cada uno en el html.

Y por funcionalidad entiende el hecho de que el ':checked' seguirá funcionando tanto si haces el clic cobre el input como sobre el label. Y con ayuda del selector correcto en el Css la etiqueta y el input se podrán estilizar para cada estado del input sea el que sea que pinches.

<input type="radio" id="specs" value="1" name="tractor" checked='checked' /> <input type="radio" id="demos" value="2" name="tractor" /> <!-- otros inputs --> <!-- otro contenido y las tabs --> <footer> <label for="specs">Specs</label> <label for="demos">Demos</label> <!-- otros labels --> </footer>

Pese a haber buscado información y ejemplos de uso de esta "deconstrucción" no la he hallado. Sin embargo, funcionar funciona a las mil maravillas y lo que es más importante: el validador del consorcio no lo marca ni como error ni como advertencia tan siquiera.

Y para que lo verifiques y antes de continuar con los estilos, puedes ver la demo o bajarte el documento:

Ver demo en codepen Decargar html + css

Advertencia: Tanto en la demo de codepen como en el documento en dropbox no se incluyen prefijos privativos. Si usas esta demo quizás debas hacer uso de ellos o de algún "freeprefix".

El Css más significativo

En esta ocasión sólo mencionaré las reglas Css que influyen en el funcionamiento de las pestañas (tabs) al acturar sobre cada input o su label.

Por lo tanto, el cómo escondo a la vista cada uno de los apartados lo tienes en la demo. Es irrelevante. Cada una de las unidades o conjunto de elementos que se muestran o esconden está alojado en un 'section' con su clase correspondiente.

Quedan ocultos e inaccesibles con:

section { position: absolute; left: 0; top: 3rem; width: 100%; text-align: justify; padding: .5rem 1rem; transform: scale(0); transition: 1s linear; opacity: .3; }

Para mostrar uno u otro en función de qué input se seleccione:

#specs:checked ~ .specs, #demos:checked ~ .demos, #posts:checked ~ .posts, #credits:checked ~ .credits { transform: scale(1); animation: mostrar 1s linear; opacity: 1; } @keyframes mostrar { 0% {top: 105%; scale(1); opacity: .3;} 50% {opacity: .6;} }

Para aplicar estilos en las etiquetas de cada input cuando éste está como 'checked'. Utilizo el selector del atributo 'for', que en cada etiqueta es único, junto con el selector de hermano ~ del input:

#specs:checked ~ footer [for='specs'], #demos:checked ~ footer [for='demos'], #posts:checked ~ footer [for='posts'], #credits:checked ~ footer [for='credits'] { background: #fff; color: #444; text-shadow: 0 0 transparent; font-weight: 700; }

Y por último, el pendón que se posiciona sobre cada label al "checked" de su input:

footer:before { color: #fff; font-size: 5rem; position: absolute; top: -4.5rem; left: 10%; transition: .7s linear; } #specs:checked ~ footer:before {left:10%;} #demos:checked ~ footer:before {left:35%;} #posts:checked ~ footer:before {left:60%;} #credits:checked ~ footer:before {left:85%;}

Todo junto funcionando

Para terminar, una vez más los enlaces a la demo y la advertencia de que los códigos no están optimizados. Esto es, la prioridad del código es su carácter didáctico y divulgativo frente a la idoneidad, limpieza y eficiencia del css.

Ver demo en codepen Decargar html + css

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso