Einen Augenblick Geduld...
Einen Text zu drehen - so stellt man sich vor - dürfte ja im Prinzip nicht so schwer sein. Ähnlich wie bei einem DTP-Programm fasst man den Textblock an und dreht ihn anschließend entsprechend um den gewünschten Wert. Aber selbst mit einem Entwicklungsprogramm wie der Adobe Dreamweaver ist das ohne Vorkenntnisse nicht intiutiv möglich.
Aus diesem Grund möchte ich hier die Grundlagen zeigen und ein Beispiel aufzeigen mit dem die Vorgehensweise verständlich wird.
Im zweiten Schritt möchte ich den gedrehten Text dann auf der Webseite fixieren, damit er von seiner Position nicht abweicht wenn man die Webseite weiter nach unten scrollt. Ich benutze den gedrehten Text also als stilistisches Mittel um ein gewisses Design auf der Seite zu erzeugen.
Ich beginne mit der Vorbereitung der Webseite. Dabei schaffe ich mir im head des Quelltextes direkt einen style-Bereich in dem ich anschließend die Formatierungen einbinde. Alternativ könnte ich natürlich die styles in eine externe Datei packen. Aber um es hier zu zeigen reicht es, die Befehle in dieselbe Datei zu integrieren.
Das Gleiche gilt anschließend auch für das festsetzen (''position: fixed'') des entsprechenden div-Containers.
Falls diese Begrifflichkeiten Probleme bereiten schaut euch gerne eines der ersten Tutorials (''Grundlagen: HTML, CSS und Javascript'') an um sie besser zu verstehen.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Text hochkant</title>
<style>
.hochkant {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 380px;
height: 80px;
font-size: 50px;
font-weight: bold;
display: block;
}
</style>
</head>
<body>
<div class="hochkant">
HOCHKANT
</div>
</body>
</html>
Zusätzlich habe ich im Bereich des body bereits einen div-Container (''hochkant'') angelegt, in dem ich das Wort ''HOCHKANT'' in Großbuchstaben platziert habe.
Jetzt kann ich mit den Formatierungen des Textes im Container beginnen. Dazu habe ich im Bereich der styles bereits ein paar Grundformatierungen für den hochkant-Container vorgenommen.
Als erstes will ich, dass der Text in einer serifenlosen Schrift ( wie z.B. Arial oder Helvetica) dargestellt wird - und zwar auf sämtlichen Systemen möglichst gleich (PC, Mac, Linux, Tablet-PCs, Android, Apple, etc.). Dazu habe ich ihm die sog. font-family zugeordnet, die entsprechend installierte Schriften auf dem jeweiligen System kennt und auch dementsprechend anzeigt ohne das irgendwelche Webfonts, etc. nachgeladen werden müssen.
Natürlich könnte ich auch die standardmäßige Systemschrift nutzen. Diese ist i.d.R. aber Serifenbetont (wie z.B. bei der Schriftart Times, bzw. Times New Roman, etc.) und eignet sich deswegen nicht so gut für das ''hochkant'' stellen. Naja, und es gibt eine gewisse Gesetzmäßigkeit im Bereich des desktop publishing die besagt, dass man Texte die anschließend gedreht werden, einfach, möglichst kurz und lesbar halten sollte. Dazu gehört natürlich auch, dass das gedrehte Wort nicht zu lang sein darf - auch wenn ich auf einer Webseite nach unten scrollen kann (mit Papier geht das ja bekanntlich nicht: am Papierende ist Schluss...).
Damit ich den Text, bzw. den Container anschließend drehen kann, benötige ich die Größenangabe in width: 380px (''Breite'') und height: 80px (''Höhe)''. Diese sollte nicht zu knapp bemessen werden, damit der Text den ich hier in 50px (''font-size: 50px'') Größe ausgewählt habe, anschließend auch vollständig gedreht wird und keine unnötigen Umbrüche erzeugt.
Für das anschließende Festsetzen des Textes, bzw. seines Containers benötige ich zudem den Eintrag display: block.
Bitte dazu nie das Semikolon am Ende einer Befehlszeile in den styles vergessen (genauso wie natürlich die geschweiften Klammern, in denen alle Befehle eines Containers stehen müssen).
OK, das Ergebnis ist noch nüchtern und unspektakulär. Aber das ändert sich mit den nächsten Formatierbefehlen.
Im Bild erkennbar habe ich die Größe des div-Containers im blauen Rahmen eingeblendet (diesen Rahmen sieht man im Browser nicht).
Wie bereits erwähnt kann ein Container in beliebige Richtungen gedreht werden. Die Angabe erfolgt dabei in Grad. Dabei ist zu beachten, dass wenn ein Text ''links herum'' gedreht wird, die Vorzeichen entsprechend mit einem ''-'' davor gekennzeichnet werden. Will ich also den gezeigten Text um 90 Grad links herum drehen benötige ich den Befehl ''transform: rotate(-90deg)''. Entsprechend wird der Container ohne das ''-'' rechts herum gedreht.
Das funktioniert natürlich auch mit 45 Grad, etc.
Damit diese Drehung in allen Browsern funktioniert ist der Befehl in der folgenden Form in den styles unseres hochkant-Containers vorzunehmen:
Im weiteren Verlauf werde ich nur noch den style-Bereich im Quelltext anzeigen, damit die Übersicht nicht verloren geht und die wesentlichen Ergänzungen besser erkennbar bleiben.
body {
background-color: #15323F;
}
.hochkant {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #FFFFFF;
font-size: 50px;
font-weight: bold;
width: 580px;
height: 80px;
position: fixed;
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
Was habe ich hier ergänzt?
Ich habe zunächst der Webseite einen blauen Hintergrund verpasst. Ich mag keine strahlend weissen Hintergründe (die blenden mich immer...)
Dazu habe ich den body - background-color: #15323F-Eintrag vorgenommen (in geschweiften Klammern!) und vor den div-Container gepackt.
Dem Text habe ich mit dem Befehl color: #FFFFFF die Farbe weiss zugewiesen.
Ihr könnt gerne den HIER enthaltenen interaktiven Farbwähler nutzen, der die Umwandlung von Farben in HEX-Codes entsprechend erleichtert.
Als nächstes habe ich die vier Einträge bezügl. des rotate-Befehls in den div-Eintrag .hochkant gepackt (Zeile 14-17).
Warum 4 Einträge?
Damit der Rotationsbefehl auch auf sämtlichen Browsern korrekt dargestellt wird (hinter den Befehlen ''ms'' steckt Microsoft mit seiner Kompatibilität zum Internet Explorer und ''mz'' entsprechend für Mozilla mit dem Mozilla Firefox-Browser).
OK, der Text wird schon mal gedreht -sehr gut, aber die Position ist noch nicht befriedigend. Dazu braucht ein Browser die Angabe des Abstands von oben (und später wenn der Container z.B. immer rechts auf der Seite erscheinen soll auch die Angabe des Abstands von rechts). An dieser Stelle merkt man, wie wichtig die width-Angabe des Containers ist. Ist sie zu gering, wird der Text oben abgeschnitten und nur ein Teil vom Wort (die ersten Buchstaben) dargestellt.
Schauen wir uns nun mal den position-Befehl an. Er kann unterschiedliche Werte annehmen. Der Eintrag relative beschreibt den Standardzustand (=Container scrollt mit nach unten). Der Eintrag fixed macht es hier möglich den Container auf einer Seite festzusetzen. Fügen wir diesen hinzu ist die Größe des Containers wichtig und seine Position. Die Größe hatten wir bereits angegeben; fehlt also nur noch die Positionsangabe horizontal und vertikal.
Ich möchte, dass der Text rechts oben auf der Webseite mit einem entsprechenden Abstand stehen bleibt - auch wenn ich scrolle.
Dazu füge ich nun die entsprechende Zeilen ein (Siehe Zeile 19-21).
body {
background-color: #15323F;
}
.hochkant {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #FFFFFF;
font-size: 50px;
font-weight: bold;
width: 520px;
height: 70px;
display: block;
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
right: -200px;
top: 50px;
position: fixed;
}
Die Angabe des Abstands mit right: -200px gibt dabei den Abstand von rechts an und in Kombination mit top: 50px den Abstand vom oberen, rechten Fensterrand.
Eine negative Zahl bei der Angabe von left oder right bedeutet, dass das Objekt nach links verschoben wird. Entsprechend wird der Container nach rechts verschoben wenn es ein positiver Wert ist.
Ob ich nun im Fenster nach unten scrolle oder nicht - der hochkant-Container bleibt immer an seiner Position - und zwar auch unabhängig von der vorhandenen Bildschirmbreite. Der Abstand oben und rechts bleibt von nun an immer gleich.
Um die bearbeiteten Ebenen in eine vorbestimmte Reihenfolge zu bekommen ist es sinnvoll, die div-Container - sofern sie sich überlappen können - entsprechend zu formatieren. Dazu steht der sog. z-index-Befehl zur Verfügung, den ich an anderer Stelle in einem Tutorial bereits gezeigt habe. Je höher dieser Wert ist, desto weiter vorne liegt die entsprechende Ebene.
Es macht also Sinn unseren hochkant-Container eine Ebene hinter den Text zu bringen mit z-index: -1 (die normale Ebene ist 0).
body {
background-color: #15323F;
}
.hochkant {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #FFFFFF;
font-size: 50px;
font-weight: bold;
width: 520px;
height: 70px;
display: block;
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
right: -200px;
top: 50px;
position: fixed;
z-index: -1;
}
.fliesstext {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #B14400;
font-size: 40px;
font-weight: bold;
display: block;
}
}
Das Ergebnis sieht dann so aus:
Hier gut erkennbar: die orangene Schrift befindet sich vor dem hochkant-Container. Natürlich lassen sich die Ebenen auch noch mit einer entsprechenden Transparenz versehen um weitere interessante Effekte zu erzielen - probiert es aus. Auch dazu gibt es bereits ein Tutorial von mir (''Halbtransparente Ebenen'').
Ich hoffe, das Tutorial war hilfreich.
Ich wünsche viel Erfolg beim drehen und fixieren von Texten, bzw. Ebenen.