W3.CSS- Text
Textausrichtung
Die Klassen w3-left-align und w3-right-align werden zum Ausrichten von Text verwendet.
Linksbündiger Text.
Rechtsbündiger Text.
Beispiel
<div class="w3-container w3-border w3-large">
<div
class="w3-left-align"><p>Left aligned text.</p></div>
<div
class="w3-right-align"><p>Right aligned text.</p></div>
</div>
Zentrierelemente
Die Klasse w3-center wird verwendet, um Elemente zu zentrieren:
Zentrierter Inhalt
Etwas zentrierter Text.
Beispiel
<div class="w3-container w3-center">
<h2>Centered Content</h2>
<img src="img_car.jpg" alt="car" style="width:80%;max-width:320px">
<p>Some centered text.</p>
</div>
Breiter Text
Die Klasse w3-wide gibt einen breiteren Text an:
Dieser Text ist normal.
Dieser Text ist breiter.
Beispiel
<p class="w3-wide">The w3-wide class specifies a wider text.</p>
Textdeckkraft
Die Klasse w3-opacity ist so konzipiert, dass sie mit allen Farben funktioniert:
Textdeckkraft
Textdeckkraft
Textdeckkraft
Textdeckkraft
Beispiel
<div class="w3-panel w3-pink">
<h2 class="w3-opacity">Text Opacity</h2>
</div>
Textschatten
Die CSS3-Eigenschaft text-shadow kann verwendet werden, um Text mit Schatten- oder Unschärfeeffekten zu versehen:
Textschatten
Textschatten
Textschatten
Textschatten
Beispiel
<h2
class="w3-blue" style="text-shadow:1px 1px 0 #444">Text Shadow</h2>
Spezialeffekte
Textdeckkraft + Fett
Gelber Text + Schatten + Fett
Oranger Text + Schatten + Fett
Beispiel
<div class="w3-panel w3-pink">
<h1 class="w3-opacity">
<b>Text Opacity + Bold</b></h1>
</div>
<div class="w3-panel w3-amber">
<h1 class="w3-text-yellow"
style="text-shadow:1px 1px 0 #444">
<b>Yellow Text + Shadow + Bold</b></h1>
</div>
<div class="w3-panel w3-blue">
<h1 class="w3-text-orange"
style="text-shadow:1px 1px 0 #444">
<b>Orange Text + Shadow + Bold</b></h1>
</div>
Textschatten funktioniert nicht in IE 9 und früher.