Bild-Illustrationsfilter

Ich mag diese Art von Effekt, bei dem ein Bild fast so aussieht, als wäre es ein Ölgemälde oder eine Illustration, die mit einem dicken, verlaufenden Tinten-Füllfederhalter erstellt wurde. Auf die Idee kam ich, als Scott Vandehey seinen „Halbtonfilter“-Effekt auf dem Cloud Four Blog teilte.

Ich würde sagen, es sieht sehr nach Zeitungdruck aus

Der Trick? Wir haben ein Bild voller CSS filter-Effekte und einen darunter liegenden wiederholenden radialen Verlauf, der auf eine super kleine background-size eingestellt ist, um einen punktähnlichen Effekt zu erzielen, der durch mix-blend-mode verstärkt wird.

Die ganze Idee von Scotts Beitrag ist es, die Leistung von CSS Blend Modes zu demonstrieren. Also habe ich die Filtereffekte genommen, die er auf dem Bild hatte

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

...und ein paar Anpassungen vorgenommen, nämlich

• eine leichte Erhöhung von blur() (4px)
• eine unermessliche Erhöhung von contrast() (3000%)
• Verwendung des screen Mischmodus

So sieht das in CSS aus

.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%;
}

Sie müssen diesen gigantischen contrast()-Wert möglicherweise je nach Bild anpassen – etwas Großes genug, um die Dinge auszublasen.