Mit der CSS3-Eigenschaft „transform“ lassen sich HTML-Elemente unter anderem kippen und somit in die Form eines Parallelogramms bringen. Allerdings wird durch die Verwendung dieser Eigenschaft das gesamte Element samt Inhalt gekippt, was mindestens bei Bildern in der Regel eine unerwünschte Optik nach sich ziehen wird. Die JavaScript-Bibliothek Maskew hingegen maskiert ein HTML-Element lediglich mit einem gekippten Rechteck (also einem Parallelogramm). Der eigentliche Inhalt wird unverzerrt dargestellt.

Beispiele für mit Maskew erstellte Maskierungsrahmen

Schicke Rahmen einfach erstellen

Frei definierbare Formen für HTML-Elemente sind auch mit CSS3 nur sehr eingeschränkt möglich. Neben Rechtecken lassen sich mit wenig Aufwand und ohne JavaScript zumindest Kreise und Ovale erstellen, mit denen auch Grafiken etc. maskiert werden können. Maskew erweitert das Spektrum der Maskierungsmöglichkeiten dank JavaScript um Parallelogramme.

Der Einsatz von Maskew ist einfach. Zunächst wird die  JavaScript-Bibliothek, die keine 5 Kilobyte groß ist, ins HTML-Dokument eingebunden. Anschließend lässt sich der Maskew-Effekt mit einer Zeile JavaScript auf beliebige Blockelemente anwenden:

1

var maskew = new Maskew(document.getElementById("bild"), 10);

Dem Maskew-Objekt werden zwei Variablen übergeben. Die erste Variable enthält das Element, auf das der Effekt angewendet werden soll. Über die zweite Variable wird der Kippwinkel angegeben. Möglich ist ein Winkel zwischen 0 (ergibt ein Rechteck) und 45 Grad.

jQuery-Nutzer haben auch die Möglichkeit, Maskew als Plugin dafür zu verwenden:

1

var $maskew = $("bild").maskew(10);

Maskew mit Maus verändern

Wer ein wenig Dynamik in sein maskiertes Element bringen möchte, dem steht die Option „touch“ zur Verfügung. Sie sorgt dafür, dass sich das Parallelogramm per Maus verändern lässt. Man kann somit den Kippwinkel manuell anpassen, indem man die Maus mit gedrückter rechter Taste über das Bild bewegt. Ein entsprechender Cursor signalisiert diese Möglichkeit:

1

var maskew = new Maskew(document.getElementById("bild"), 10, {touch: true});

Fazit: Maskew ist ein netter Effekt für Bilder und andere HTML-Elemente, um diese in Form zu bringen und von den üblichen Formen, die mit HTML und CSS möglich sind, abzuheben.

(dpe)

Denis Potschien

Seit 2005 ist er freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

• Web
|
• Facebook
|
• Google+
|
• More Posts (156)

Tags: css3, javascript, jquery, maskew, transform