CSS

Gekippt: HTML-Elemente als Parallelogramme darstellen mit Maskew

4. Februar 2013
von

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 ist seit 2005 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. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Tags: , , , ,

3 Kommentare zu „Gekippt: HTML-Elemente als Parallelogramme darstellen mit Maskew
  1. Johannes am 5. Februar 2013 um 09:40

    Sehr interessant. Das kann man bestimmt mal einsetzen.

  2. basti1350 am 5. Februar 2013 um 09:51

    Man könnte das trotzdem relativ schnell und einfach in CSS umsetzen, wenn man einen Container und Inhalt hat.
    BSP: HTML
    CSS:
    div{transform: skewX(30deg)}
    img{transform: skewX(-30deg)}
    Vorteil ist einfach, dass man hierfür kein js einladen muss.
    Bezüglich Browsersicherheit etc. wird die js Lösung warscheinlich besser sein.

    • basti1350 am 5. Februar 2013 um 09:54

      Oh, HTML natürlich ausgeschaltet.
      div
      img
      /div

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!