Bilder einfärben mit Image-Tint!


Wer als Webentwickler hat sich nicht schon an den Designern gestört, die gerne für Bildeinfärbungen „Multiply“ bzw. „Multiplizieren“ genutzt haben? Diese Funktion im Web umzusetzen war bisher immer ein Ärgernis, doch es gibt jetzt eine Lösung dafür!

Sogenanntes „Image tinting“ ist mit CSS3 nun möglich geworden, schauen wir uns doch mal an, wie es funktioniert:

Der Container, der das Bild enthält bekommt mit :before einen RGBA-Wert zugewiesen, welcher dann gleichzeitig auch noch die Transparenz (opacity) enthält.

 


.tint:before {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background: rgba(0,255,255, 0.5);
}

Wer möchte, kann dem noch einen netten Blendeffekt mitgeben:


-moz-transition: background .3s linear;
-webkit-transition: background .3s linear;
-ms-transition: background .3s linear;
-o-transition: background .3s linear;
transition: background .3s linear;

Bisher gab es noch keine deutsche Anleitung hierzu, ich hoffe hiermit den weniger Englischsprachigen Menschen weitergeholfen zu haben.

Teilen, Kommentieren, Backlinks sind gern gesehen! =)

So far,

Eure Jenny