W3.Testo CSS
Allineamento del testo
Le classi w3-left-align e w3-right-align vengono utilizzate per allineare il testo.
Testo allineato a sinistra.
Testo allineato a destra.
Esempio
<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>
Elementi di centraggio
La classe w3-center viene utilizzata per centrare gli elementi:
Contenuto centrato
Un po' di testo centrato.
Esempio
<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>
Testo ampio
La classe w3-wide specifica un testo più ampio:
Questo testo è normale.
Questo testo è più ampio.
Esempio
<p class="w3-wide">The w3-wide class specifies a wider text.</p>
Opacità del testo
La classe w3-opacity è progettata per funzionare con tutti i colori:
Opacità del testo
Opacità del testo
Opacità del testo
Opacità del testo
Esempio
<div class="w3-panel w3-pink">
<h2 class="w3-opacity">Text Opacity</h2>
</div>
Ombra del testo
La proprietà text-shadow CSS3 può essere utilizzata per aggiungere effetti di ombra o sfocatura al testo:
Ombra del testo
Ombra del testo
Ombra del testo
Ombra del testo
Esempio
<h2
class="w3-blue" style="text-shadow:1px 1px 0 #444">Text Shadow</h2>
Effetti speciali
Opacità del testo + Grassetto
Testo giallo + Ombra + Grassetto
Testo arancione + Ombra + Grassetto
Esempio
<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 non funziona in IE 9 e versioni precedenti.