Textrotation auf Webseiten wurden bis vor kurzem nahezu ausschließlich mithilfe von vorgefertigten Bildern durchgeführt. Leider haben Bilder zwei große Nachteile: sie sind verhältnismäßig groß und brauchen deshalb länger bei der Datenübertragung vom Server zum Browser und zweitens ist ein zusätzlicher HTTP-Request erforderlich, um das Bild nachzuladen. Dieser kostet zusätzlich Zeit und verlangsamt damit unnötig den Aufbau der Seite. Eine mögliche Alternative bietet die CSS3 Textrotation.
Texte lassen sich heutzutage sehr einfach mittels CSS3-Textrotation rotieren. Aufgrund der verschiedensten Browser, die jeweils nur ihren eigenen Browser-spezifischen CSS-Syntax (prefix) verstehen sind einige Zeilen CSS notwendig.
.drehen{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
display:block;
}
Die erste Zeile wird von allen Webkit-Browsern verstanden. Die Zweite Zeile wird vom Firefox ab version 3.5 verstanden. Für beide kann eine beliebige Gradzahl für die Rotation angegeben werden. Die letzte Zeile ist für den InternetExplorer. Dieser kann den Text nur in 90°-Schritten drehen. Diese kann man einstellen, indem der parameter “rotation” auf die Werte: 0, 1, 2, or 3 eingestellt wird. Was viele nicht wissen ist, dass diese Rotation bereits vom IE 5.5 verstanden wurde.
Hinweis: Rotationen sind nur für Elemente möglich, denen als CSS-Display der Wert: Block zugewiesen wurde (siehe Zeile 4):
Weiterführende Links:
Es gibt auch für die CSS3-Textrotation Onlinegeneratoren, bei denen man durch ein paar Klicks die Auswirkungen verschiedener Parameter direkt einsehen kann. Einen guten habe ich auf http://www.css3maker.com/text-rotation.html gefunden.
Hinweis: es gibt verschiedene Möglichkeiten die prefixe zu entfernen. Z.b. über serverseitige Erzeugung des CSS-Codes (entsprechend des Browsers) oder auch eine zusätzliche JavaScript-Datei: http://leaverou.github.io/prefixfree/
Kommentare