Texte W3.CSS
Alignement du texte
Les classes w3-left-align et w3-right-align sont utilisées pour aligner le texte.
Texte aligné à gauche.
Texte aligné à droite.
Exemple
<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>
Éléments de centrage
La classe w3-center est utilisée pour centrer les éléments :
Contenu centré
Quelques textes centrés.
Exemple
<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>
Texte large
La classe w3-wide spécifie un texte plus large :
Ce texte est normal.
Ce texte est plus large.
Exemple
<p class="w3-wide">The w3-wide class specifies a wider text.</p>
Opacité du texte
La classe w3-opacity est conçue pour fonctionner avec toutes les couleurs :
Opacité du texte
Opacité du texte
Opacité du texte
Opacité du texte
Exemple
<div class="w3-panel w3-pink">
<h2 class="w3-opacity">Text Opacity</h2>
</div>
Ombre de texte
La propriété CSS3 text-shadow peut être utilisée pour ajouter des effets d'ombre ou de flou au texte :
Ombre de texte
Ombre de texte
Ombre de texte
Ombre de texte
Exemple
<h2
class="w3-blue" style="text-shadow:1px 1px 0 #444">Text Shadow</h2>
Effets spéciaux
Opacité du texte + Gras
Texte jaune + Ombre + Gras
Texte orange + Ombre + Gras
Exemple
<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 ne fonctionne pas dans IE 9 et versions antérieures.