Modern HTML tabs with old school CSS tecnics

Un par de ejemplos en puro CSS de navegación por pestañas o tabs basadas en técnicas viejas conocidas como el uso de :target y ;checked para su funcionamiento y nuevas propiedades CSS como clip-path.

Modern HTML tabs with old school CSS tecnics

Por Kseso ✎ 0
Modern CSS tabs with old school tecnics

Hacía ya algún tiempo que no me sentía enredique y juguetón con CSS y dedicaba un rato a experimentar con alguna demo. Sólo por el placer de ver el resultado de ensayar con propiedades no muy trilladas de momento e ir cambiando sus valores.

Todo por el placer de ver qué resulta si hago esto o cambio lo otro. Nada de buscar un resultado final para que pueda ser aplicado en producción.

Pero si no hubiese lo primero (juego y experimentación) ¡qué aburrida sería la web desde hace mucho tiempo!

Así que para quitarme el mono opté por un tipo de demo que suele ser demandada con bastante frecuencia: la navegación por pestañas o tabs. De hecho los artículos del blog dedicados a ello son de los más visitados.

Bueno, que para ser sólo un juego la intro ya resulta larga y pesada. Así que aquí van:

Tabs modernas con técnicas CSS de la vieja escuela versión :target

See the Pen Modern tabs with old school tecnics 1 by Kseso (@Kseso) on CodePen.

Ver Demo a Full

Esta primera versión está basada en el uso de la pseudoclase :target con un viejo truco para que no haya saltos al seleccionar las pestañas.

Para cambiar el aspecto de la pestaña que aparece seleccionada por defecto al cargar el documento y hacer visible el contenido asociado a ella sólo tienes que hacer los cambios indicados con comentarios en el código CSS. Por ejemplo:

/* para mostrar de entrada otra que no sea la primera cambia #una en :not(#una) y 1 en :nth-child(1) por la deseada */ header a, :target:not(#una) ~ header :nth-child(1) { ... } /* para mostrar por defecto otra que no sea la primera cambia el selector .una por la deseada */ .una { ... }

Tabs modernas con técnicas CSS de la vieja escuela versión :checked

La segunda versión está construida en base a :checked. Son tantas las veces que lo he utilizado y demos construidas teniéndolo como protagonista que no creo sea necesario explicar nada al respecto.

See the Pen Modern tabs & old school tecnics 2 by Kseso (@Kseso) on CodePen.

Ver Demo a Full

En este caso para mostrar otra pestaña y su contenido asociado visible por defecto al cargar el documento sólo tienes que ir al HTML de la demo y cambiar el atributo checked='checked' del primer input id='una' al deseado.

Y lo de "modern tabs" ¿por qué?

¿O es sólo para captar clicks?

No, tranquilo. Si me conoces un poco sabes que no soy muy dado a usar esas técnicas. Lo de modern tabs va por algunas de las propiedades y/o valores con los que juego. Como por ejemplo:

  • Un poco de flexbox para dimensionar y distribuir las pestañas.
  • clip-path: polygon(); para ocultar y mostrar la info a demanda.
  • calc() y unidades relativas al viewport para el tamaño del texto.
  • Las aún no soportadas max-font-size y min-font-size complementando lo anterior.

Entre otras.

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

Comentarios: 0

EsCss RSS del Blog RSSS Comentarios ᛯ Licencia Beerware Humans.txt ᛯ Diseño por Kseso SiteMap