W3.CSS Metni
Metin hizalama
Metni hizalamak için w3-left-align ve w3-right-align sınıfları kullanılır.
Sola hizalanmış metin.
Sağa hizalanmış metin.
Örnek
<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>
Merkezleme Elemanları
w3-center sınıfı , öğeleri merkeze hizalamak için kullanılır:
Ortalanmış İçerik
Bazı ortalanmış metin.
Örnek
<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>
Geniş Metin
w3-wide sınıfı daha geniş bir metin belirtir :
Bu metin normaldir.
Bu metin daha geniştir.
Örnek
<p class="w3-wide">The w3-wide class specifies a wider text.</p>
Metin Opaklığı
w3-opacity sınıfı , tüm renklerle çalışacak şekilde tasarlanmıştır:
Metin Opaklığı
Metin Opaklığı
Metin Opaklığı
Metin Opaklığı
Örnek
<div class="w3-panel w3-pink">
<h2 class="w3-opacity">Text Opacity</h2>
</div>
Metin gölgesi
CSS3 text-shadow özelliği metne gölge veya bulanıklık efektleri eklemek için kullanılabilir:
Metin gölgesi
Metin gölgesi
Metin gölgesi
Metin gölgesi
Örnek
<h2
class="w3-blue" style="text-shadow:1px 1px 0 #444">Text Shadow</h2>
Özel efektler
Metin Opaklığı + Kalın
Sarı Metin + Gölge + Kalın
Turuncu Metin + Gölge + Kalın
Örnek
<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>
Metin Gölgesi, IE 9 ve önceki sürümlerde çalışmaz.