CSS Mask Effekte – Webdesign der Zukunft
Ich möchte euch heute einen Teil des Webdesign der Zukunft vorstellen und zwar CSS Mask Effekte.
Quelle: http://tympanus.net/Tutorials/CSSMaskTransition/
Was sind CSS Mask Effekte?
Wer bereits Erfahrung mit Videoschnitt bzw. Compositing hat wird solche Effekte bereits kennen. Es sind schwarz-weiße Masken, die dem Browser mitteilen, inwiefern eine Ebene, die über einer anderen Ebene liegt, sichtbar ist. Weiße Bereiche sind dabei komplett transparent und schwarze verdecken das Bild komplett.
Bei CSS Masks wird hier jedoch die weiße Farbe durch den transparenten Kanal eines PNG Bildes ersetzt.
Zusammengefasst in einem Bild als klassischen Sprite, kann eine Animation abgebildet werden.
Wie so etwas aussehen kann, könnt ihr euch hier ansehen:
http://tympanus.net/Tutorials/CSSMaskTransition/
Kann ich CSS Mask Effekte bereits verwenden?
CSS Masken sind eine sehr, sehr neue CSS Technik und diese werden noch von wenigen Browsern richtig unterstützt. Dies wird besonders deutlich bei caniuse.com
CSS Masken können also bereits verwendet werden, jedoch sollte dies mit Vorsicht passieren und die Webseite sollte so gestaltet sein, dass diese auch ohne die Masken noch gut funktioniert.
Wie erstelle ich solch eine CSS Maske?
Eine solche Maske zu erstellen kann sehr aufwendig sein. Eine detaillierte Anleitung würde den Umfang dieses Beitrages sprengen.
Allerdings findet ihr eine sehr detaillierte und schöne Anleitung dazu auf tympanus.net