CSS blend modes

Hier ein bisschen CSS um die Möglichkeiten dieses Content Management Systems aufzuzeigen. Der Editor für die Beitragsbearbeitung erlaubt vielfältige Verwendung von HTML oder CSS.

Damit ist z.B. auch die Anpassung der Darstellung von Bildern möglich (hier eines aus den Albumbildern). Das CMS-Modul Fotoalben ist in der Grundausstattung dieses Content Management Systems bereits enthalten. Alle Preise zu diesem CMS finden Sie hier.


Original-Bild:




Mit CSS blend-mode (keine Bildbearbeitung nur CSS im Editor):



Das CSS einer div:

background: url(a_album/photos/ 20101230001435/ a_pics/001.jpg), linear-gradient(#999, red); background-blend-mode: difference; width: 600px; height: 450px;

Mögliche blend-modes:

background-color: red;
background-image: url(test.jpg);
background-blend-mode: multiply;
background-blend-mode: overlay;
background-blend-mode: screen;
background-blend-mode: darken;
background-blend-mode: lighten;
background-blend-mode: color-dodge;
background-blend-mode: color-bum;
background-blend-mode: hard-light;
background-blend-mode: soft-light;
background-blend-mode: difference;
background-blend-mode: exclusion;
background-blend-mode: hue;
background-blend-mode: multiply;
background-blend-mode: saturation;
background-blend-mode: color;
background-blend-mode: luminosity;

Es können nicht nur ein Bild und ein Verlauf, sondern auch Farbe oder zwei Bilder verbunden werden.