Skip to main content

B.4.1.10. Text Transform

Di dalam CSS kita juga bisa melakukan transformasi pada teks dengan menggunakan properti text-transform.

Dengan text-transform, temen-temen bisa mengubah teks menjadi huruf besar semua, huruf kecil semua, atau huruf besar di setiap awal kata. Nilai yang bisa digunakan antara lain uppercase, lowercase, dan capitalize.

Untuk lebih jelasnya, coba temen-temen perhatikan kode di bawah:

<h1 class="to-lowercase">UPPERCASE</h1>
<h1 class="to-uppercase">lowercase</h1>
<h1 class="to-capitalize">capitalized text</h1>

Normal nya output dari kode di atas adalah:

Output

Setelahnya kita akan coba mengubah UPPERCASE menjadi huruf kecil semua, lowercase menjadi huruf besar semua dan capitalized text menjadi huruf besar di setiap huruf pertama pada setiap kata-nya.

.to-lowercase {
  text-transform: lowercase;
}

.to-uppercase {
  text-transform: uppercase;
}

.to-capitalize {
  text-transform: capitalize;
}

Maka sekarang hasilnya akan terlihat seperti gambar di bawah ini:

Output

info

Source code pada chapter ini teresedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.4-properti-css/B.4.1-text-styling/B.4.1.10-text-transform