Penggunaan text-transform
Misalnya Anda menulis artikel yang menonjolkan penekanan makna. Misalnya, paragraf pertama ditampilkan seperti biasa, paragraf kedua ditampilkan dalam huruf besar. Paragraf ketiga ditampilkan dalam huruf kecil semua. Jika menggunakan cara manual, misalnya paragraf kedua, Anda harus mengaktifkan tombol CAPSLOCK keyboard saat mengetik – lalu mematikannya untuk paragraf ketiga. Tetapi dengan properti text-transform, Anda bisa mengubah seluruh kata ke huruf besar atau ke huruf kecil secara otomatis. Menghemat waktu dan efektif.
Atribut properti text-transform
none : tidak memberikan efek apapun, menampilkan teks seperti saat diketik.
uppercase : mengubah semua kata ke huruf besar.
lowercase : mengubah semua kata ke huruf kecil.
capitalize : mengubah semua huruf di awal kata ke huruf besar.
full-width : menampilkan kata dalam mode full-width.
Sintak penulisan text-transform
text-transform: atribut;
Contoh: text-transform: capitalize;
Contoh: texttransf.html
<!DOCTYPE HTML>
<html>
<head>
<title>Properti text-transform css</title>
<style type="text/css">
p.none{text-transform:none;}
p.upper{text-transform:uppercase;}
p.lower{text-transform:lowercase;}
p.capt{text-transform:capitalize;}
p.fullw{text-transform:full-width;}
</style>
</head>
<body>
<p class="none">-Tidak memberikan efek apapun. Persis seperti aslinya.</p>
<p class="upper">-Kalimat ini ditampilkan semua huruf besar.</p>
<p class="lower">-Sedangkan KALIMAT iNi SemuaNya ditampilkan dalam HURUF KECIL.</p>
<p class="capt">-setiap awal huruf kata pada kalimat ini, semuanya huruf besar.</p>
<p class="fullw">-Kalau yang ini full-width. Beginilah tampilannya.</p>
</body>
</html>Tampilan di browser Firefox:
 |
| Tampilan text-transform di Firefox. |
Referensi tulisan:
- text-transform Css; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 06 April 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Tidak ada komentar:
Posting Komentar