CSS Transformations — kreuz & quer
Stellen Sie die Dinge auf den Kopf — mit CSS-basiertem Bewegen, Drehen, Skalieren und Verzerren von Objekten auf Ihrer Webseite.
zuerst erschienen am 02. März 2020
Die Masse der Internetseiten wird immer professioneller, im Rahmen des Responsive Webdesigns haben sich mittlerweile fast schon "Standards" entwickelt.
Kaum ein Web dieses Jahres 2020 kommt ohne "Hero"-Bildfläche, einen starken "Claim" und dann drei bis sechs "Teasern" die um Klicks wetteifern. Gerne wird mit eindrucksvollen, vollflächigen Bildern — etwa im Parallax Design — gearbeitet und mit ein wenig YouTube und Instagram abgerundet. Generell ist das Design meist Zeilenartig aufgebaut, je nach Fensterbreite in einer oder mehreren Spalten (zumindest im Hintergrund).
Web-Schriften zu Hauf sorgen dazu für ein weit interessanteres Spektrum, als die bis vor einigen Jahren nur möglichen wenigen Standard-Schriftarten: Von Arial und Comic Sans über Tahoma und Times New Roman bis hin zu Verdana — wir werden sie (erstmal) nicht vermissen.
Gut ist daran einerseits, dass die sich abzeichnenden üblichen Designs eine immer bessere Qualität aufweisen. Bilder und Grafiken sind nicht mehr verpixelt und unscharf, die Menüs werden strukturierter und übersichtlicher. So wird das Web insgesamt einfacher, denn immer mehr Menschen kommen mit dem gelernten auf immer mehr Webseiten einfach zurecht.
Schlecht ist andererseits, dass die sich abzeichnenden üblichen Designs eine immer bessere Qualität aufweisen. Denn so paradox das zunächst scheint, wird es damit auch immer schwerer, sich von all den anderen tollen Webseiten abzuheben. Eine einfache Möglichkeit wollen wir heute mit den CSS Transformations zeigen, denn obwohl diese Funktion schon länger von so gut wie allen Browsern unterstützt wird, findet man sie noch relativ selten. Vielleicht, weil sie mehr an Fingerspitzengefühl einfordern, als im Standard-Baukasten die Anzahl der Teaser-Boxen zu bestimmen.
Die alten IE mit Version 8 oder früher sowie Opera Mini machen nichtmal mehr 0,5% der Browsernutzung in Deutschland aus. Also schauen wir uns doch einfach mal zwei Elemente mit CSS transform: rotate näher an. Eine vertikale Überschrift und ein "Linkdreieck" — aus unserer Startseite:
Damit das "webdesign" aufrecht steht, wird es lediglich um 90° gegen den Uhrzeigersinn gedreht. Es empfiehlt sich, auch den Ursprung der Drehung zu bestimmen, da so das weitere Positionieren meist leichter fällt.
rotate(-90deg);
left top;
Eine absolute Position ist meist sicherer und einfacher, da die nachfolgenden Objekte unbeeinflusst sind. Dafür sollte man dann dem umgebenden Objekt (z.B. div) eine Mindesthöhe min-height geben, falls es nicht immer sicher durch weitere Inhalte hoch genug sein wird. Eine Zeilenhöhe line-height kann noch mehr Kontrolle verleihen.
Das "Trends & Tricks" ist nur um 15° gedreht und ebenfalls absolut positioniert. Die Farbeffekte beruhen auf der noch etwas "ausgefalleneren" (keine IE, Edge oder Android Browser Unterstützung, gemeinsam aber nicht mal 3,5%) Methode mix-blend-mode in den Ausprägungen overlay und soft-light — aber das ist ein eigener Artikel... Eine reduzierte Deckkraft (opacity) sorgt aber auch bei den "unfähigeren" Browsern für zumindest Lesbarkeit.
Unten rechts in der Ecke schlummert noch das Dreieck "zum Blog" vor sich hin. Es sollte hier ein reiner Link-Tag a zum Einsatz kommen, ganz ohne umgebendes Objekt zur Positionierung. Das ist zum Einen sauberer und zum Anderen wird so sicher alles verlinkt (und nicht etwa am Ende nur der Text selbst).
a.goto_news {
absolute;
60vw;
-30vw;
8vw 24vw 12vw;
red;
4vw;
#fff;
rotate(-45deg);
left top;
soft-light;
}
Hier absichtlich mal das gesamte CSS des Objekts, wie es auf unserer Startseite bzw. hier oberhalb eingesetzt wird. Der Link-Tag a ist das letzte Element in der "Zeile" im Webdesign, die stets die volle Bildschirmbreite umfasst (width: 100vw) und über ihren Rand hinausragende Objekte visuell abschneidet (overflow: hidden).
Letztlich ist es immer ein wenig Rumprobieren, bis so ein Element sitzt. Es empfiehlt sich, als Erstes die Schrift zu formatieren, dann zunächst Drehung und Ursprung sowie den Inhaltsabstand (padding) zu setzen und zuletzt — wenn sich nichts mehr an den Abmessungen des Objekts ändert — die Position "zurechtzuschieben".
Manchmal kann es helfen, "von der anderen Seite aus" zu denken: Hier wurde z.B. ein left eingesetzt, um das Objekt immer am rechten Rand zu haben, da beim transform ja die linke obere Ecke des Blockelements als Ursprung gesetzt wurde und diese somit am besten "greifbar" schien.
Wir empfehlen dafür den Entwicklermodus Ihres Browsers zu nutzen: Hier können Sie die Werte "live" ausprobieren und kopieren sie einfach anschließend in ihre CSS-Datei. Wenn ein Objekt sowieso nur einmal vorkommt, spricht auch nichts gegen einen Inline-Style, den Sie im einfachen CMS metatag direkt beim Bearbeiten verwenden und den so eingefügten CSS-Code einfach mit Ihren übrigen Änderungen abspeichern.
Oder natürlich: Sie fragen uns einfach!
Das Drehen von Objekten ist aber nur eine von mehreren Transformations-Funktionen, die zur Auswahl stehen — hier mal nur die 2D-bezogenen:
— verschiebt Objekte
— skaliert Objekte
— dreht Objekte
— verzerrt Objekte
— definiert 2D-Transformationen in einer 6er-Matrix
So richtig "in Schwung" kommen die CSS-Transformations allerdings erst in Kombination mit den CSS-Transitions. Lesen Sie direkt weiter in unserem Artikel zu diesem Thema.