W3.CSS- tekst
Tekstuitlijning
De klassen w3-left-align en w3-right-align worden gebruikt om tekst uit te lijnen.
Links uitgelijnde tekst.
Rechts uitgelijnde tekst.
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>
Centreerelementen
De klasse w3-center wordt gebruikt om elementen uit te lijnen:
Gecentreerde inhoud
Wat gecentreerde tekst.
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>
Brede tekst
De klasse w3-wide specificeert een bredere tekst:
Deze tekst is normaal.
Deze tekst is breder.
Voorbeeld
<p class="w3-wide">The w3-wide class specifies a wider text.</p>
Tekstdekking
De klasse w3-opacity is ontworpen om met alle kleuren te werken:
Tekstdekking
Tekstdekking
Tekstdekking
Tekstdekking
Voorbeeld
<div class="w3-panel w3-pink">
<h2 class="w3-opacity">Text Opacity</h2>
</div>
Schaduw tekst
De CSS3-eigenschap text-shadow kan worden gebruikt om schaduw- of vervagingseffecten aan tekst toe te voegen:
Schaduw tekst
Schaduw tekst
Schaduw tekst
Schaduw tekst
Voorbeeld
<h2
class="w3-blue" style="text-shadow:1px 1px 0 #444">Text Shadow</h2>
Speciale effecten
Tekstdekking + vet
Gele tekst + schaduw + vet
Oranje tekst + schaduw + vet
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 werkt niet in IE 9 en eerder.