Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 4. Februar 2013

Gekippt: HTML-Elemente als Parallelogramme darstellen mit Maskew

Mit der CSS3-Eigenschaft „trans­form“ las­sen sich HTML-Elemente als Parallelogramme dar­stel­len, indem man sie optisch kippt. Allerdings wird durch die Verwendung die­ser Eigenschaft das gesam­te Element samt Inhalt ver­zerrt, was min­des­tens bei Bildern in der Regel eine uner­wünsch­te Optik nach sich zie­hen wird. Die JavaScript-Bibliothek Maskew hin­ge­gen mas­kiert ein HTML-Element ledig­lich mit einem gekipp­ten Rechteck (also einem Parallelogramm). Der eigent­li­che Inhalt wird unver­zerrt dar­ge­stellt.


Beispiele für mit Maskew erstell­te Maskierungsrahmen

HTML-Elemente als Parallelogramme: Schicke Rahmen einfach erstellen

Frei defi­nier­ba­re Formen für HTML-Elemente sind auch mit CSS3 nur sehr ein­ge­schränkt mög­lich. Neben Rechtecken las­sen sich mit wenig Aufwand und ohne JavaScript zumin­dest Kreise und Ovale erstel­len, mit denen auch Grafiken etc. mas­kiert wer­den können.Die Maskew Library erwei­tert das Spektrum der Maskierungsmöglichkeiten dank JavaScript um Parallelogramme.

Der Einsatz ist ein­fach. Zunächst wird die  JavaScript-Bibliothek, die kei­ne 5 Kilobyte groß ist, ins HTML-Dokument ein­ge­bun­den. Anschließend lässt sich der Maskew-Effekt mit einer Zeile JavaScript auf belie­bi­ge Blockelemente anwen­den:

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

Dem Maskew-Objekt wer­den zwei Variablen über­ge­ben. Die ers­te Variable ent­hält das Element, auf das der Effekt ange­wen­det wer­den soll. Über die zwei­te Variable wird der Kippwinkel ange­ge­ben. Möglich ist ein Winkel zwi­schen 0 (ergibt ein Rechteck) und 45 Grad.

jQuery-Nutzer haben auch die Möglichkeit, Maskew als Plugin dafür zu ver­wen­den:

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

Maskew mit Maus verändern

Wer ein wenig Dynamik in sein mas­kier­tes Element brin­gen möch­te, dem steht die Option „touch“ zur Verfügung. Sie sorgt dafür, dass sich das Parallelogramm per Maus ver­än­dern lässt. Man kann somit den Kippwinkel manu­ell anpas­sen, indem man die Maus mit gedrück­ter rech­ter Taste über das Bild bewegt. Ein ent­spre­chen­der Cursor signa­li­siert die­se Möglichkeit:

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

Fazit: Maskew ist ein net­ter Effekt, um Bilder und ande­re HTML-Elemente als Parallelogramme dar­zu­stel­len, so dass sie sich von den übli­chen Formen, die mit HTML und CSS mög­lich sind, abhe­ben.

(dpe)

Denis Potschien

Denis Potschien

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.

3 Kommentare

  1. Man könn­te das trotz­dem rela­tiv schnell und ein­fach in CSS umset­zen, wenn man einen Container und Inhalt hat.
    BSP: HTML
    CSS:
    div{transform: skewX(30deg)}
    img{transform: skewX(-30deg)}
    Vorteil ist ein­fach, dass man hier­für kein js ein­la­den muss.
    Bezüglich Browsersicherheit etc. wird die js Lösung war­schein­lich bes­ser sein.

  2. Sehr inter­es­sant. Das kann man bestimmt mal ein­set­zen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.