Bitte warten...

CSS: Bildmanipulation

filter – Farbmanipulation

► CSS-Referenz: filter

Mit Hilfe der CSS-Eigenschaft filter lassen sich diverse Farbmanipulationen eines Objekts durchführen. Dies ist nicht auf Bilder beschränkt, sondern kann praktisch auf jedes HTML-Element angewendet werden. Folgende Effekte stehen zur Verfügung:

  • blur – Weichzeichner
  • brightness – Helligkeit
  • contrast – Kontrast
  • drop-shadow – Schlagschatten
  • grayscale – Grauwert
  • hue-rotate – Farbwinkel
  • invert – Umkehrung
  • opacity – Deckkraft
  • saturate – Sättigung
  • sepia – Sepia

Die einzelnen Effekte können hier nachvollzogen werden: Durck Klick auf das entsprechende Bild wird der Effekt ausgewählt. Mit dem Schieberegler unter den Bildern kann dann der Wert eingestellt werden (s. Angabe rechts neben dem Regler). Je nach Effekt wird der Wert als Fraktion von 1, als Prozentzahl, als Gradzahl oder in Pixeln angegeben.


blur
brightness
contrast
drop-shadow
grayscale

hue-rotate
invert
opacity
saturate
sepia

mix-blend-mode – Vermischung

► CSS-Referenz: mix-blend-mode

Über die Eigenschaft mix-blend-mode lässt sich bestimmen, ob und wie ein Objekt mit seinem Hintergrund farblich verschmolzen wird. Die Regeln folgen hier eher mathematischen als intuitiven Konzepten (s. <blend-mode>). Folgende Werte stehen zur Verfügung:

  • normal – Der Vordergrund überdeckt den Hintergrund.
  • multiply – Vordergrund und Hintergrund werden miteinander multipliziert.
  • screen – Vordergrund und Hintergrund werden invertiert, miteinander multipliziert und erneut invertiert.
  • overlay – Ist der Hintergrund heller als der Vordergrund, wird multiply ausgeführt. Ist der Hintergrund dunkler als der Vordergrund, wird screen ausgeführt.
  • darken – Die Farbe wird aus dem dunkelsten Wert jedes Farbkanals erzeugt.
  • lighten – Die Farbe wird aus dem hellsten Wert jedes Farbkanals erzeugt.
  • color-dodge – Der Hintergrunds wird durch die Umkehrung des Vordergrunds dividiert.
  • color-burn – Die Farbe des Hintergrunds wird umgekehrt und durch die Farbe des Vordergrunds dividiert. Dieser Wert wird umgekehrt.
  • hard-light – Ist der Vordergrund dunkler, wird multiply angewendet. Ist der Vordergrund heller, wird screen angewendet.
  • soft-light – Wie hard-light, nur weicher.
  • difference – Die dunklere Farbe wird von der helleren abgezogen.
  • exclusion – Wie difference, nur mit weniger Kontrast.
  • hue – Die Farbe ergibt sich aus dem Farbton des Vordergrunds und der Sättigung und Helligkeit des Hintergrunds.
  • saturation – Die Farbe ergibt sich aus der Sättigung des Vordergrunds und dem Farbton und der Helligkeit des Hintergrunds.
  • color – Die Farbe ergibt sich aus dem Farbton und der Sättigung des Vordergrunds und der Helligkeit des Hintergrunds.
  • luminosity – Die Farbe ergibt sich aus der Helligkeit des Vordergrunds und dem Farbton und der Sättigung des Hintergrunds.
  • plus-darker – Wendet den plus-darker-Algorithmus an.
  • plus-lighter – Wendet den plus-lighter-Algorithmus an.


normal
multiply
screen
overlay

darken
lighten
color-dodge
color-burn

hard-light
soft-light
difference
exclusion

hue
saturation
color
luminosity

plus-darker
plus-lighter

clip-path – Beschneidungspfad

► CSS-Referenz: clip-path

Mit der Eigenschaft clip-path lassen sich Objekte anhand definierter Formen beschneiden (s. <basic-shape>). Nur der Bereich innerhalb der angegebenen Form wird angezeigt. Folgende Formen stehen zur Verfügung:

  • inset – Rechteck nach innen
  • circle – Kreis
  • ellipse – Ellipse
  • polygon – Vieleck
  • path – Pfad (s. SVG <path>)
  • rect – Rechteck (x₁/y₁ – x₂/y₂, wird von Blink nicht unterstützt)
  • xywh – Rechteck (x/y – Breite/Höhe); über das Schlüsselwort round kann zusätzlich der Radius von abgerundeten Ecken angegeben werden.


inset
circle
ellipse
polygon

path
rect
xywh

In diesen Beispielen wurden folgende Regeln definiert:

Code kopieren
clip-path:inset(10px 30px);
clip-path:circle(50px at 50% 80%);
clip-path:ellipse(20px 60px at 40% 60%);
clip-path:polygon(20% 0%, 100% 50%, 80% 100%, 0% 50%);
clip-path:path("M0,70 A20,5 -45 0,0 70,0 A20,5 45 0,0 140,70 V140,140 Z");
clip-path:rect(70px 70px 130px 130px round 5px);
clip-path:xywh(0 5px 100% 75% round 15% 30px);

Zusätzlich kann angegeben werden, auf welche Fläche sich die angegebenen Maße beziehen (s. CSS box model). Wird nur diese Fläche angegeben und keine Form, so wird das Objekt an dieser Fläche beschnitten. Das Beschneiden wirkt sich nicht auf die Größe des beanspruchten Platzes aus.

  • margin-box
  • border-box (Vorgabe)
  • padding-box
  • content-box

Beispiel:
clip-path:polygon(20% 0%, 100% 50%, 80% 100%, 0% 50%) margin-box;


margin-box
border-box
padding-box
content-box

zoom – Größenänderung

► CSS-Referenz: zoom

Mit der Eigenschaft zoom lässt sich die Größe eines Objektes ändern. Es können Fraktionen von 1 oder Prozentangaben als Wert verwendet werden. Der von dem Objekt beanspruchte Platz wird an die neue Größe angepasst.


.5
normal
150%

image-rendering – Kantenglättung

► CSS-Referenz: image-rendering

Mit der Eigenschaft image-rendering lässt sich die Art der Kantenglättung festlegen, wenn eine Grafik vergrößert wird. Nicht alle der folgenden Werte werden von allen Browsern unterstützt:

  • auto
  • crisp-edges
  • pixelated
  • smooth
  • high-quality


auto
crisp-edges
pixelated
smooth
high-quality