Text W3.CSS
Zarovnání textu
Třídy w3-left-align a w3-right-align se používají k zarovnání textu.
Text zarovnaný doleva.
Text zarovnaný vpravo.
Příklad
<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>
Středící prvky
Třída w3-center se používá k zarovnání prvků na střed:
Obsah na střed
Nějaký text na střed.
Příklad
<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>
Široký text
Třída w3-wide specifikuje širší text:
Tento text je normální.
Tento text je širší.
Příklad
<p class="w3-wide">The w3-wide class specifies a wider text.</p>
Neprůhlednost textu
Třída w3-opacity je navržena tak, aby fungovala se všemi barvami:
Neprůhlednost textu
Neprůhlednost textu
Neprůhlednost textu
Neprůhlednost textu
Příklad
<div class="w3-panel w3-pink">
<h2 class="w3-opacity">Text Opacity</h2>
</div>
Textový stín
Vlastnost CSS3 text-shadow lze použít k přidání efektů stínu nebo rozmazání do textu:
Textový stín
Textový stín
Textový stín
Textový stín
Příklad
<h2
class="w3-blue" style="text-shadow:1px 1px 0 #444">Text Shadow</h2>
Zvláštní efekty
Neprůhlednost textu + tučné písmo
Žlutý text + stín + tučné písmo
Oranžový text + stín + tučné písmo
Příklad
<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>
Text Shadow nefunguje v IE 9 a starších verzích.