Multicolumnas Css en pestañas: contenido autodistribuido entre tabs 30.3.16
Una sistema de pestañas, tabs o sliders puro Css con el contenido autodistribuido de forma automática entre los sliders sin necesidad de marcado html extra en base a las particularidades de las multicolumnas CSS.
Multicolumnas Css en pestañas: contenido autodistribuido entre tabs
O cómo realizar slaiders con multicolumnas Css
Todas las realizaciones de sliders o sistema de pestañas (tabs) que conozco se basan en la misma idea para alojar en contenido: en todas el contenido está compartimentado. Esto es, el contenido de cada diapositiva
está alojada en su propio contenedor, separada del resto.
Este detalle, en la mayoría de los casos, lejos de ser un inconveniente es una ventaja. Pero no siempre será así. Habrá ocasiones que desearías que el contenido a mostrar pudiese fluir líbremente entre cuadros sin tenerte que preocupar tú de distribuirlo de forma equitativa entre una pestaña y otra. Imagina, por ejemplo, que tienes que mostrar una larga relación de enlaces o un extracto de texto lo bastante amplio generado aleatoriamente. ¿Cómo se reparte?.
Lo más sencillo sería una caja contenedora con tamaño acotado y un largo scroll vertical. Pero no quieres scroll, lo tuyo son las pestañas y las quieres.
A la espera de que las regiones Css y el grid template layout puedan ser tenidas en cuenta sólo nos queda una opción Css para logar distribuir un contenido en bloques sin necesidad de marcado html: las multicolumnas Css
.
Combinando las multicolumnas con un sistema de tabs, pestañas o sliders podemos lograr que en contenido se autodistribuya entre los distintos cuadros sin tener que hacerlo nosotros.
Además al mezclar ambas evitamos una pequeña molestia que tienen las multicolumnas: hoy por hoy no es posible fijar una altura máxima y lograr que se creen bloques o regiones en las que se muestren para seccionarlas por pantalla o viewport:
Ahora tienes que desplazarte (scroll down) hasta el fondo para leer la primera columna y subir para seguir con la segunda. Y así sucesivamente. Esta propuesta de propiedad column-max-heightlo evitaría. Pero regresemos al tema que nos ocupa.
Antes de ir con las explicaciones, echa un vistazo al funcionamiento de las multicolumnas Css convertidas en pestañas o tabs:
See the Pen Multicolumns Css on slide by Kseso (@Kseso) on CodePen.
Preparando el terreno de juego
Todo se basa en una caja padre que alojará todo en contenido, tanto la información como el sistema para navegar entre ella. Obligatoriamente tendrá una anchura que nada impide sea "responsive", además de impedir su desborde con overflow: hidden.
No es necesario definir su altura: será función del número de pestañas y del contenido a mostrar.
section {
background: #fff;
width: 45vw;
max-width: 600px;
min-width: 400px;
margin: 3vh auto 0;
overflow: hidden;
border: 1px solid #aaa;
box-shadow: 0 0 2px rgba(0,0,0,.3);
}
Como hijo directo de esta caja tendremos al elemento que alojará todo el resto, en la demo un article
article {
background: #fff;
margin: 1rem 0 0;
/* Mágico Css */
width: 600%;
columns: 6;
column-gap: 0;
transition: .7s steps(6);
}
Las declaraciones relevantes del Css previo las tienes precedidas por el comentario:
- Width: 600%; La anchura será el 100% de su padre multiplicado por el número de slaides que deseemos tener.
- columns: 6; El numero de columnas, 6 en la demo, que como ves coincide con el valor anterior.
- column-gap: 0; La separación entre columnas. En mi caso opté por un valor de cero. El aire al texto en los laterales se lo asigno a los párrafos.
- transition: .7s steps(6); Animamos un poco el paso de un bloque a otro. Y en vez de hacerlo lineal lo realizamos a saltitos
steps(6)
Como es lógico, el número de columnas será función de la cantidad total de información que contendrán. Muchas para poco contenido dará lugar a poca altura del slider o en caso de incluir elementos indivisibles las últimas se quedarían vacías.
Dentro de este elemento será donde coloquemos todo el contenido y al usar las multicolumnas no será necesario añadir marcado extra para repartirlo en bloques estancos. La información se repartirá de forma dinámica y automática entre las distintas columnas. Y cada columna conformará un "slaider".
Las pestañas o Tabs de navegación
Para construir los 6 elementos para navegar entre columnas recurro a un viejo conocido: inputs
y su pseudoclase asociada :checked. No entraré en detalles, pues ya lo hemos visto en el blog en muchas otras demos previas. Así que sólo unos apuntes de los detalles particulares de esta demo.
Sólo muestro un máximo de tres label a la vez. Y la seleccionada siempre en medio. Así que la anchura de cada etiqueta tiene que ser como máximo 1/3 del section que aloja toda la demo.
Para no tener que andar calculando a mano y poder manejarlas en bloque las label están contenidas en un elemento nav:
nav {
position: absolute;
top: 0;
width: 200%; /* ~ nº de tabs * 33´33% */
font-family: sans-serif;
height: 10vh;
line-height: 10vh;/* altura y centrado vertical */
font-size: 1rem;
text-align: center;
transition: .5s steps(6);
}
En las label el detalle más significativo es su anchura, que, como en la demo son 6, será la total de su padre dividido por su número.
label {
width: calc(96% / 6);
display: inline-block;
color: #999;
cursor: pointer;
}
Si te fijas en el argumento de la función Css calc() no uso un valor de 100% (de la anchura del nav) sino menor. Es para compensar el espacio de separación entre elementos inline-block. Podría haber elegido cualquier otro método.
Antes de seguir, un detalle que seguro que te estás planteando. El nav está posicionado de forma absoluta y ni en el section ni en el article he dejado espacio en la parte superior para él.
En esta ocasión ese hueco lo hago con ayuda del pseudoelemento section::before
section::before {
content: '';
background: #448;
display: block;
width: 100%;
height: 10vh;
}
No solo se encarga de hacer hueco para el nav, también pone el color de fondo sobre el que se muestran las etiquetas que actúan como pestañas de selección.
Pero lo más importante no es eso. Si recuerdas, muestro la etiqueta seleccionada en el centro, eso significa que al seleccionar la primera queda un hueco a su izquierda y a la derecha de la última. Pues teniendo este pseudoelemento ahí puedo desplazar todo el nav sin complicarme en los cálculos.
Seleccionar y desplazar
Ya tenemos todo dispuesto. Sólo queda por construir las reglas para que el article se desplace y muestre la columna que corresponde y hacer lo mismo con las labels.
La navegación
#col-1:checked ~ nav {left: 33%}
#col-2:checked ~ nav {left: 0%}
#col-3:checked ~ nav {left: -33%}
#col-4:checked ~ nav {left: -66%}
#col-5:checked ~ nav {left: -99%}
#col-6:checked ~ nav {left: -133%}
Partimos de una posición inicial con el primer input marcado y el nav posicionado un 33% a la izquierda. El primer label aparece en el centro. Con los distos inputs marcados vamos desplazando el nav otro 33% a su izquierda.
De esta forma la última también queda en el centro con su hueco vacío a su derecha.
Las columnas van y vienen
Del desplazamiento de las columnas para dejar visible sólo la seleccionada se encargan las reglas siguientes:
#col-1:checked ~ article {left: 0%}
#col-2:checked ~ article {left: -100%}
#col-3:checked ~ article {left: -200%}
#col-4:checked ~ article {left: -300%}
#col-5:checked ~ article {left: -400%}
#col-6:checked ~ article {left: -500%}
El resto son detalles menores y sólo a efectos hornamentales para terminar de pulir la demo. Excepto quizás el detalle para ir a la primera o a la última columna.
Son sólo un par de labels para el primer y último imput añadidos antes de cerrar el section y posicionados de forma absoluta.
<label class='inicio' for='col-1'></label>
<label class='final' for='col-6'></label>
</section>
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
Hola! gracias por todos los artículos ,soy muy muy nueva en esto y gracias a ti estoy aprendiendo un montón.Hay algo que estoy intentando hacer pero me gustaría conocer como lo afrontarías vos: es una animación css de sprites,que debe ser "responsive"¿cómo me doy cuenta que porcentajes asignar a el frame?
ResponderEliminar(para que se mueva entre frames la distancia correcta por más que uno escale el div,y la imagen se escale también)
este tema de hoy me da una idea,pero me gustaría saber más.Gracias
Hola Kna
ResponderEliminarGracias. Me alegro que lo que hay en el blog te sea de ayuda de cuando en vez.
Las @keyframes (sus %) definen fracciones de tiempos sobre el indicado en la propiedad animation.
El aspecto responsive supongo que en tu caso sólo se refiere al tamaño del elemento donde se va a desarrollar la animación del archivo de imagen (sprite).
Así que para que el fondo se adapte al tamaño de su caja deberías hacer uso de la propiedad background-size con valores en % y en caso de que no sea un fondo sino una imagen vía src declararle tamaños también en %.
Todo ello teniendo en cuenta que no se degrade (pixele) al alcanzar cierto tamaño.
Un saludo
Éste hubiese sido un lindo tema para tratar en la comunidad de Sólo Demos. Si hubiese alguna demo, claro.
EliminarDisculpen que me meta, pero como durante un tiempo estuve haciendo "películas sprite" con JS —y más tarde en CSS— tal vez pueda colaborar un poco. (No mucho; a pesar de que la duda es por lo de "responsive" me parece que el asunto cabe más en un artículo como Sustituyendo Gif´s animados por Css y animación de sprites Css .)
Antes que nada : "frame" se llama a cada uno de los cuadros que se turnan en el 'div' para simular una animación continua. Y salvo raras excepciones, son todos del mismo tamaño. Una diferencia importante con los *.gif animados, quienes por ahorro de kb puden terminar siendo más chicos que su fondo, para luego darles la posición en su contexto.
El 'background-size' y el cálculo de porcentaje suele ser el método más efectivo, pero recordemos que solamente sirve para una imagen con los frames "en tira" (vertical, o quizá horizontal); si están "en grid", "en tabla", ya se complica.
Y por último ... un ajuste en '%' que sea compatible entre navegadores se vuelve una tragedia. Como cada uno usa sus propios cálculos, el cuadro no siempre queda muy exacto. Si es una imagen grande casi no se nota, pero en íconos animados puede haber saltos perceptibles.
Y bue, es lo que hay.
Excelente!voy a intentarlo!muchas gracias,de nuevo :P
EliminarPlas, plas, plas. Me ha gustado mucho esta idea. Voy a intentar meterla en algún sitio ;) Gracias
ResponderEliminar¡Qué bueno!
EliminarAdelante y, si te acuerdas, compártelo por aquí.