Como Supermán no necesita dormir, aprovechó toda la noche para coser los botones de sus camisas. Esa costumbre de abrírselas a tirones a la menor señal de alarma estaba acabando con su fondo de armario.

Las noches tan tranquilas cómo ésta, sin crisis mundiales, ni ataques de monstruos ni invasiones extraterrestres le ponían de los nervios. Nada como tener que concentrarte en un gran problema ajeno para evitar enfrentarte a los propios. Después de que sus padres le hicieran huir de Kriptón para salvar su vida, Supermán jamás había dejado de huir de sí mismo.

Pese a que hubo un tiempo en que lo creyó, nunca pudo ser un verdadero modelo para la gente. ¿Quién podía aspirar siquiera a parecérsele? La admiración del pueblo, los vítores y aplausos no hicieron más que subrayar su diferencia. Se sentía, con razón, un inadaptado incapaz de integrarse realmente en la sociedad.

Su personalidad de Clark Kent era solo un engaño, una impostura más en su mundo de falsedades. El gran defensor de la verdad y la justicia había basado toda su vida en una mentira, y las noches como esa servían para recordárselo.

Absorto como estaba en la costura y sus pensamientos, apenas prestaba atención al telepredicador que gritaba desde la pantalla de un televisor que solo usaba para producir algo de ruido que le ayudara a acallar su mente. ¿Quién podía sospechar que el gran héroe pasaba sus noches de descanso cosiendo y viendo la tele?

Así comienza la historia del hijo de Kriptón que jamás te contarán.

Del guionista Salvador Script, creador de las aclamadas “Spiderman se pierde en las redes sociales” y “Donald Trump makes Captain America great again” y el dibujante Paco Pencil, autor de las magníficas “Venga Dora, hazte Vengadora” y “Batman usa al Joker para hacer un trío“, nos llega una obra única y desconcertante.

El crossover definitivo… una lucha sin cuartel que nos muestra que los seres más poderosos pueden ser también los más atormentados. Un comic que jamás encontrarás en ningún lugar, así que para que se te haga más leve te regalamos la portada, que podrás bajar como PDF vectorial solo pulsando el botoncito “Descargar”.

¡Eso si que es poder!

Si quieres ser creativo aparca el ordenador, olvídate del móvil y coge papel y lápiz. No hay mayor enemigo de la creatividad que el ruido continuo al que nos someten las nuevas tecnologías. He visto cometer miles de veces el error de sustituir la introspección necesaria para el proceso creativo por consultas a internet.

• Deja a un lado el camino fácil, solo te llevará a lugares comunes.
• Relaja la mente, desocúpala, abúrrete, piensa, medita, pasea por nuevos lugares e intenta mirar las cosas con otros ojos.
• Apúntalo todo, toma notas, haz bocetos y no rechaces nada de antemano por absurdo que parezca.
• Huye de lo aceptado, sé inconformista, cambia las cosas de sitio, combina ideas y déjalas reposar.

No es que siguiendo estos pasos te conviertas en alguien creativo así sin más, de hecho, ya todos lo somos de una u otra manera, pero seguro que aplicar estos consejos te ayudará a mejorar tu creatividad.

El dibujo que ilustra esta entrada lo realicé originariamente a lápiz en una estancia en los bosques de Suecia, junto con un verso, y tiene mucho que ver con lo comentado anteriormente. Puedes bajarte una versión vectorial para imprimirla, hacerte una camiseta, colocarla en tu web o donde te plazca, usando el botón “descargar” bajo la imagen.

Mientras el mundo camina
para mí se para todo…
a veces pienso a mi modo
y capturo ese periodo
en que cesa el ruido intenso…
de ese modo, a veces pienso…
y como un sol en ascenso
surge una idea clandestina
que en suspenso me ilumina.

Hace no mucho escribí una entrada sobre cómo el contexto influye en nuestra percepción. Lo que hay alrededor de cualquier elemento condiciona la imagen que nos creamos. Pero es evidente que no es lo único que afecta. Lo que vemos también se ve influido, y mucho, por nuestras expectativas y nuestras experiencias.

Sin entrar en demasiada profundidad sobre la naturaleza de la realidad, nuestro cerebro está programado para intentar explicarla y lo hace buscando en sus registros aquellos patrones que encajan con lo que percibe, igual que cuando leemos una palabra reconocemos su significado solo si lo conocíamos de antemano.

El perro que se hizo humano

Eso me recuerda una vez que iba andando por la ciudad cerca de un seto y percibí algo que se movía entre los arbustos. Inmediatamente pensé que se trataba de un perro. Hasta aquí todo bien, solo que poco después vi de reojo que se trataba de una persona que se incorporaba entre los matojos. Sin esta segunda información, por muy difusa que fuera, habría continuado mi marcha plenamente convencido de haber visto un perro, pero gracias a ella seguí caminando preguntándome por las razones por la que ese hombre estaba agazapado tras los matorrales.

Podría ser que estuviera satisfaciendo una necesidad fisiológica, o que se levantara de una borrachera que lo dejó durmiendo la mona en el primer sitio que encontró. Quién sabe, realmente todo ocurrió de forma poco nítida en un abrir y cerrar de ojos, pero fue suficiente para que la percepción de lo ocurrido pasara por varias interpretaciones.

Seguí la marcha pensando que si en ese momento volvía la vista atrás me arriesgaba a que la realidad volviera a cambiar. Lo que inicialmente era un perro se convirtió en un hombre satisfaciendo alguna necesidad, así que podía ocurrir que se transformara de nuevo en cualquier otra cosa, ya fuera un extraterrestre que se despojaba de su disfraz humano o un espectro que atormentaba a los paseantes.

Todo era posible, pero a pesar de las infinitas opciones que se abrieron ante mi mente, decidí conformarme con la imagen del hombre, de la misma manera en que un niño tranquiliza sus dudas con cualquier explicación.

Guapito de cara

Es curioso, porque hasta que no he escrito este recuerdo no he descubierto su conexión con la imagen que encabeza esta página. Una de las alumnas de un curso que impartí se dirigía a mí a veces con la expresión “guapito de cara”, la mayoría de las veces cargándola de ironía, así que decidí usarla para ilustrar la subjetividad de la percepción.

Quise que la ilustración tuviera trazos muy simples, por lo que empleé un rotulador grueso y un papel muy pequeño para asegurar una forma esquemática que evitara detalles innecesarios. La idea consistía en realizar un dibujo que fuera interpretado de distinta manera dependiendo del receptor.

El resultado fue el dibujo que puedes apreciar en la anterior imagen de la camiseta. Cualquier niño pequeño (y algún adulto) veía en él un perrito. E incluso aunque algún individuo no lo viera claramente al principio, era sencillo hacérselo ver. Y pese a que a algunos les pareciera que el dibujo podía tener elementos con una proporción extraña, aceptaban como válida tal interpretación.

Otros muchos, siempre adultos, veían en el dibujo el cuerpo de un hombre desnudo con los brazos a la espalda y un pene descomunal. Evidentemente esta explicación nunca procedía de un niño, ya que éstos carecían de ese patrón en su mente para poder identificarlo como tal.

La presencia en el texto de la palabra “cara” también ayudaba a condicionar la construcción mental de un rostro. Aunque “guapito” combinaba “gua” y “pito”, nombres infantiles de un perro y un pene, era una pista oculta prácticamente imposible de detectar. El sexo era un buen tema para estudiar la influencia de la experiencia en la percepción ya que es algo que se procura mantener apartado de la mente de los niños.

Una cerdada

O eso es lo que pensaron algunos al ver la siguiente prueba. En esta ocasión hice uso de un personaje ampliamente reconocido entre los niños pequeños. Al hacerlo me aseguraba de que ya tenían creada una interpretación de la imagen y que la tendencia de la mente a acomodarse en lo conocido les impediría ver más allá.

Cambié el término inglés “pig” por la traducción “guarra”, que en español puede tener matices algo más insultantes, así que sustituí la G por una W para dificultar la lectura entre los menores, ya que es una letra con poco uso práctico en español.

Me inspiré en una imagen en la que Peppa Pig estaba junto a su hermano George. En mi versión recorté la cara del hermano para mostrar solo su hocico y eliminé uno de sus orificios nasales. Aunque la modificación era muy sutil, fue más que suficiente para que lo que quedaba de George pudiera interpretarse como un pene en aquellas personas que ya tienen el patrón en sus mentes “sucias”.

La imagen resultante ofrecía una alta carga sexual, pero ésta era absolutamente invisible a los ojos de un niño pequeño y es que, como decía en el título, no podemos reconocer algo si no hay un patrón en nuestra mente que nos permita identificarlo.

A veces, trabajar con archivos en el ordenador puede ser una tarea exasperante. Por eso, hemos preparado una breve guía gráfica que te ayudará a saber cómo realizar las tareas fundamentales. Esperamos que te sea de utilidad y la disfrutes.

Y para que puedas consultarlo siempre que quieras, o hacer con ello lo que desees, aquí te dejamos un botoncito con el que puedes descargar un PDF vectorial con todos los gráficos.

Hace unos días publiqué una entrada en la que explicaba cómo hacer uso de la propiedad CSS mix-blend-mode para conseguir colorear parte de una imagen. Pero como suele ocurrir frecuentemente, los navegadores de Microsoft se han quedado atrás en la adopción de esa propiedad a pesar de ser una recomendación oficial, así que la solución planteada no funcionaba correctamente en ellos. En esta ocasión ampliaremos lo explicado anteriormente para ofrecer una solución que cubre todos los navegadores recientes.

Como ya teníamos una solución válida para la mayoría de los navegadores, lo primero que haremos es detectar si el navegador soporta los efectos de fusión de capas por CSS, para ofrecerle una solución alternativa en caso contrario. Y como siempre que queremos detectar si el navegador soporta o no determinada propiedad, lo mejor es echar mano de Modernizr.

Para construir nuestro script de detección de propiedades, seleccionamos “CSS Background Blend Mode” y pulsamos el botón “Build”. Eso es todo, no necesitamos detectar nada más. En nuestro caso lo hemos renombrado como modernizr-backgroundblend.js

<script type="text/javascript" src="js/modernizr-backgroundblend.js"></script>

<script type="text/javascript">

if (Modernizr.backgroundblendmode) {
  	// mix-blend-mode supported
} else {
  	// mix-blend-mode not-supported (use canvas)
}
</script>

La página

La idea es seguir conservando la versión anterior en aquellos navegadores en los que funciona, y ofrecer una alternativa a través de canvas para los demás. Es cierto que la opción basada en canvas funcionaría correctamente en todos los navegadores recientes, pero mantendremos también la versión anterior por razones de rendimiento.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" >

	<title>Change Image Color</title>

	<link rel="stylesheet" href="styles/styles.css">
	<link rel="stylesheet" href="styles/jquery.simplecolorpicker.css">

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.simplecolorpicker.js"></script>
    <script type="text/javascript" src="js/modernizr-backgroundblend.js"></script>

</head>

<body>

<div id="tshirt_container">
	<img src="images/white-t-shirt.jpg" class="tshirt_layer" id="tshirt_layer_1">
	<img src="images/guy.png" class="tshirt_layer" id="tshirt_layer_2">	
</div>

<select name="colorpicker-shortlist" id="colorpicker">
  <option value="#7bd148"">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc">Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c">Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
  <option value="#cabdbf">#cabdbf</option>
</select>

<script type="text/javascript">
$(window).load(function() {//we need to be sure that the images have loaded 

	if (Modernizr.backgroundblendmode) {// mix-blend-mode supported

    	$('select[name="colorpicker-shortlist"]').simplecolorpicker('selectColor', '#7bd148');
   	 	$('#tshirt_layer_2').css('background-color', $('select[name="colorpicker-shortlist"]').val());
		$('select[name="colorpicker-shortlist"]').on('change', function() {
    		$('#tshirt_layer_2').css('background-color', $('select[name="colorpicker-shortlist"]').val());
  		});	

	} else {// mix-blend-mode not-supported (use canvas)

        function hexToRgb(hex) {       
            var color_array = new Object();
            hex = hex.replace(/[^0-9A-F]/gi, '');
    		var bigint = parseInt(hex, 16);
    		color_array[0] = (bigint >> 16) & 255;
    		color_array[1] = (bigint >> 8) & 255;
    		color_array[2] = bigint & 255;
    		return color_array;
		}

        $('select[name="colorpicker-shortlist"]').simplecolorpicker('selectColor', '#7bd148');

        $('select[name="colorpicker-shortlist"]').on('change', function() {

    		multiplyColor = hexToRgb($('select[name="colorpicker-shortlist"]').val());

    		redraw();

  		});

  		function redraw(){

  			imageBottom = document.getElementById('tshirt_layer_1');
  			$('#tshirt_container canvas').remove(); 
			canvas = document.createElement('canvas');
			canvas.width = imageBottom.width;
			canvas.height = imageBottom.height;
			imageBottom.parentNode.insertBefore(canvas, imageBottom);

			ctx = canvas.getContext('2d');
			ctx.drawImage(imageBottom, 0, 0);

			// Get the CanvasPixelArray from the given coordinates.
			imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
			pix = imgData.data;

			//multiplyColor = [80, 120, 10];
			multiplyColor = hexToRgb($('select[name="colorpicker-shortlist"]').val());

	    	// Loop over each pixel and change the color.
			for (var i = 0, n = pix.length; i < n; i += 4) {
    			pix[i  ] = multiply(multiplyColor[0], pix[i  ]); // red
    			pix[i+1] = multiply(multiplyColor[1], pix[i+1]); // green
    			pix[i+2] = multiply(multiplyColor[2], pix[i+2]); // blue
    			// pix[i+3] is alpha channel (ignored)
			}
			// Draw the result on the canvas
			ctx.putImageData(imgData, 0, 0);

			function multiply(topValue, bottomValue){
  				return topValue * bottomValue / 255;
			}

		}

		redraw();

	}

})
</script>
</body>
</html>

Si lo comparas con la solución planteada en la entrada anterior verás que la parte

if (Modernizr.backgroundblendmode) {// mix-blend-mode supported

    	$('select[name="colorpicker-shortlist"]').simplecolorpicker('selectColor', '#7bd148');
   	 	$('#tshirt_layer_2').css('background-color', $('select[name="colorpicker-shortlist"]').val());
		$('select[name="colorpicker-shortlist"]').on('change', function() {
    		$('#tshirt_layer_2').css('background-color', $('select[name="colorpicker-shortlist"]').val());
  		});	

}

es esencialmente idéntica y que todo lo nuevo ha sido añadido si no se cumple la condición (else).
También verás que hemos cambiado $(document).ready(function() { por $(window).load(function() {
Esto es así porque necesitamos asegurarnos de que las imágenes han sido cargadas para poder hacer operaciones con ellas.

La programación para crear un efecto multiply aplicando un color a una imagen se basa directamente en lo explicado en esta página añadiéndole algunas variaciones. En primer lugar lo hemos “empaquetado” en una función (redraw), y le hemos añadido una nueva función (hexToRgb) para convertir los valores devueltos por el selector de colores al formato de array [r,g,b] que necesita.

Como necesitamos poder aplicar la función múltiples veces, dentro de la misma usamos la expresión jQuery $('#tshirt_container canvas').remove(); para eliminar el elemento canvas antes de volverlo a recrear.

else {// mix-blend-mode not-supported (use canvas)

        function hexToRgb(hex) {       
            var color_array = new Object();
            hex = hex.replace(/[^0-9A-F]/gi, '');
    		var bigint = parseInt(hex, 16);
    		color_array[0] = (bigint >> 16) & 255;
    		color_array[1] = (bigint >> 8) & 255;
    		color_array[2] = bigint & 255;
    		return color_array;
		}

        $('select[name="colorpicker-shortlist"]').simplecolorpicker('selectColor', '#7bd148');

        $('select[name="colorpicker-shortlist"]').on('change', function() {

    		multiplyColor = hexToRgb($('select[name="colorpicker-shortlist"]').val());

    		redraw();

  		});

  		function redraw(){

  			imageBottom = document.getElementById('tshirt_layer_1');
  			$('#tshirt_container canvas').remove(); 
			canvas = document.createElement('canvas');
			canvas.width = imageBottom.width;
			canvas.height = imageBottom.height;
			imageBottom.parentNode.insertBefore(canvas, imageBottom);

			ctx = canvas.getContext('2d');
			ctx.drawImage(imageBottom, 0, 0);

			// Get the CanvasPixelArray from the given coordinates.
			imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
			pix = imgData.data;

			//multiplyColor = [80, 120, 10];
			multiplyColor = hexToRgb($('select[name="colorpicker-shortlist"]').val());

	    	// Loop over each pixel and change the color.
			for (var i = 0, n = pix.length; i < n; i += 4) {
    			pix[i  ] = multiply(multiplyColor[0], pix[i  ]); // red
    			pix[i+1] = multiply(multiplyColor[1], pix[i+1]); // green
    			pix[i+2] = multiply(multiplyColor[2], pix[i+2]); // blue
    			// pix[i+3] is alpha channel (ignored)
			}
			// Draw the result on the canvas
			ctx.putImageData(imgData, 0, 0);

			function multiply(topValue, bottomValue){
  				return topValue * bottomValue / 255;
			}

		}

		redraw();

	}

El CSS

Modernizr también introduce las clases  .backgroundblendmode y .no-backgroundblendmode para poder realizar selecciones en nuestro CSS basados en la detección de esta propiedad. Nuestro CSS queda prácticamente idéntico al del ejemplo anterior, pero aprovechamos para añadir la propiedad CSS mix-blen-mode: multiply solo en el caso de estar soportada.

.simplecolorpicker{
 max-width: 300px;
}
.simplecolorpicker span.color[data-selected]:after {
  content: '\2714'; /* Ok/check mark */
  width: 12px;
  display: block;
  padding-left: 4px
}

/*t-shirt*/
#tshirt_container{
 position: relative;
 width: 300px;
 height: 450px;
}

#tshirt_container .tshirt_layer, #tshirt_container canvas{
 position: absolute;
 display: table;
  width: 300px;
 height: 450px;
}

#tshirt_layer_1{
 z-index: 1;
}

#tshirt_layer_2{
	z-index: 3;
}
.backgroundblendmode #tshirt_layer_2 { 
	-o-mix-blend-mode: multiply;
	-ms-mix-blend-mode: multiply;
	-moz-mix-blend-mode: multiply;
	mix-blend-mode: multiply;
	-webkit-mix-blend-mode: multiply;
}

.no-backgroundblendmode  #tshirt_layer_2  { 
/*styles if background blend mode is not supported*/ 
}

#tshirt_container canvas{
 	z-index: 2;
}

El resultado

Aquí tienes el resultado de todo el código anterior. Puedes usar el botón “Descargar” al final de la página para bajarte una copia con todos los scripts, estilos y archivos necesarios.

GreenBold blueBlueTurquoiseLight greenBold greenYellowOrangeRedBold redPurpleGray#cabdbf

Si has usado Photoshop o algún otro programa de tratamiento de imágenes, puede que hayas empleado los modos de fusión de capas para conseguir colorear determinadas zonas de una imagen. Con el uso de una máscara para seleccionar la forma y una capa de color en modo “multiply” podemos colorear el área que deseemos. Ahora, con algunas de las nuevas propiedades de CSS3 podemos replicar este mismo efecto de forma dinámica en una página web.

En la imagen superior puedes ver un ejemplo del uso de las capas que permitiría conseguir este resultado. Solo cambiando el color de la capa en modo “multiply” vemos cambiar el color de la camiseta, colocada en una capa inferior.

Al igual que Photoshop, los principales navegadores soportan la fusión de capas en modo “multiply”. La única excepción importante la constituyen los navegadores de Microsoft, aunque los desarrolladores de la compañía ya han indicado que lo tienen bajo estudio y posiblemente lo implementarán para principios de 2018. En este estado de cosas ya no es descabellado plantearse hacer uso de ese modo de mezcla, ya que tiene un soporte mayoritario.

En esta ocasión vamos a centrarnos en cómo conseguir este efecto en los navegadores que soportan la propiedad CSS mix-blend-mode, que como ya he dicho son la mayoría, y más adelante ofreceremos una solución alternativa para otros navegadores.

Ponle la camiseta

<div id="tshirt_container">
	<img src="images/white-t-shirt.jpg" class="tshirt_layer" id="tshirt_layer_1">
	<img src="images/guy.png" class="tshirt_layer" id="tshirt_layer_2">	
</div>

Lo primero que hemos hecho es colocar la imagen del chico con la camiseta como un png con el hueco de la camiseta transparente, y debajo la camiseta sin color.

Usamos las posiciones y la propiedad z-index para colocar una sobre otra, y a la imagen del chico le añadimos la propiedad mix-blend-mode con el valor multiply.

#tshirt_container{
 position: relative;
 width: 300px;
 height: 450px;
}

#tshirt_container .tshirt_layer{
 position: absolute;
 display: table;
  width: 300px;
 height: 450px;
}

#tshirt_layer_1{
 z-index: 1;
}

#tshirt_layer_2{
	z-index: 2;
	-o-mix-blend-mode: multiply;
	-ms-mix-blend-mode: multiply;
	-moz-mix-blend-mode: multiply;
	mix-blend-mode: multiply;
	-webkit-mix-blend-mode: multiply;
}

Dale color

Llegados a este punto, ya podemos comprobar que con solo añadirle un color de fondo (background-color) a la imagen superior (#tshirt_layer_2), podemos colorear la camiseta.

#tshirt_layer_2{
	background-color: #7bd148;
}

También podemos usar un script que nos permita asignar dinámicamente el color de fondo a partir de una selección por parte del usuario. Existen multitud de selectores de color basados en jQuery o directamente en JavaScript que realizan esta tarea y puedes elegir el que mejor se adapte al uso que le vayas a dar.

Yo particularmente he pensado en su aplicación en una tienda, en la que un producto puede tener un número limitado de variaciones de color. Para ello he usado jQuery Simple Color Picker.

Deja que seleccionen

No hay problema si has decidido usar cualquier otro selector de color, ya que todo lo que hay que conseguir es permitir al usuario escoger un color y asignar la propiedad background-color de la imagen principal según el valor escogido.

Si vas a usar jQuery Simple Color Picker nos queda poco para tener nuestro selector funcionando. En su propia página de GitHub se muestra cómo hacerlo. Empezaremos por añadir un “select” con las opciones que necesitemos.

<select name="colorpicker-shortlist" id="colorpicker">
  <option value="#7bd148"">Green</option>
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc">Blue</option>
  <option value="#46d6db">Turquoise</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#51b749">Bold green</option>
  <option value="#fbd75b">Yellow</option>
  <option value="#ffb878">Orange</option>
  <option value="#ff887c">Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#dbadff">Purple</option>
  <option value="#e1e1e1">Gray</option>
  <option value="#cabdbf">#cabdbf</option>
</select>

Solo nos quedaría cargar el script (ten presente que es dependiente de jQuery) e indicarle qué hacer

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>

<script type="text/javascript" src="js/jquery.simplecolorpicker.js"></script>

<link rel="stylesheet" href="jquery.simplecolorpicker.css">

<script type="text/javascript">
$(document).ready(function() {

    // asigna valor por defecto
    $('select[name="colorpicker-shortlist"]').simplecolorpicker('selectColor', '#7bd148');
    $('#tshirt_layer_2').css('background-color', $('select[name="colorpicker-shortlist"]').val());

    //cambia el color según la selección
    $('select[name="colorpicker-shortlist"]').on('change', function() {
    	$('#tshirt_layer_2').css('background-color', $('select[name="colorpicker-shortlist"]').val());
    });

})
</script>

Puedes encontrar una explicación más detallada en la propia página del plugin. No nos vamos a extender más en él ya que para nuestro propósito podríamos haber usado cualquier otro.

El resultado

Veamos el resultado obtenido al ponerlo todo junto en una aplicación práctica de uso genérico.

GreenBold blueBlueTurquoiseLight greenBold greenYellowOrangeRedBold redPurpleGray#cabdbf

La economía del método es clarísima. Hemos usado dos imágenes en lugar de trece. El dibujo de la camiseta, en este caso, forma parte de la misma imagen png del chico, pero no sería difícil usar una imagen independiente que también cargara dinámicamente en función de la selección del usuario.

¿Qué nos queda?

Bien, como ya sugerí en el párrafo anterior, basándose en estas técnicas se podrían implementar todas las variaciones de una tienda de camisetas usando como base muy pocas imágenes y colocando encima el dibujo seleccionado.

En los casos en los que hay muchas variaciones de color la ventaja es más que evidente. En el ejemplo de abajo vemos que solo dos imágenes sustituyen a 24 variaciones.

#ac725e#d06b64#f83a22#fa573c#ff7537#ffad46#42d692#16a765#7bd148#b3dc6c#fbe983#fad165#92e1c0#9fe1e7#9fc6e7#4986e7#9a9cff#b99aff#c2c2c2#cabdbf#cca6ac#f691b2#cd74e6#a47ae2

Sin embargo, como dije con anterioridad, Explorer y Edge no producen el efecto deseado por su falta de soporte a la propiedad mix-blend-mode. Ambos cambiarán el color de fondo de la imagen según seleccionemos, pero se comportará de forma opaca y no se fusionará con la imagen inferior. Aunque se ha anunciado un futuro soporte por parte de Edge, en la actualidad esta es la situación.

Por ahora vamos a dejarlo aquí. Más adelante explicaremos la manera de conseguir el mismo efecto en esos navegadores. Para los que no puedan esperar puedo anticiparles que la solución cosiste en realizar un filtro multiply a través de una función aplicada sobre un elemento canvas.

Mientras encuentro tiempo para elaborar esa exlicación, con el siguiente botón puedes descargar todos los archivos necesarios para poner en práctica lo que te he contado en esta página. Espero que te sea de utilidad.

Actualización: Si estás interesado en una nueva versión que funciona en todos los navegadores, visita nuestra nueva entrada: “Colorear parte de una imagen con Canvas“

Las últimas reencarnaciones de los estándares HTML y CSS trajeron considerables mejoras. HTML5, entre otras aportaciones, incorporó nuevas marcas ( canvas, video, svg…) y elementos semánticos (nav, article, section…). Por su lado, CSS3 tampoco se quedó corto y llegó con nuevos selectores y propiedades. Juntos, supusieron un importante avance en las posibilidades de la web.

Pero aunque la versión definitiva de las especificaciones de HTML5 se publicó a finales de 2014, y las especificaciones de CSS3 son bastante anteriores, hay que entender que ambos estándares no son adoptados de manera absoluta por los navegadores. La W3C, el organismo hay detrás de las especificaciones de ambos estándares, sugiere y recomienda, pero en última instancia son los creadores de navegadores los que validan esas recomendaciones incorporándolas en sus programas. Seguramente, llegarán HTML6 y CSS4 sin que haya habido una implantación completa de sus predecesores. Es por ello, que a veces, cuando queremos hacer uso de alguna nueva prestación, vemos que ésta no ha sido adoptada completamente por todos los navegadores.

De todas formas…

Para nuestro propósito usaremos la especificación CSS Shapes del W3C. Lamentablemente, por ahora no funciona en todos los navegadores (no te preocupes, que hay solución). En caniuse.com podemos consultar cúales soportan esta especificación y comprobaremos que hay algunos importantes que por ahora se han quedado fuera.

Siempre que nos encontremos con situaciones parecidas, es necesario determinar las prestaciones del navegador para servirle una opción que se adapte a sus posibilidades. Y para ello no conozco mejor alternativa que modernizr, que nos ofrece métodos rápidos y eficaces para detectar las prestaciones del navegador.

Moderniza tu página

Una de las ventajas de modernizr es que puedes construir una versión solo con las prestaciones que te interesa detectar, lo que lo hace especialmente ligero. En nuestro caso solo vamos a detectar si el navegador soporta CSS Shapes, con idea de usarlas en caso afirmativo u ofrecer una alternativa si no es así.

Para ello nos dirigimos a modernizr.com/download?setclasses, nos aseguramos de que está seleccionado CSS Shapes y le damos al botón “Build” para descargar el script que nos permitirá detectar si el navegador dispone de esta prestación.

Una vez bajado podemos renombrarlo como modernizr-shapes.js e insertarlo en nuestra página.

Usado en nuestra página nos permite detectar con facilidad si nuesto navegador soporta ‘shapes‘

    if (Modernizr.shapes) { 
       // soportado 
    } else { 
       // no soportado 
    }

Lo que hemos hecho hasta ahora solo nos sirve para diferenciar si un navegador soporta o no CSS shapes. Veamos ahora qué hacer en cada caso.

Si nuestro navegador está en forma

Si el navegador soporta las formas CSS hay varias maneras de definir una que sirva para que el texto se ciña a su contorno. En nuestro caso, vamos a usar la propiedad CSS shape-outside apuntando a un gráfico svg que define la silueta.

Empecemos por ver los elementos HTML y a continuación el CSS

 Aliquam sodales ante id nunc pulvinar, sit amet dignissim lectus vehicula. Maecenas vel placerat lacus. Nulla rhoncus augue dignissim dapibus iaculis.

.textwrap-container{
 text-align: justify; 
}
.chuckie-shape {
 float: left;
 width: 272px;
 padding-right: 10px;
 -webkit-shape-outside: url('chuckie.svg');
 -moz-shape-outside: url('chuckie.svg');
 -ms-shape-outside: url('chuckie.svg');
 -o-shape-outside: url('chuckie.svg');
 shape-outside: url('chuckie.svg');
}

La propiedad shape-outside contiene la url del archivo svg que ves a continuación.

SVG (Scalable Vector Graphics) es un formato vectorial que, como puedes comprobar en caniuse, es soportado por todos los navegadores. Puedes crearlo con software propietario (Illustrator, Corel Draw…), software gratuito (InkScape…) e incluso online. Con el HTML y el CSS anteriores ya podemos lograr que el texto se ciña al espacio reservado en los navegadores que entienden la propiedad (Safari, Chrome y algún otro).

Pero… ¿Por qué hemos puesto la propiedad shape-outside con tantos prefijos, incluyendo los que pertenecen a navegadores no soportados?
La respuesta es simple: nos anticipamos al día en que el resto de los navegadores se incorporen. Y si no lo hacen, tampoco hay que preocuparse, les ofreceremos una alternativa.

Para encontrarla hemos probado dos soluciones posibles: CSS Shapes Polyfill y jQSlickWrap. En mi experiencia, el primero, aunque tiene la ventaja de no depender de jQuery, presenta serios problemas de rendimiento y ya no es mantenido de forma activa. jQSlickWrap, si bien depende de jQuery, se ha comportado perfectamente en mis pruebas además de ser más flexible, así que basaremos en él nuestra solución.

¿Y qué pasa con el resto?

Para Explorer, Firefox y el resto de navegadores que a la hora de escribir esto aún no soporta la propiedad shapes, empezaremos por bajar jQSlickWrap y jQuery para usarlos en nuestra página.

Después, basta con invocar slickwrap con la siguiente sintaxis

    $(document).ready(function(){
       $('.chuckie-shape').slickWrap({resolution:26});
    });

Para un mejor rendimiento, es aconsejable que asignemos a resolution el valor del interlineado del texto en pixels. Si lo deseas, puedes consultar la página de jQSlickWrap para mayor información sobre su uso y ajustes.

Recuerda que ya habíamos solucionado este tema para algunos navegadores, y que esta nueva solución va dirigida al resto. Veamos ahora cómo ponerlo todo junto para cubrir todas las posibilidades.

El código final

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper dolor in justo lobortis, eu facilisis massa pharetra. Integer vehicula porttitor nulla nec consectetur. Proin tempus varius erat vitae varius. Vivamus sit amet eros suscipit, dignissim orci a, tincidunt lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec mollis commodo libero sit amet suscipit. Vivamus accumsan turpis et mauris viverra, nec congue dolor feugiat. Morbi feugiat dignissim odio, venenatis euismod lectus malesuada maximus. Sed tempor ligula vitae vestibulum tincidunt. Nullam at eleifend urna. Ut interdum luctus malesuada. Curabitur vitae mauris vitae dui tincidunt pellentesque sed ac lacus. Praesent quis orci tellus. Proin auctor sem at elit condimentum, eu lacinia neque cursus. Vivamus dignissim tincidunt dictum. Maecenas tincidunt venenatis risus ac molestie. Donec id posuere mi. Pellentesque at metus in nisl sollicitudin semper id at quam. In laoreet ex eu neque aliquam pharetra. Nulla facilisi.

 


 

El archivo styles.css nos queda, añadiéndole algún otro detallito, como sigue

.wrapper{
display:block;
width: 500px;
}
.textwrap-container{
text-align: justify; 
-webkit-hyphens: auto; 
-moz-hyphens: auto; 
hyphens: auto;
}
.chuckie-shape {
float: left;
width: 272px;
padding-right: 10px;
-webkit-shape-outside: url('chuckie.svg');
-moz-shape-outside: url('chuckie.svg');
-ms-shape-outside: url('chuckie.svg');
-o-shape-outside: url('chuckie.svg');
shape-outside: url('chuckie.svg');
}

El resultado

Con todo lo visto anteriormente obtenemos como resultado algo parecido al texto que ves a continuación y que puede servirte de guía para adaptarlo a tus propias necesidades modificando las imágenes y los estilos. Y añadiendo imaginación nos permitirá efectos más complejos.

Se acercó sigilosamente, no pude verlo venir. Sin darme cuenta, se ciñó a mi silueta. Aliquam sodales ante id nunc pulvinar, sit amet dignissim lectus vehicula. Maecenas vel placerat lacus. Nulla rhoncus augue dignissim dapibus iaculis. Quisque nulla nulla, fringilla fringilla aliquam et, tincidunt ut ante. Sed volutpat vulputate venenatis. Maecenas convallis, lacus faucibus posuere iaculis, quam sem tincidunt nunc, eu porta elit erat eu ante. Praesent a volutpat ex. Pellentesque imperdiet feugiat nisl cursus dignissim. Nam eget lorem nec leo porta aliquet at eget dui. Cras convallis, mauris ac posuere porta, magna ligula scelerisque diam, et auctor neque enim eget purus. Praesent massa felis, pulvinar eu mi nec, ultricies mollis arcu. Integer molestie nisl tortor, vitae consequat sem sollicitudin eget. Aliquam massa purus, placerat sed vulputate non, placerat nec risus. Ut et purus semper, molestie magna id, faucibus turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Puedes descarga todo el código completo con los scripts, el archivo CSS y las imágenes del ejemplo pulsando el siguiente botón

Últimamente habrás encontrado más de un sitio (como nuestra página principal) que usa vídeos como fondos.

Usando la marca <video> de HTML5 y su atributo autoplay, es posible hacer que empiecen de forma automática sin necesidad de acción por parte del usuario. Con el CSS adecuado puede colocarse como fondo y ajustarse al ancho de la pantalla.

Hasta aquí todo bien. Sin embargo, habrás visto que esas páginas suelen sustituir ese vídeo por una imagen fija en sus versiones para móvil. Esto se debe principalmente a que Apple y Google, entendiendo que el pobrecito usuario de móvil podría disponer de un consumo de datos más limitado que el de ordenadores, han desactivado la posibilidad de que los vídeos comiencen automáticamente para evitarles sorpresas y gastos innecesarios. Y en el caso de iOS, además, el vídeo ni siquiera se reproduce dentro de la página.

No es que quiera contradecir los filantrópicos principios que han motivado a ambas compañías a tomar tal decisión, pero ya sabéis que hay gente que no soporta bien los límites impuestos. Buscando una solución, encontré el código de Stanko en GitHub (no, no vende tabaco), que permite reproducir vídeos inline en móviles sobre un elemento <canvas>. Quede claro que todo el mérito es suyo y que yo solo me he limitado a modificar su código para mis propósitos.

Que empiece ya, que el público se va

Ok, vayamos al grano. Como suelen decir, en la vida todo tiene solución. Así que empecemos por el principio y veamos el código estándar para insertar un vídeo con HTML5.

Ya que vamos a usarla como fondo, añadiremos a la marca <video> los atributos autoplay, para que empiece automáticamente, loop para que reproduzca en bucle, y muted para eliminar el sonido. He puesto el vídeo en los tres formatos estándares para aumentar el número de navegadores alcanzados, si bien, hoy en día la práctica totalidad respondería perfectamente solo con un archivo mp4 como puedes ver en caniuse.com. Por ese motivo, una vez mostrado el ejemplo genérico, a partir de aquí usaré solamente el archivo mp4.
Añadimos también el atributo poster para mostrar una imagen estática mientras el vídeo carga y un poquito de CSS para hacer que el vídeo se adapte al elemento que lo contiene.

video{
  width: 100%;
}

Como resultado del código anterior obtenemos el siguiente vídeo.

Si estás visitando esta página con un ordenador, verás que el vídeo se reproduce automáticamente en bucle. Pero si estás usando un móvil la cosa cambia. En otra ocasión nos ocuparemos de Android. Ahora, como dice el título, veamos qué pasa en iOS y cómo resolverlo.

iOS: ni inline, ni autoplay

Pues si, una pena. Si nos estás viendo desde un iPhone o un iPad, en lugar de un vídeo en movimiento verás una imagen estática con una marca encima esperando a que la pulses para ponerse en marcha. Y si pulsas sobre ella la cosa empeora. El vídeo no se reproduce en la página, sino que se abre a toda pantalla. Recuerda que nuestro propósito inicial era usarlo como fondo, así que este comportamiento, por mucha carita de niña buena que ponga el vídeo, no nos vale.
Afortunadamente, tal como indiqué antes, nuestro amigo Stanko ha creado el estupendo script HTML canvas video player que nos permite reproducir un video de forma inline en un iAparato, y con pequeñas modificaciones conseguiremos que funcione para nuestro propósito.
Su funcionamiento es sencillo, aunque requiere alguna marca más que un vídeo HTML5 estándar. Para empezar colocamos el vídeo, un elemento canvas y un par de div anidados que servirán de barra de tiempo, y lo metemos a su vez en otro div para tenerlo localizado.

Después cargamos el archivo JavaScript

E insertamos las instrucciones para que funcione

Si lo único que querías era poder reproducir vídeos inline en iPhones y iPads puedes bajártelo y obtener más información sobre sus opciones y métodos aquí.
Pero si lo que quieres es usarlo para poner un vídeo de fondo, necesitará unas pequeñas modificaciones y seguir leyendo un poquito más.

Un poquito más a fondo

Como indicaba, nuestro propósito es poder usar el vídeo como fondo, así que hay pequeños detalles que conviene modificar para ajustar el script a nuestras necesidades.
Para empezar, una prestación del script original es hacer que se pare o reanude la reproducción cada vez que se hace click sobre el vídeo. Un comportamiento que no nos viene bien para usar el vídeo como fondo. El script original tampoco permite hacer loops, y es posible que queramos que nuestro fondo sea un bucle perpetuo.
Para añadir estas dos prestaciones he añadido dos nuevas opciones: makeLoop y pauseOnClick

En esta nueva versión modificada, makeLoop es un valor booleano que permite indicar si queremos que el vídeo se ejecute en bucle. A pauseOnClick puede asignársele el valor false para evitar pausar el vídeo cuando se detecta un click.
Hay que aclarar que, al igual que en la versión inicial, para que el autoplay funcione es necesario desactivar el audio. Eso no debería preocuparnos, ya que lo queremos como imagen de fondo.
Por último, recordemos que no hay problemas con ordenadores de escritorio, así que mejor ponemos un condicional que haga que éstos sigan usando el vídeo HTML5 y los iCacharros su versión corriendo sobre canvas. Así, nos quedaría lo siguiente

¿El fin?

Bueno, tanto como el fin no. La versión mostrada es mejorable y, por ahora, no plantea qué haremos con Android, algo que dejaremos para otra ocasión. Poniéndolo todo junto, la página nos queda como sigue

	
	
	

	

	



		

			

			
			
			
Look at me
		

	


	

Pulsa aquí para ver en otra ventana el resultado de lo anterior (si tienes uno, puedes mirarlo en tu iPhone), con el CSS correspondiente y el script de Stanko modificado.
También puedes bajártelo todo juntito, con un vídeo de prueba y el script original pulsando aquí