Bearbeiten von Bildern in CSS: Kombinieren von Techniken

() translation by (you can also view the original English article)

In den letzten beiden Tutorials dieser Serie haben wir diskutiert, wie Filter und Mischmodi das Erscheinungsbild von Bildern vollständig verändern können. In diesem Tutorial werde ich die Grundlagen der Bearbeitung von Bildern behandeln, indem ich beide Eigenschaften zusammen verwende.

Die Grundlagen

Jede nicht primitive Bildbearbeitung erfordert normalerweise mehr als nur ein einzelnes Element. Dies kann mit Pseudoelementen erreicht werden. Leider gibt es noch eine Komplikation. Das img-Element fällt unter ersetzte Elemente. Infolgedessen funktioniert :before und :after nicht mit Bild-Tags. Um dieses Problem zu beheben, benötigen wir einen Wrapper um unser Bild, und das figure-Tag scheint in diesem Fall der beste Kandidat zu sein. Daher sollte unser Markup folgendermaßen aussehen:

1	<figure>
2	<img src="image-url">
3	</figure>

Alle Bearbeitungseffekte, die wir erstellen, haben ein gemeinsames Kern-CSS.

figure {
  position: relative;
}

figure:before,
figure:after {
  content: '';
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

Ich habe die Pseudo-Elemente :before und :after verwendet, damit ich verschiedene Mischmodi anwenden kann. Beachten Sie, dass ich die width und height auf 100% eingestellt habe, um die figure richtig abzudecken, und die absolute Positionierung für eine perfekte Ausrichtung verwendet habe.

In den meisten Fällen werden wir die Filter auf Bilder anwenden und Mischmodi und andere Effekte auf die Pseudoelemente verwenden. Das Bild unten ist das Originalbild, das wir bearbeiten werden.

image of motorcycle as example for editing

Kontrastreiche Graustufenbilder

Um ein kontrastreiches Bild zu erstellen, können Sie den Kontrast einfach auf einen höheren Wert einstellen. Durch Erhöhen der Helligkeit wird der Effekt jedoch dramatischer. Wenn Sie nur Filter verwenden, ist das alles, was Sie tun können. Mit den Mischmodi können Sie dem Bild jedoch auch einen eingefügten Kastenschatten mit overlay überblendung hinzufügen, um bessere Ergebnisse zu erzielen. Hier ist das CSS für diesen Effekt:

img {
  filter: contrast(1.8) brightness(1.5) grayscale(1);
}

figure:before {
  z-index: 3;
  mix-blend-mode: overlay;
  box-shadow: 0 0 200px black inset;
}

Durch Hinzufügen eines Z-Index bleiben unsere Pseudoelemente über dem Bild. Ich habe den Overlay-Mischmodus verwendet, um das Bild nach dem Auftragen des Box-Schattens leicht dunkel zu halten.

Bewegen Sie den Mauszeiger über das Bild unten, um den Unterschied zwischen Filtern und einer Kombination aus Filtern und Mischmodi zu erkennen.

In der Praxis können Sie in der CodePen-Demo verschiedene Werte für die box-shadow-Eigenschaft ausprobieren.

Bilder älter aussehen lassen

Die Farbe der meisten alten Fotos verblasst im Allgemeinen und sie haben ein rotbraunes Außenfutter. Um den gleichen Effekt wiederherzustellen, müssen mehr Elemente und Filter verwendet werden. Hier ist unser CSS:

img {
  filter: saturate(0.6);
}

figure {
  filter: contrast(1.1) saturate(1.9) sepia(0.7) grayscale(0.3);
}

figure:before {
  z-index: 2;
  mix-blend-mode: multiply;
  box-shadow: 0 0 250px brown inset;
  background: rgba(125, 100, 0, 0.3);
}

figure:after {
  z-index: 3;
  mix-blend-mode: hard-light;
  box-shadow: 0 0 150px pink inset;
  background: rgba(198, 155, 0, 0.3);
}

Dieses Mal habe ich Filter sowohl auf das Bild als auch auf die Figur angewendet. Grundsätzlich möchten wir, dass das Bild weniger farbenfroh ist. Dies wird erreicht, indem der Sättigungsfilter mit einem Wert unter 1 verwendet wird. Die Zahlenfilter werden nach dem gesamten Mischen angewendet. Wenn Sie diese Filter nicht anwenden, weist das Endergebnis deutlich stärkere Brauntöne auf, was unerwünscht ist.

Sie sollten beachten, dass ich auf beide Pseudoelemente auch einen halbtransparenten rötlichen Hintergrund angewendet habe. Dies verleiht den Bildern ihr rotbraunes Aussehen. Der Kastenschatten wird verwendet, um den Umriss vergleichsweise brauner zu halten.

Sie sollten mit verschiedenen Eigenschaften in der Demo experimentieren, um zu sehen, ob Sie bessere Ergebnisse erzielen können.

Hinzufügen eines bestimmten Farbtons

Dieses Mal werden wir versuchen, unserem Bild einen blauen Farbton zu verleihen. Im Vergleich zu warmen Farben schont das Hinzufügen kühler Farben wie Blau unsere Augen.

Dies ist das CSS, das wir anwenden müssen:

img {
  filter: brightness(1.1) contrast(1.3);
}

figure:before {
  z-index: 2;
  mix-blend-mode: multiply;
  box-shadow: 0 0 100px rgba(100, 150, 200, 1) inset, 0 0 300px rgba(100, 150, 200, 1) inset;
}

figure:after {
  z-index: 3;
  mix-blend-mode: difference;
  background: rgba(0, 0, 255, 0.3);
}

Ich beginne damit, die Helligkeit und den Kontrast unseres Bildes zu erhöhen. Dadurch wird sichergestellt, dass unser Bild nicht weniger markante Farben verliert und während der Bearbeitung zu langweilig wird.

Im Allgemeinen müssen Sie mehrere box-shadow mit helleren Farben verwenden, um spürbare Änderungen zu erzielen. Deshalb füge ich unserem Bild zwei bläuliche box-shadow hinzu. Allein die Verwendung eines box-shadow beschränkt den blauen Farbton auf die Grenze unseres Bildes. Um die blaue Farbe über unser Bild zu verteilen, verwende ich sie als Hintergrund für das :after-Pseudoelement. Hier ist das Endergebnis all dieser Filter:

Versuchen Sie, dem Bild in der Demo einen grünen oder roten Farbton hinzuzufügen.

Gelblicher Dunst

Haben Sie jemals einen leicht bewölkten Abend mit Sandpartikeln erlebt, die wegen des Windes in der Atmosphäre schwebten? Bei diesen Wetterbedingungen hat alles einen gelblichen Farbton und die Objekte scheinen etwas langweilig zu sein. Um den gleichen Effekt wiederherzustellen, benötigen wir das folgende CSS:

img {
  filter: saturate(0.2);
}

figure {
  filter: contrast(1.8) brightness(1.1) saturate(1.5);
}

figure:before {
  z-index: 2;
  mix-blend-mode: multiply;
  box-shadow: 0 0 100px rgba(0,0,0,0.5) inset;
  background: rgba(125, 100, 0, 0.3);
}

figure:after {
  z-index: 3;
  mix-blend-mode: hard-light;
  box-shadow: 0 0 500px rgba(0,0,0,0.6) inset;
  background: rgba(198, 155, 0, 0.3);
}

Als erstes reduziere ich die Bildsättigung. Sowohl die Pseudo-Elemente :before und :after haben einen durchscheinenden gelblichen Hintergrund, um den gewünschten Farbton hinzuzufügen. Wenn Sie den hard-light-Mischmodus aktivieren, wird der Dunst :after hervorgehoben.

Der box-shadow auf Pseudo-Elementen erhöht den Fokus auf den Biker. Schließlich verstärkt die Anwendung von Filtern mit hohem contrast, brightness und saturation auf unser figure element die Trübung.

In der Demo können Sie verschiedene Werte für verschiedene Eigenschaften ausprobieren, um zu sehen, wie sie sich auf das Endergebnis auswirken.

Abschließende Gedanken

Es ist nicht so schwer, Bilder in CSS zu bearbeiten. Wenn Sie die Punkte berücksichtigen, die ich in diesem Tutorial besprochen habe, können Sie selbst einige erstaunliche Filter erstellen.

Zum Üben können Sie mit den Demos in diesem Tutorial experimentieren oder versuchen, beliebte Instagram-Filter neu zu erstellen. Sie können sich auch die verschiedenen Animationen und Effekte ansehen, die auf dem Envato Marketplace verfügbar sind, falls Sie einige gebrauchsfertige Filter benötigen.