CSS Academy · Lektion

CSS-Masken vs. Clip-path

Vergleichen Sie CSS-Masking mit mask-image und clip-path und wählen Sie das passende Werkzeug aus.

CSS-Masken vs. Clip-path ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Zwei Möglichkeiten, Teile eines Elements auszublenden

CSS bietet zwei Mechanismen, um Teile eines Elements unsichtbar zu machen: clip-path und mask-image. Sie unterscheiden sich in ihren Möglichkeiten, Performance-Eigenschaften und Einsatzbereichen.

Rückblick auf clip-path

clip-path verwendet CSS-Formfunktionen oder SVG, um einen sichtbaren Bereich mit harten Kanten zu definieren. Alles außerhalb des Clips ist vollständig unsichtbar. Weiche Kanten sind nicht möglich.

<div class="card"></div>

mask-image

mask-image verwendet ein Bild oder einen Farbverlauf als Maske. Wo die Maske schwarz oder transparent ist, wird das Element ausgeblendet. Wo sie weiß oder opak ist, ist das Element sichtbar. Weiche Farbverläufe ermöglichen weich auslaufende Kanten.

<div class="fade-bottom"></div>

Weiche Kanten mit mask-image

Der entscheidende Vorteil von Masken: Farbverlaufsmasken erzeugen glatte, weich auslaufende Kanten, die clip-path nicht erzeugen kann:

<div class="carousel-edges"></div>

mask-image mit einer Bilddatei

Verwenden Sie ein PNG- oder SVG-Bild als Maske. Die Luminanz oder der Alpha-Kanal des Bildes bestimmt die Transparenz:

<div class="element"></div>

Kurzschreibweisen für Maskeneigenschaften

mask ist die Kurzschreibweise, die mask-image, mask-repeat, mask-size, mask-position usw. kombiniert — ähnlich der Kurzschreibweise für background.

<div class="element"></div>

-webkit-mask für Safari

Safari benötigt für die vollständige Maskenunterstützung das Präfix -webkit-mask. Fügen Sie es immer zusätzlich zur Standard-Eigenschaft ein:

<div class="element"></div>

mask-composite

Wenn Sie mehrere Maskenebenen verwenden, steuert mask-composite, wie diese kombiniert werden:

<div class="complex-mask"></div>

Performancevergleich

Sowohl clip-path als auch mask-image lösen das Paint-Rendering statt einer rein kompositorischen Darstellung aus. Testen Sie bei großen Elementen die Performance sorgfältig. Einfache clip-path-Formen sind im Allgemeinen schneller als bildbasierte Masken.

clip-path oder mask-image auswählen

Verwenden Sie clip-path, wenn:

Sie harte geometrische Kanten benötigen
Sie die Form animieren möchten
Einfachheit wichtiger ist als weiche Kanten

Verwenden Sie mask-image, wenn:

Sie weiche oder weich auslaufende Kanten benötigen
Sie komplexe bildbasierte Formen benötigen
Sie Farbverläufe zum Ausblenden verwenden möchten

Kurzer Test

Welche CSS-Eigenschaft ermöglicht weich auslaufende Kanten eines sichtbaren Bereichs, anders als clip-path?

Zusammenfassung

clip-path erzeugt geometrische Clips mit harten Kanten. mask-image verwendet Bilder oder Farbverläufe, um den sichtbaren Bereich zu erzeugen, und ermöglicht dadurch weiche, weich auslaufende Kanten. Verwenden Sie mask-image für Farbverläufe zum Ausblenden und komplexe Formen; verwenden Sie clip-path für scharfe Geometrien und animierte Formen. Fügen Sie für die Safari-Unterstützung immer das Präfix -webkit-mask ein.

Häufig gestellte Fragen

Ist die Lektion „CSS-Masken vs. Clip-path“ kostenlos?

Ja — der vollständige Text von „CSS-Masken vs. Clip-path“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „CSS-Masken vs. Clip-path“?

Vergleichen Sie CSS-Masking mit mask-image und clip-path und wählen Sie das passende Werkzeug aus. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „CSS-Masken vs. Clip-path“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu CSS Academy