Eine der unschätzbarsten Eigenschaften von Photoshop - wohl die Eigenschaft, die es vor seiner Konkurrenz vorantrieb - sind Mischmodi. Mischmodi nehmen zwei aufeinander gelegte Pixel auf und kombinieren sie auf unterschiedliche Weise, zum Beispiel wird der dunklere Farbmischmodus einfach das dunklere der beiden Pixel wiedergeben. Wenn sie über ein ganzes Bild erweitert werden, können Mischmodi erstaunliche Effekte erzeugen.
Obwohl Adobe Photoshop keine Mischmodi erfunden hat, ist seine Implementierung sicherlich die am meisten nachgeahmte. Aber jetzt brauchen Sie Photoshop nicht, um Ihre Bilder auf diese Weise zu stylen, denn wir können alles dynamisch mit CSS3 machen.
So wie es steht, Browser-Unterstützung für CSS ' Hintergrund-Blend-Modus- Eigenschaft verbessert sich. Frühere Versionen von Browsern benötigten Anbieterpräfixe und / oder die Aktivierung von Testfeatures, aber caniuse.com Berichte unterstützen in den aktuellen Versionen von Chrome, Firefox und Opera, Safari folgt bald.
Es gibt noch keine Anzeichen für IE-Unterstützung, aber da Mischmodi eine progressive Verbesserung sind, können wir anfangen, sie jetzt zu verwenden.
Es gibt eine Reihe von Mischmodusoptionen in den CSS3-Kandidatenempfehlungen, aber am nützlichsten für unsere Zwecke ist der Hintergrundmischmodus . Diese Eigenschaft ermöglicht es uns, zwei Bilder oder ein Bild und eine Hintergrundfarbe zu mischen.
Hier ist der Code, den wir brauchen:
Und hier ist unser grundlegendes CSS:
.blend{width:782px;height:540px;background:#3db6b8 url("lighthouse.jpg") no-repeat center center;}Wir sind nun bereit, die Mischmodi hinzuzufügen.
Um dies zu tun, fügen wir unserem div eine weitere Klasse hinzu, zum Beispiel "multiplizieren":
Und dann erstellen wir eine zweite Stilregel:
.blend.multiply{background-blend-mode: multiply;}Wenn Sie sich den Code ansehen möchten, den Sie können Laden Sie die Quelldateien hier herunter.
Multiplizieren Sie , wie der Name schon sagt, das Basispixel mit der Mischfarbe, was zu einer dunkleren Farbe führt. Die Multiplikation von Schwarz führt zu Schwarz und das Multiplizieren von Weiß lässt das Bild unverändert.
background-blend-mode: multiply;Overlay ist ein komplexer Mischmodus. Die Multiplikation hängt von der Grundfarbe ab: Helle Farben werden heller, dunkle Farben werden dunkler.
background-blend-mode: overlay;Das polare Gegenteil von verdunkeln , aufhellen hellt ein Bild auf, indem es die zwei sich überlappenden Pixel vergleicht und das hellere von den zwei auswählt.
background-blend-mode: lighten;Farbbrennen ist das genaue Gegenteil von Farbabweichungen , es dunkelt die Grundfarbe ab, was zu einer Kontraststeigerung führt.
background-blend-mode: color-burn;Weiches Licht ist ähnlich wie hartes Licht , aber anstatt zu multiplizieren oder die Farben zu screenen, verwendet weiches Licht Ausweichen und Brennen für einen subtileren Effekt.
background-blend-mode: soft-light;Der Ausschluss ist dem Unterschied ähnlich, aber er erzeugt weniger Kontrast und ist daher etwas brauchbarer.
background-blend-mode: exclusion;Sättigung , wie Farbton , verbindet zwei Werte der Grundfarbe mit einer Eigenschaft der Mischfarbe, in diesem Fall die Sättigung.
background-blend-mode: saturation;Luminanz ist das Gegenteil von Farbe , es kombiniert den Farbton und die Sättigung der Grundfarbe und die Leuchtkraft der Mischfarbe.
background-blend-mode: luminosity;