The Css Mentalist. The remake stylized. O pestañas Css por doble selección 9.10.15
El Mentalista Css. El remake basados en estilos. O de cómo Css puede adivinar tus pensamientos y deseos.
Sistema de pestañas o tabs puro Css por doble selección.
The Css Mentalist. The remake stylized. O pestañas Css por doble selección
Que Css es capaz de hacer magia en tus páginas webs ya está más que demostrado. También en este blog.
Pero que Css, él solito, sin ayuda de nadie, pueda leer tus pensamientos y adivinar en qué estás pensando quizás te suene a imposible.
Llégate hasta la demo, sólo tienes que hablarle a los estilos de la forma que ellos entienden. Indícale, seleccionando una opción del eje X y otra del Y. Qué eres y qué edad tienes.
Quizás prefieras seleccionar tu pasado. No importa. Css te dirá qué soñabas con ser. Y si elijes pensando en el futuro adivinará como serás el día de mañana.
En esta ocasión primero te dejo jugar con "El Mentalista Css" y después, si te pica la curiosidad por conocer sus secretos ya te los desvelo. Y no olvides llegar hasta el final del artículo: hay otra demo.
El Mentalista Css
See the Pen The Css Mentalist by Kseso (@Kseso) on CodePen.
Los secretos de El Mentalista Css
Todo se reduce a una selección doble. Y la manera de lograrlo en el ejemplo es poniendo dos condiciones. Esto es, mostrar información que varía en función de qué pareja de opciones se marquen.
Para ello volvemos a nuestros viejos conocidos los 'inputs', sus estados marcado o desmarcado y los combinadores de selectores. En este caso de hermanos.
El marcado Html
Lo primero es crear tantos 'inputs' como opciones: 7. Distribuidos en dos grupos con el mismo valor del atributo 'name' para cada grupo.
<input type="radio" id="baby" name="old" />
<input type="radio" id="junior" name="old" />
<input type="radio" id="senior" name="old" />
<input type="radio" id="robot" name="what" />
<input type="radio" id="ninja" name="what" />
<input type="radio" id="wizard" name="what" />
<input type="radio" id="dreamer" name="what" />
A continuación y como ya te sonará de otras demos, llevamos los 'lanels' o etiquetas de estos 'imputs' allí donde queramos mostrarlas. En este caso, cada grupo de etiquetas están contenidas en su 'nav' correspondiente para poderlas colocar a voluntad dentro del 'section'.
<section>
<nav class='old'>
<label for="baby">Baby</label><!--
--><label for="junior">Junior</label><!--
--><label for="senior">Senior</label>
</nav>
<nav class='what'>
<label for="robot">Robot</label>
<label for="ninja">Ninja</label>
<label for="wizard">Wizard</label>
<label for="dreamer">Dreamer</label>
</nav>
</section>
El resto de html de la demo es prescindible y no interviene en la adivinación.
La magia del Css
Ahora llega el momento de obrar la magia del Css y revelarte sus secretos.
Lo primero es esconder los 'imputs' con su display: none Posicionar cada 'nav' y declarar los estilos a las etiquetas para que luzcan en reposo y al ':hover'. No tiene mayor secreto.
Dejamos fijo el label
Para que la etiqueta se quede remarcada al ser seleccionado su 'input' correspondiente utilizamos el selector de hermano (referente al 'input') y el selector por atributo de la etiqueta:
#baby:checked ~ section [for='baby'],
#junior:checked ~ section [for='junior'],
#senior:checked ~ section [for='senior'],
#robot:checked ~ section [for='robot'],
#ninja:checked ~ section [for='ninja'],
#wizard:checked ~ section [for='wizard'],
#dreamer:checked ~ section [for='dreamer'] {
background: rgb(156,245,166);
color: #444;
font-weight: 700;
}
A continuación preparamos el campo para que nuestro Mentalista Css nos revele nuestros pensamientos. No es otro que el pseudoelemento del 'section'.
section:before {
content: '';
background-size: cover;
position: absolute;
left: 5rem;
top: 3rem;
right: 0;
bottom: 0;
transition: 1s .5s;
opacity: 0;
}
Y ahora sí es el momento de construir los selectores para la doble condición. Como son 12 las posibilidades (4 x 3) necesitamos otros tantos selectores:
#baby:checked ~ #robot:checked ~ section:before {background-image: url(baby-robot.jpg);opacity: 1;}
#baby:checked ~ #ninja:checked ~ section:before {background-image: url(baby-ninja.jpg);opacity: 1;}
#baby:checked ~ #wizard:checked ~ section:before {background-image: url(baby-wizard.jpg);opacity: 1;}
#baby:checked ~ #dreamer:checked ~ section:before {background-image: url(baby-dreamer.jpg);opacity: 1;}
#junior:checked ~ #robot:checked ~ section:before {background-image: url(junior-robot.jpg);opacity: 1;}
#junior:checked ~ #ninja:checked ~ section:before {background-image: url(junior-ninja.jpg);opacity: 1;}
#junior:checked ~ #wizard:checked ~ section:before {background-image: url(junior-wizard.jpg);opacity: 1;}
#junior:checked ~ #dreamer:checked ~ section:before {background-image: url(junior-dreamer.jpg);opacity: 1;}
#senior:checked ~ #robot:checked ~ section:before {background-image: url(senior-robot.jpg);opacity: 1;}
#senior:checked ~ #ninja:checked ~ section:before {background-image: url(senior-ninja.jpg);opacity: 1;}
#senior:checked ~ #wizard:checked ~ section:before {background-image: url(senior-wizard.jpg);opacity: 1;}
#senior:checked ~ #dreamer:checked ~ section:before {background-image: url(senior-dreamer-.jpg);opacity: 1;}
Fíjate que encadenamos varios combinadores en cada selector. 1 de hermano (~) para seleccionar cada pareja de 'input' en su estado de marcado (:checked) seguido de otro combinador más de hermano para seleccionar qué imagen de fondo mostramos en el 'section' (~ section:before)
Y si fuese necesario podríamos seguir alargando cada selector añadiendo otros combinadores, selectores simples. pseudoclases...
Nota: los selectores no están optimizados. Prima la parte "divulgativa" a la práctica.
Como curiosidad, si en vez de querer cambiar sólo el fondo de 'section' quisiéramos mostrar otro tipo de información, por ejemplo un 'article' diferente para cada doble selección, sólo sería necesario añadirlos al html y o bien añadir una clase diferente a cada uno o utilizar una speudoclase de número de elemento:
#baby:checked ~ #robot:checked ~ section article:nth-child(1) {/*estilos*/}
#baby:checked ~ #ninja:checked ~ section article:nth-child(2) {/*estilos*/}
Bueno, mejor explicarlo con otra demo donde los contenidos son múltiples y dispares elementos.
See the Pen Double checked. Pure Css by Kseso (@Kseso) on CodePen.
Nota: los selectores no están optimizados. Prima la parte "divulgativa" a la práctica.
Ruego final
Y después de tanta palabrería sólo nos resta que nos digas en un comentario si contigo también acertó nuestro Mentalista Css.
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
Práctico para la salida de tablas con descuentos combinados, o tiempos de viaje entre ciudades, o ...
ResponderEliminarLas posibilidades son muchas, pero lo más valioso es el uso "diferente" para el encadenado.
Felicitaciones.
Me dejo impresionado. Estoy muy interesado en aprender todos este asunto de maquetación con html5 y css. En la red encuentro gran cantidad de información, pero no se cuál escoger. Tendrían alguna sugerencia de un buen lugar que me sirviera para aprender, además de está página. Les quedaré agradecido.
ResponderEliminar