La tienda Css: 100 referencias con sólo 1 imagen 9.11.15
Cómo realizar en puro css una galería con una sola imagen por producto y cien variaciones cromáticas del mismo.
La tienda Css: 100 referencias con sólo 1 imagen
La típica galería de productos. Tienes un objeto disponible en un sinfín de colores y debes mostrarle al visitante todas y cada una de las variaciones tonales.
Pues nada, sacas una foto de uno cualquiera, abres el editor de imágenes y a jugar con los ajustes para obtener un color y guardar cómo. Al final tienes ciento y mil imágenes. Y ahora viene lo mejor: construir una galería con ellas...
Tedioso, arduo y propicio a errores.
Eso o recurres a aplicaciones y lenguajes que no harán sino que añadir peso a la página y complicar el mantenimiento y modificación de la galería.
Todo ello se vuelve sencillo si sólo necesitas una imagen por cada producto y todos los cambios de color los realizas mediante puro Css. Una regla con una declaración es todo lo que se necesita.
Una imagen para todas las referencias
Y en esta ocasión no necesitarás explicaciones detalladas de los códigos porque ya lo he hecho en demos y artículos anteriores. Estas son las bases.
Demos de base
Esta galería está basada, o es una modificación de la que llamé El mentalista. O selección por doble referencia en puro css. La técnica es el uso de un doble :checked en 2 grupos de inputs.
Cambio de color en una misma imagen
Para la gestión del color y su modificación en caliente o en vivo en elementos como las imágenes (sin tener que recurrir a programas de edicción) Css ha desarrollado una serie de propiedades como son los filtros Css y los modos de fusión o blend modes.
No son nada nuevos para los visitantes del blog. Desde Mayo de 2012 venimos jugando con los filtros Css en el blog.
Así que sólo sera cuestión de jugar con ellos: los filtros Css para no necesitar más que sólo una imagen y cambiar su color con ellos y la pseudoclase :checked para seleccionar qué imagen mostrar.
La tienda Css de 1 imagen y 100 referencias
Y después de tanto rollo el resultado final en forma de demo. Sólo para navegadores Chrome. Si no puedes ver los efectos en vivo puedes hacerte una idea de su funcionamiento en este vídeo o este otro en G+
Nota de actualización: ¡nah! No hagas mucho caso de la advertencia anterior. Era válida en la fecha de creación de la demo (07/2014). Hoy los navegadores modernos ya lo soportan.
See the Pen Stock: 1 pic 100 references by Kseso (@Kseso) on CodePen.
Ver la demo a full -- Edgar Gutiérrez: demo
Edgar Gutiérrez: Reconocimiento de autoría
Todo lo anterior, la concepción de la demo y la idea de cómo hacerla posible era simple. Pero lo que no fui capaz de hacer fue obtener un resultado estético de los colores satisfactorio y publicable. Ahí estaba olvidada en un "cajón criando polvo y telarañas.
El mérito de este artículo y su demo es de un veterano participante de este blog: Edgar Gutiérrez y su dominio de los valores de los filtros para modificar el color a una imagen de esta demo suya.
Basándome en sus valores para los filtros y la idea de usar una imagen "azul", después que él, pude obtener un resultado satisfactorio a mi idea olvidada e incompleta.
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
La verdad esta buenisimo, ahora el concepto de que lenguajes de programacion añaden peso a la pagina me parece que degrada un poco un tema para hacer parecer mas heroico el otro. El Css es una brillante aportación pero lineas de codigo bien diseñadas, compactas y documentadas no añaden mas peso, sino ( combinado claro esta con css ) un mundo de funcionalidades nuevas, admas ud. conocen que rutinas genericas pueden funcionar de manera externa ( como css) del grupo principal del codigo y que en algunos casos ( no siempre ) un par de lineas de codigo evitan kilos de Css, porque ? simple un lenguaje añade cierta inteligencia ( para decirlo de alguna manera ) y Css añade directivas. Yo desde que veo las cosas que Ud. hacen con Css soy un convencido mas que Css siempre es conveniente frente al codigo, pero a veces hay que tener la mente abierta a toda la caja de herramientas con que contamos para construir en la web. No quiero herir los sentimientos de nadie (y si lo hice me disculpo) solo es una reflexion de un desarrollador de aplicaciones en la web, no sobre el ejemplo que me parece una genialidad, sino sobre el concepto sobre el que lo presentan.
ResponderEliminarHola Carlos
EliminarPierde cuidado. No molestas ni hieres nada con tu reflexión.
Además me encantan las discrepancias y puntos de vista distintos.
Sólo una pequeña matización a mis palabras del artículo (a las opiniones de los lectores no suelo hacer réplicas por respecto).
.-Al referirme a aumentar peso era por la necesidad de tener un número mayor a 1 de imágenes por producto y todo lo necesario para manejarlas (incluidas peticiones, consultas, tráfico/transferencia...).
.-Con el término "complicar" en la intro quería expresar la idea de "complejo", compuesto de múltiples partes o componentes y no la de enmarañado o liado.
Un saludo