Screendesigner kennen die Ebenen-Modi von Photoshop nur all zu gut. Frontend-Entwickler kommen nun auch in den Genuss, zumindest Hintergründe, miteinander zu überblenden. Ich zeige euch was möglich ist.
Kompatibilität und Nutzen
Mittlerweile unterstützen - den IE ausgenommen - alle modernen Browser CSS Blend Modes. Somit sind diese gut für visuelle Effekte anwendbar. Neben grafischen "Spielereien" zur Versüßung der User-Experience, kann das Verrechnen von Hintergründen auch einen ganz handfesten Nutzen haben. Beispielsweise wenn es darum geht eine Page für verschiedene Branding-Farben zu veröffentlichen, ohne das passend getönte Bilder in Photoshop jedes mal neu aufbereitet werden müssen.
Anwendung
Als Grundvoraussetzung benötigt man eine CSS-Deklaration mit 2 Hintergrundbildern oder Farben. Das erste Bild ist die erste Ebene und das zweite Bild die zweite Ebene, auf welche die Überblendung verrechnen wird.
.ele {
background: url(bild1.jpg), url(bild2.gif);
background-blend-mode: multiply;
}Verfügbare Modi
Aktuell gibt es diese Überblendungsmodi:
- Normal
- Screen
- Multiply
- Overlay
- Darken
- Lighten
- Color-dodge
- Color-burn
- Hard-light
- Soft-light
- Difference
- Exclusion
- Hue
- Staturation
- Color
- Luminosity
Probiere es aus!
Wenn man Photoshop kennt sollte man mit den Modi vertraut sein. Ich habe ein Page bereitgestellt, auf der man die Ebenen-Modi sehr einfach per Auswahlmenü ausprobieren kann:
http://jsfiddle.net/6no7z9eq/2/