Filtro de ilustración de imagen | trucos CSS

Me gusta este tipo de efecto en el que una imagen casi parece una pintura al óleo o una ilustración hecha con un bolígrafo de tinta líquida espesa. Tuve la idea cuando scott vandehey comparte el tuyo efecto de filtro de medios tonos. en el blog de Cloud Four.

Yo diría que se parece mucho a la impresión de un periódico:

¿El truco? Tenemos una imagen llena de CSS filter efectos y un degradado radial repetitivo básico establecido en súper pequeño background-size para obtener un efecto de punto que se realza con mix-blend-mode.

El objetivo de la publicación de Scott es demostrar el poder de los modos de combinación CSS. Así que tomé los efectos de filtro que tenía en la imagen:

img {
  /* ... */
  filter:
    grayscale(1) 
    brightness(80%) 
    contrast(150%) 
    blur(2px);
  mix-blend-mode: $blend-mode;
}

… e hizo algunas correcciones, a saber:

• aumento de blur()poco (4px)
• toparse contrast() con una cantidad impía (3000%)
• usando screen modo de mezcla

Así es como funciona en CSS:

.painted {
  background: repeating-radial-gradient(
    circle at center,
    hsl(0 0% 15%),
    hsl(16.1 5% 55.5%);
  );
  background-size: 5px;
}

.painted img {
  filter: blur(4px) contrast(3000%) grayscale(1);
  mix-blend-mode: screen;
  width: 100%;
}

Es posible que deba ajustar este enorme contrast() valor dependiendo de la imagen – algo lo suficientemente grande como para lavar las cosas.