Modern HTML tabs with old school CSS tecnics 13.1.17
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
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.
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.
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-sizeymin-font-sizecomplementando lo anterior.
Entre otras.
Kseso
the obCSServer ᛯ 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 Kseso