JavaScript & jQuery

Gekippt: HTML-Elemente als Parallelogramme darstellen mit Maskew

4. Februar 2013

Mit der CSS3-Eigenschaft „transform“ lassen sich HTML-Elemente als Parallelogramme darstellen, indem man sie optisch kippt. Allerdings wird durch die Verwendung dieser Eigenschaft das gesamte Element samt Inhalt verzerrt, 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

HTML-Elemente als Parallelogramme: 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.Die Maskew Library erweitert das Spektrum der Maskierungsmöglichkeiten dank JavaScript um Parallelogramme.

Der Einsatz 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, um Bilder und andere HTML-Elemente als Parallelogramme darzustellen, so dass sie sich von den üblichen Formen, die mit HTML und CSS möglich sind, abheben.

(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: , , ,

Sortiert nach:   neueste | älteste | beste Bewertung
Johannes
Gast
Johannes
3 Jahre 3 Monate her

Sehr interessant. Das kann man bestimmt mal einsetzen.

basti1350
Gast
basti1350
3 Jahre 3 Monate her

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
Gast
basti1350
3 Jahre 3 Monate her

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

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen