Aprendiendo y jugando con la propiedad CSS ‘mix-blend-mode’

Una de las cosas más molonas que he descubierto últimamente es la propiedad mix-blend-mode de CSS. Si vienes del mundo del diseño y has trasteado más de una vez con Photoshop, seguro que te sonarán sus posibles valores: color, color-burn, color-dodge, darken, difference, exclusion, hard-light, hue, lighten, luminosity, mutiply, normal, overlay, saturation, screen y soft-light.

Particularmente — y sé que con esto que voy a decir voy a quedar muy muy mal — nunca he entendido muy bien como trabajan estos filtros, sin embargo, si se saben usar, podemos crear efectos muy muy chulos.

¿Cómo lo hacemos?

En primer lugar, y en cuanto al html, necesitamos un contenedor y, por lo menos, un elemento en su interior.

<div class="contenedor">
  <div class="contenido">
  <!-- Nuestro contenido --->
  </div>
</div>

La magia, para variar, se hace en nuestro CSS… En definitiva, se trata de añadir a nuestro .contenedor un background-color que será la base de nuestro efecto. Por otro lado, en nuestro .contenido, añadiremos un filter:grayscale(100%) contrast(1) y un mix-blend-mode con el efecto que queramos aplicar. En este caso, hemos utilizado multiply, pero puede ser cualquiera de los valores que os comentaba anteriormente. El uso del filter es meramente estético… Todo queda más molón así.

.contenedor {
  background-color: darkmagenta; /*este es el color base*/
}
.contenido {
  filter: grayscale(100%) contrast(1);
  mix-blend-mode: multiply;
}

Y con esto y un bizcocho… conseguiremos efectos tan chulos como estos

[codepen_embed height=»500″ theme_id=»27312″ slug_hash=»wgWbyY» default_tab=»result» user=»conchaalviz»]See the Pen <a href=’http://codepen.io/conchaalviz/pen/wgWbyY/’>Playing with ‘mix-blend-mode'</a> by Concha Alviz (<a href=’http://codepen.io/conchaalviz’>@conchaalviz</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

 

En el ejemplo, he creado esta galeria creando loops en JavaScript y Less, aunque, la base, es la misma que os comentaba al principio del artículo. Espero que aprendáis tanto como yo.