W3.CSS Teks
Teksbelyning
Die w3-links-belyn- en die w3-regs-belyningsklasse word gebruik om teks te belyn.
Linksbelynde teks.
Regsbelynde teks.
Voorbeeld
<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>
Sentrerende elemente
Die w3- middelklas word gebruik om elemente in lyn te bring:
Gesentreerde inhoud
Sommige gesentreerde teks.
Voorbeeld
<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>
Wye teks
Die w3-wye klas spesifiseer 'n wyer teks:
Hierdie teks is normaal.
Hierdie teks is wyer.
Voorbeeld
<p class="w3-wide">The w3-wide class specifies a wider text.</p>
Teks Deursigtigheid
Die w3-deursigtigheidklas is ontwerp om met alle kleure te werk:
Teks Deursigtigheid
Teks Deursigtigheid
Teks Deursigtigheid
Teks Deursigtigheid
Voorbeeld
<div class="w3-panel w3-pink">
<h2 class="w3-opacity">Text Opacity</h2>
</div>
Teks skaduwee
Die CSS3 teks-skadu-eienskap kan gebruik word om skadu- of vervaag-effekte by teks te voeg:
Teks skaduwee
Teks skaduwee
Teks skaduwee
Teks skaduwee
Voorbeeld
<h2
class="w3-blue" style="text-shadow:1px 1px 0 #444">Text Shadow</h2>
Spesiale effekte
Teks Deursigtigheid + Vet
Geel teks + skaduwee + vetdruk
Oranje teks + skaduwee + vetdruk
Voorbeeld
<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 werk nie in IE 9 en vroeër nie.