Teks W3.CSS
Perataan Teks
Kelas w3-left-align dan w3-right-align digunakan untuk menyelaraskan teks.
Teks rata kiri.
Teks rata kanan.
Contoh
<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>
Elemen pemusatan
Kelas w3-center digunakan untuk menyelaraskan elemen-elemen:
Konten Terpusat
Beberapa teks terpusat.
Contoh
<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>
Teks Lebar
Kelas w3-wide menentukan teks yang lebih luas:
Teks ini biasa saja.
Teks ini lebih luas.
Contoh
<p class="w3-wide">The w3-wide class specifies a wider text.</p>
Opasitas Teks
Kelas opacity w3 dirancang untuk bekerja dengan semua warna:
Opasitas Teks
Opasitas Teks
Opasitas Teks
Opasitas Teks
Contoh
<div class="w3-panel w3-pink">
<h2 class="w3-opacity">Text Opacity</h2>
</div>
Bayangan teks
Properti text-shadow CSS3 dapat digunakan untuk menambahkan efek bayangan atau blur ke teks:
Bayangan teks
Bayangan teks
Bayangan teks
Bayangan teks
Contoh
<h2
class="w3-blue" style="text-shadow:1px 1px 0 #444">Text Shadow</h2>
Efek khusus
Opacity Teks + Tebal
Teks Kuning + Bayangan + Tebal
Teks Oranye + Bayangan + Tebal
Contoh
<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 tidak berfungsi di IE 9 dan sebelumnya.