CSS Text Transformation (Tutorial CSS Part 34)

Gambar 34 : Logo CSS

Saat membuat tampilan website, kadang kita pengen teks terlihat lebih rapi, tegas, atau menarik. Nah, salah satu cara gampang buat ngatur tampilan teks adalah pakai CSS Text Transformation. Properti ini bisa bantu kamu ubah teks jadi huruf besar semua, huruf kecil semua, atau huruf besar di awal setiap kata, tanpa harus ngetik ulang.

1. Apa itu Text Transformation?

Text Transformation adalah teknik di CSS yang digunakan untuk mengubah format huruf dalam teks. Dengan hanya satu baris kode, kamu bisa ubah semua huruf jadi kapital, kecil, atau kapital di awal kata. Praktis banget kan?

text-transform: uppercase;

Kode di atas bakal bikin semua huruf di elemen HTML jadi huruf besar semua.

2. Properti CSS Text Transformation

CSS menyediakan beberapa nilai yang bisa kamu gunakan dalam text-transform. Ini dia tabelnya:

Nilai	Fungsi
`none`	Tidak mengubah teks (default).
`uppercase`	Mengubah semua huruf jadi huruf besar.
`lowercase`	Mengubah semua huruf jadi huruf kecil.
`capitalize`	Mengubah huruf pertama di setiap kata jadi huruf besar.
`inherit`	Mengambil nilai dari elemen induknya.
`initial`	Mengatur ke nilai default browser.
`unset`	Menghapus nilai properti (jadi default atau turunan).

Contoh Penggunaan

<!DOCTYPE html>  
<html>  
  <head>  
    <style>  
      .besar {  
        text-transform: uppercase;  
      }  
    
      .kecil {  
        text-transform: lowercase;  
      }  
    
      .kapital-awal {  
        text-transform: capitalize;  
      }  
    </style>  
  </head>  
  <body>  
    <p class="besar">ini jadi huruf besar semua</p>  
    <p class="kecil">INI AKAN JADI huruf kecil</p>  
    <p class="kapital-awal">teks ini jadi Kapital Di Awal Kata</p>  
  </body>  
</html>

Hasilnya:

Gambar 34.1 : Contoh CSS Text Transformation

Kapan Text Transformation Digunakan?

Judul → Biar lebih menonjol, pakai uppercase.
Nama produk → Cocok pakai capitalize.
Deskripsi atau catatan kecil → Bisa pakai lowercase.

Penutup

CSS Text Transformation itu sederhana, tapi sangat berguna. Cuma dengan satu baris kode, kamu bisa ubah gaya huruf tanpa ribet. Cocok banget buat kamu yang pengen tampilan teks di web terlihat lebih rapi dan profesional.

Kalau kamu suka artikel ini, jangan lupa share dan coba sendiri di proyek web kamu, ya!

filesop.com