Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Mit Hilfe der mask-Eigenschaften von CSS ist es möglich, ein Objekt auf Basis eines Bildes zu maskieren. Das Bild dient dann als Alphakanal – somit sind Abstufungen in der Transparenz möglich. In diesem Punkt unterscheidet sich mask deutlich von clip-path. Damit die Alpha-Maske funktioniert, muss auch eine alphatransparente PNG als Maske geladen werden. Die transparenten Bereiche sind später unsichtbar, opake Bereiche sind sichtbar. Halbtransparente Bereiche werden entsprechend ihrer Deckkraft dargestellt.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

Funktionsweise

Masken werden immer dann benutzt, wenn ein Objekt – z.B. ein farbiger <div> – optisch beschnitten werden soll. Bei der verwandten Funktion clip-path werden dafür Vektor-Masken verwendet. mask verwendet Pixelmasken, so dass halbtransparente Bereiche möglich sind. Das folgende Beispiel zeigt die Vorgehensweise:

Funktionsweise von CSS Mask. Verlauf + Alphamaske = Ergebnis

CSS Masken unterstützen eine Reihe von Eigenschaften, Kurzschreibweisen und natürlich Werten. Die wichtigsten haben wie hier zusammengefasst:

mask-image

Mit der CSS-Eigenschaft mask-image kann ein Bild als Maske geladen werden. Dieses Bild verhält sich ähnlich wie ein Hintergrundbild und wiederholt sich auf X- und Y-Achse.

.element {
  mask-image: url(mask.png);
}

mask-repeat

Mit der Eigenschaft mask-repeat kann die Wiederholung beeinflusst werden.

.element {
  mask-repeat: repeat-x;
}

mask-position

Mit der Eigenschaft mask-position kann die Maske verschoben werden.

.element {
  mask-position: top left;
}

mask-size

Mit der Eigenschaft mask-size kann die Skalierung der Maske beeinflusst werden. Es können X- und Y-Breitenangaben, sowie contain (passend skalieren) und cover (füllend skalieren) verwendet werden.

.element {
  mask-size: 100% 100%;
}

Beispiele für CSS Masken

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the css-masks feature across the major browsers from caniuse.com

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →