Múltiples labels por cada input y un input para controlarlas a todas. Slide demo

¿Quién dijo que cada input sólo puede asociarse a un label? Slider puro Css con next/prev y recuperar basado en activar el :checked con múltiples labels para cada input

Múltiples labels por cada input y un input para controlarlas a todas. Slide demo

Por Kseso ✎ 8

Hace unas fechas compartía con todos una pequeña realización basada en el hecho de que no es necesario que el input y sus label sean adyacentes para que mantengan su funcionalidad inherente.

En concreto es el artículo "Tabs o pestañas puro css para una landing page. Inputs y sus labels separados".

En esta ocasión vamos a ir un paso más allá y romper otra de las presunciones o creencias no cuestionadas: que cada input sólo puede tener asociada un label. Craso error. En ninguna parte he encontrado que se restrinja el número de ellas por cada input. Además, si así lo haces y pasas el html por el validador verás que pasa la prueba del algodón sin problemas.

Por lo tanto, nada impide romper las dos presunciones, que sólo haya una por cada uno y que estén adyacentes, para crear una galería, slider o pestañas que hasta ahora era terreno exclusivo de js o que de hacerlo con puro Css obligaba a crear un montón de enlaces internos o anclas diferentes para ir de cada cuadro al siguiente o al anterior. Resumiendo gráficamente, lo que ves en la imagen anterior.

Aspecto final de la demo que puedes ver al final del post

La construcción y funcionamiento

Como ves en esa imagen, el cuadro seleccionado tiene un "objeto" para ir al anterior o al siguiente. Y en los restantes los cambiamos para mostrar un pulsador que lo traerá al frente.

Estos "objetos" para avanzar de un slider a otro (previo/siguiente) normalmente se le añade el destino con js o si es una realización en puro Css se crean con enlaces internos (anclas) y la pseudoclase :target.

En esta demo vamos a lograr lo mismo basándonos en la pseudoclase :checked aplicada a inputs. Y para cada input creamos varias labels con su correspondiente for='id' en cada uno de los fotogramas.

<section class='galeria'> <input type="radio" id="uno" value="1" name="tractor" checked='checked' /> <input type="radio" id="dole" value="2" name="tractor" /> <input type="radio" id="tele" value="3" name="tractor" /> <article class='card una'> <!-- Contenidos varios --> <label for='dole' class='entypo-left-bold otra'></label> <label for='tele' class='entypo-right-bold otra'></label> <label for='uno' class='entypo-arrows-ccw afin'></label> </article> <!-- Otros articles --> </section>

Se necesitan tantos inputs como cuadros vayamos a necesitar. Y en cada uno de los articles colocar tres labels. Uno del propio input que lo activa y otros dos que se corresponden con el que controla al article anterior y al siguiente.

Vuelvo a recordarte que cada input se marca o desmarca (checked / unchecked) haciendo click en el propio input o en cualquiera de sus labels. Con independencia de dónde se encuentren situado cada cual en el DOM.

El Css para controlarlos a todos

Para el correcto funcionamiento de la demo lo único que se necesita es construir los selectores apropiados. Y sí, reconozco que éstos, los selectores, son numerosos incluso para tres articles como en la demo si quieres lograr un acabado y funcionamiento aceptable.

Lo primero es ocultar los inputs y estilizar las labels según dónde se encuentren. Tenemos simultáneamente un cuadro activo y dos inactivos. En el activo un label a la izquierda y otro a la derecha para traer al frente uno u otro de los inactivos. Y en cada inactivo otro label para activarlo diréctamente. Además hay cierto efecto de las etiquetas al hacer :hover en el article que las contiene y otro más al :hover sobre ella misma.

Todo lo anterior en código Css:

La apariencia de las labels

input {visibility: hidden;} /* estilos generales de los labels */ label { background: #15BFCC; position: absolute; top: 0; bottom: 0; margin: auto 0; color: #fff; font-size: 4vw; line-height: 15vh; text-align: right; height: 15vh; width: 4vw; padding: 0 .5vw; cursor: pointer; opacity: .2; box-shadow: 0 0 1px 1px rgba(255,255,255,.5) inset; transition: .5s; } /* los labels colocados a la derecha */ .otra + .otra, #uno:checked ~ .tres .afin, #dole:checked ~ .una .afin, #tele:checked ~ .dos .afin { right: 0; text-align: left; } /* los labels prev y next del cuadro activo */ #uno:checked ~ .una .otra, #dole:checked ~ .dos .otra, #tele:checked ~ .tres .otra { background: #0D757D; display: block; } /* escondo las next y prev en los cuadros inactivos y la label para activar el propio article cuando ya lo está */ #uno:checked ~ .una .afin, #dole:checked ~ .dos .afin, #tele:checked ~ .tres .afin, :not(:checked) ~ .otra {display: none;} /* resalta los label al hacer :hover sobre el article que las contien */ .card:hover label { animation: pulso 1s infinite alternate; } /* resalta el label al hacer :hover sobre él */ .card:hover label:hover { animation: none; opacity: .8; width: 10vw; }

Al código anterior, y precediéndole en el Css de la demo, están los estilos necesarios para lograr la apariencia de los 'articles' y su contenido. Entre otros, su relación de aspecto 16:9, tamaños declarados en unidades relativas al viewport, tipografías, fondos y colores.

El funcionamiento del slider

Lograda la apariencia sólo resta añadir la funcionalidad. Esto es, que se muestre un article u otro según qué input pase a ':checked' y colocar a un lado u otro los dos inactivos.

/* El input marcado y el article asociado a él */ #uno:checked ~ .una, #dole:checked ~ .dos, #tele:checked ~ .tres { animation: 2s central; animation-fill-mode: forwards; transform-origin: center center; z-index:3; } /* El input marcado y un de los articles no asociado a él */ #uno:checked ~ .dos, #dole:checked ~ .tres, #tele:checked ~ .una { animation: 1s fuera-izq; animation-fill-mode: forwards; transform-origin: center left; z-index: 2; } /* El input marcado y el otro de los articles no asociado a él */ #uno:checked ~ .tres, #dole:checked ~ .una, #tele:checked ~ .dos { animation: 1.5s fuera-dch; animation-fill-mode: forwards; transform-origin: center right; z-index: 2; }

Como ves, cada input al ser marcado fuerza una acción distinta sobre cada article que conforma el slider en base a las animaciones definidas que transcribo tras la explicación.

En primer lugar asocio, la primera regla Css de la anteriores, cada input (y por lo tanto sus labels) con un article, para que al 'checked' lo traiga al frente posicionándolo sobre (eje z) los otros dos. Y a la vez lleva a los otros dos articles uno a su derecha y otro a su izquierda.

Este baile de cada article es diferente si el input marcado es '#uno', '#dole' o '#tele'. Por eso el trío de selectores en cada una de las reglas anteriores.

El funcionamiento animado

Tras todo el trabajo anterior sólo resta animar las transiciones para cada selección. Esto, como es lógico, lo encomendamos a las @keyframes correspondientes a las 'animation' que hemos ido declarando.

/* el article seleccionado */ @keyframes central { 0% {transform: scale(.8);z-index: 1;} 80% {transform: scale(.5);z-index: 3;} 100% {transform: scale(1);z-index: 3;} } /* el article no seleccionado a la izquierda */ @keyframes fuera-izq { 0% {transform: scale(1) translatex(0%);} 70% {transform: scale(.9) translatex(-100%);} 100% {transform: scale(.9) translatex(-7%);} } /* el article no seleccionado a la derecha */ @keyframes fuera-dch { 0% {transform: scale(1) translatex(0%);} 70% {transform: scale(.9) translatex(100%);} 100% {transform: scale(.9) translatex(7%);} } /* los pulsos de los labels al :hover de su article */ @keyframes pulso { 50% {opacity: .7;} }

¡Hey! ¿Y la demo?

No. No me he olvidado de que lo que realmente quieres es ver la demo en funcionamiento. Que la mayoría de visitantes ni necesita ni quiere todo el rollo anterior sobre los códigos. Así que aquí tienes los enlaces para que disfrutes del poder del Css.

See the Pen Three Labels for each Input by Kseso (@Kseso) on CodePen.

Ver demo a fullDescargar códigos

Si optas por usar los códigos recuerda que quizás necesites añadir prefijos privativos a ciertas propiedades. Ya sea diréctamente o mediante alguna herramienta como prefixfree. El archivo descargado de la demo ya lo incluye.

Artículo publicado originalmente en Noviembre de 2013.

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: 8

  1. Excelente articulo Muchísimas Gracias. Una pregunta... como se llaman ésos puntitos blanco pequeñitos que se ponen encima de la imagen?.

    ResponderEliminar
    Respuestas
    1. Gracias Raylin
      Sobre la imagen principal de cada cuadro hay superpuesto un png de 2x2 para el efecto del rayado (múltiples imágenes en background-image).
      Ese efecto es producto de gestión que hace el navegador de ese png al redimensionar y mover cada cuadro y con él lo que contiene.

      Un saludo

      Eliminar
  2. Buenas nuevas y felices fiestas, por cierto andaba yo pensando en como hacer una landing y se me ha venido a la cabeza hacerlo con css y bueno yo siempre exclamando maravillado por tu ingenio pero nunca lo he probado yo mismo, pero hice esto:

    http://codepen.io/g3kdigital/pen/pcILj

    El problema es que no me siento cómodo con la lógica, me explico:

    En chrome me funciona de mil maravillas, no he probado con otros exploradores, pero si revisas el código, use fue un input checkbox y no un round, y le deje en checked, pero si reviso el css la lógica me dicta que no debería de funcionar, pero lo pruebo de otro modo y se hace "sufle".

    ¿Como lo ves?

    Gracias de antemano y que disfrutes las uvas.

    ResponderEliminar
    Respuestas
    1. Tras un vistazo muy rápido y superficial al pen veo que hace lo que le dices cuando tiene que hacerlo.
      Al cargar el html el input lo hace como "checked" y por la regla css el article no se muestra y al anular el checked pasa a visible.

      El funcionamiento debería ser el correcto... en aquellos navegadores y sus versiones que soportan el selector :checked.

      Si con "sufle" te refieres a que se pueda mostrar durante una fracción de tiempo dependerá del tiempo de carga de la página y su css.

      Un saludo

      Eliminar
  3. Saludos, estoy utilizando los inputs y labels para proyectos y muchas gracias.... fue a ti y tus tutoriales donde vi esa opción. El asunto es que en cierto punto del proyecto debe pasar por revisión y te digo textualmente el comentario del proyecto por parte del que lo revisa: "The code structure is also not good (using labels and forms for non-form purposes is a bad idea) Entonces me gustaría saber tu opinión respecto a esto y si hay alguna documentación oficial en donde los inputs o elementos de un form se puedan utilizar fuera de un form. Encontré algo más o menos https://www.w3schools.com/tags/att_input_form.asp en fin te agradecería tener ese detalle a mano para enfrentar comentarios asi. Hice el test de un pedazo de código con los inputs y labels y corrió limpio asi que sé que funciona y por parte del consorcio todo bien.

    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Josue

      Con más tiempo espero poder contestarte más ámpliamente.
      Por ahora te voy a dejar una imagen y enlace a la especificación_
      -Párrafo final del punto 17.2.1 Control types de HTML W3C Recommendation

      La imagen:
      [img]https://4.bp.blogspot.com/-Vl7SEFqacn0/WPUZCKiQqlI/AAAAAAAANgU/w2URDhYXQ6ktgIfE7p2vZyCsOtPDTmkAgCLcB/s900/in-form.png[/img]

      Espero te sirva como base.

      Un saludo

      Eliminar
    2. Super!!! Genial!!! Gracias nuevamente

      Eliminar
    3. En mi anterior respuesta sólo me centré en el aspecto "legalista" del uso de controles de formularios (donde la especificación engloba los inputs tipo radio y/o checkbox).

      Sin embargo hay otro aspecto que debe sopesarse al optar por un método (puro CSS) u otro (basada en js o alguna de sus librerías).

      Y un detalle a tener presente es el coste y rendimiento.
      Ya hace algún tiempo en el blog publiqué algo al respecto. Te enlazo los posts por si fuesen de ayuda, Josue:

      - Comparativa galería imágenes deslizantes: jQuery frente a Css (2012)
      - Animaciones ¿Css3 o jQuery? (2012)

      Sobre esto hay mucha "literatura" en la red.

      Un saludo

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap