CSS-Maskierung - mask

Hallo da draußen, zukünftige Meister der CSS! Heute tauchen wir ein in die faszinierende Welt der CSS-Maskierung. Stell dir vor, du bist ein Zauberer und möchtest Teile deiner Webseite verschwinden lassen oder auf interessante Weise enthüllen. Genau das ermöglicht uns die CSS-Maskierung! Also, setzen wir unseren Zaubererhut auf und lernen einige CSS-Tricks!

Was ist CSS-Maskierung?

CSS-Maskierung ist wie das Benutzen einer unsichtbaren Schablone auf deinen Web-Elementen. Sie ermöglicht es dir, Teile eines Elements basierend auf einem anderen Bild oder einer Form zu verbergen oder teilweise anzuzeigen. Es ist eine mächtige Technik, die einige wirklich coole Effekte erzeugen kann!

Mögliche Werte

Bevor wir mit dem Coden beginnen, schauen wir uns die verschiedenen Werte an, die wir mit der Eigenschaft mask verwenden können. Denke daran, dass diese wie verschiedene magische Zauberstäbe sind, die jeweils einen einzigartigen Effekt erzeugen:

Wert	Beschreibung
none	Keine Maskierung wird angewendet
<mask-reference>	Verweist auf ein Maskenbild
<masking-mode>	Bestimmt, wie die Maske angewendet wird
<position>	Setzt die Position der Maske
<bg-size>	Definiert die Größe der Maske
<repeat-style>	Gibt an, wie die Maske wiederholt wird
<geometry-box>	Definiert die Maskenbox
no-clip	Verhindert das Abschneiden der Maske

Keine Sorge, wenn diese jetzt verwirrend erscheinen. Wir werden jeden einzelnen mit Beispielen erkunden!

Gültig für

Die Eigenschaft mask kann auf jedes Element angewendet werden. Es ist wie ein magischer Zauberstab, der auf alles wirkt!

Syntax

Die grundlegende Syntax für die Eigenschaft mask sieht so aus:

.element {
mask: <value>;
}

Nun schauen wir uns jeden Wert im Detail an.

CSS-Maske - none Wert

Der none Wert ist einfach. Es bedeutet, dass keine Maskierung angewendet wird. Es ist so, als würdest du entscheiden, deinen magischen Zauberstab überhaupt nicht zu benutzen.

.no-mask {
mask: none;
}

Dieser Code sagt dem Browser einfach: "Wende keine Maske auf dieses Element an."

CSS-Maske - <mask-reference>

Hier beginnt die richtige Magie! Ein <mask-reference> kann ein Bild oder ein CSS-Gradient sein, das bestimmt, welche Teile des Elements sichtbar sein sollen.

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

.gradient-mask {
mask-image: linear-gradient(rechts, transparent, schwarz);
mask: linear-gradient(rechts, transparent, schwarz);
}

In diesen Beispielen verwenden wir entweder eine Bilddatei ('mask.png') oder einen linearen Gradienten als unsere Maske. Die schwarzen Teile der Maske zeigen das Element, während transparente Teile es verbergen.

CSS-Maske - <masking-mode>

Der Maskierungsmodus bestimmt, wie die Maske angewendet wird. Es gibt zwei Werte: alpha und luminance.

.alpha-mask {
mask-mode: alpha;
}

.luminance-mask {
mask-mode: luminance;
}

• alpha: Verwendet den Alpha-Kanal des Maskenbildes.
• luminance: Verwendet die Helligkeit des Maskenbildes.

CSS-Maske - <position>

Genau wie bei Hintergrundbildern kannst du deine Maske positionieren:

.positioned-mask {
mask-position: center;
/* oder */
mask: url('mask.png') center;
}

Dies zentriert die Maske auf dem Element. Du kannst jeden gültigen CSS-Positionswert hier verwenden.

CSS-Maske - <bg-size>

Du kannst auch die Größe deiner Maske kontrollieren:

.sized-mask {
mask-size: cover;
/* oder */
mask: url('mask.png') cover;
}

Dies macht die Maske so groß, dass sie das gesamte Element abdeckt. Du kannst auch spezifische Abmessungen verwenden, wie 100px 200px.

CSS-Maske - <repeat-style>

Wenn deine Maske kleiner als das Element ist, kannst du kontrollieren, wie sie sich wiederholt:

.repeating-mask {
mask-repeat: repeat-x;
/* oder */
mask: url('mask.png') repeat-x;
}

Dies wiederholt die Maske horizontal über das Element.

CSS-Maske - <geometry-box>

Die Geometriebox definiert den Bereich, den die Maske abdeckt:

.box-mask {
mask-clip: padding-box;
/* oder */
mask: url('mask.png') padding-box;
}

Dies wendet die Maske auf die Padding-Box des Elements an.

CSS-Maske - <geometry-box> | no-clip

Der Wert no-clip verhindert, dass die Maske an die Grenzen des Elements geschnitten wird:

.no-clip-mask {
mask-clip: no-clip;
/* oder */
mask: url('mask.png') no-clip;
}

Dies ermöglicht es der Maske, über die Grenzen des Elements hinaus zu.extendieren.

CSS-Maske - Verwandte Eigenschaften

Es gibt mehrere Eigenschaften, die mit mask zusammenhängen und dir sogar mehr Kontrolle geben:

Eigenschaft	Beschreibung
mask-image	Gibt das Maskenbild an
mask-mode	Setzt den Maskierungsmodus
mask-repeat	Steuert, wie die Maske wiederholt wird
mask-position	Setzt die Position der Maske
mask-clip	Bestimmt den Malbereich der Maske
mask-origin	Setzt den Ursprung der Maske
mask-size	Gibt die Größe der Maske an
mask-composite	Definiert, wie Masken kombiniert werden

Jede dieser Eigenschaften entspricht einem Teil der Kurzelform der mask Eigenschaft, die wir verwendet haben.

Und das war's, meine jungen CSS-Zauberer! Du hast gerade die Grundlagen der CSS-Maskierung gelernt. Erinnere dich daran, dass wie bei jedem Zaubertrick die Beherrschung der CSS-Maskierung Übung erfordert. Also habe keine Angst, zu experimentieren und deine eigenen magischen Webdesigns zu erstellen!

In meinen Jahren des Unterrichtens habe ich festgestellt, dass der beste Weg zum Lernen das Tun ist. Also hier ist eine lustige Übung für dich: Versuche, einen "Enthüllungseffekt" auf einem Bild mit einer Gradientenmaske zu erstellen. Lass es so sein, dass das Bild vollständig enthüllt wird, wenn man darüber hinwegfährt. Es ist wie das Zurückziehen eines Vorhangs, um ein verborgenes Bild zu zeigen!

viel Spaß beim Coden und möge deine Maske immer perfekt passen!

Credits: Image by storyset