Belajar Koding HTML & CSS Bagian 26: Membuat Text Transformation

1) Apa itu text-transform?

text-transform mengatur bagaimana huruf pada elemen ditampilkan: semuanya uppercase, semuanya lowercase, kapitalisasi tiap kata, atau kembali ke default — hanya merubah tampilan, bukan isi sumber (HTML).

2) Nilai-nilai umum

· none — default, tidak ada transformasi.

· uppercase — semua huruf jadi BESAR.

· lowercase — semua huruf jadi kecil.

· capitalize — setiap kata diawali huruf besar.
Selain itu ada nilai lain spesifik (mis. full-width, full-size-kana) dan nilai global (inherit, initial, dll). Untuk daftar lengkap dan detail per-browser lihat dokumentasi MDN / CSS-Tricks. (MDN Web Docs)

3) Contoh kode lengkap (HTML + CSS)

Salin-tempel file ini dan buka di browser (atau coba di CodePen / JSFiddle):

<!DOCTYPE html>

<html lang="id">

<head>

  <meta charset="utf-8" />

  <meta name="viewport" content="width=device-width,initial-scale=1" />

  <title>Contoh text-transform</title>

  <style>

    body {

      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;

      padding: 24px;

      line-height: 1.6;

      background: #f7f9fb;

      color: #111;

    .card {

      background: #fff;

      border-radius: 8px;

      box-shadow: 0 6px 14px rgba(18, 38, 63, 0.08);

      padding: 18px;

      margin-bottom: 16px;

    /* text-transform examples */

    .none       { text-transform: none; }

    .uppercase  { text-transform: uppercase; }

    .lowercase  { text-transform: lowercase; }

    .capitalize { text-transform: capitalize; }

    /* tambahan: contoh pada tombol */

    .btn {

      display: inline-block;

      padding: 10px 14px;

      border-radius: 6px;

      text-decoration: none;

      background: #0b74de;

      color: white;

      margin-top: 8px;

  </style>

</head>

<body>

  <h1>Contoh Properti <code>text-transform</code></h1>

  <div class="card">

    <h2>Original (HTML source):</h2>

    <p>This is a Sample Text — Mixed Case Example.</p>

    <small>Perhatikan ini adalah teks asli dalam HTML.</small>

  </div>

  <div class="card">

    <h2>text-transform: none</h2>

    <p class="none">This is a Sample Text — Mixed Case Example.</p>

  </div>

  <div class="card">

    <h2>text-transform: uppercase</h2>

    <p class="uppercase">This is a Sample Text — Mixed Case Example.</p>

  </div>

  <div class="card">

    <h2>text-transform: lowercase</h2>

    <p class="lowercase">This is a Sample Text — Mixed Case Example.</p>

  </div>

  <div class="card">

    <h2>text-transform: capitalize</h2>

    <p class="capitalize">this is a sample text — mixed case example.</p>

    <small>Catatan: `capitalize` mengubah huruf pertama tiap kata menjadi huruf besar (rendered), bukan mengganti setiap huruf yang sudah kapital di tengah kata.</small>

  </div>

  <div class="card">

    <h2>Contoh pada elemen UI</h2>

    <a class="btn uppercase" href="#">lihat lebih lanjut</a>

  </div>

</body>

</html>

Output Kodingan Text Transformation

Hasil yang terlihat di browser:

· Bagian uppercase akan menampilkan semua huruf besar.

· Bagian lowercase akan menampilkan semua huruf kecil.

· Bagian capitalize membuat huruf awal tiap kata menjadi besar (contoh: this is → This Is).

4) Tips & caveats (praktis)

· capitalize tidak akan “memperbaiki” teks yang seluruhnya ditulis UPPERCASE sebelumnya — jika teks di HTML sudah UPPERCASE, capitalize tidak menurunkan huruf yang bukan di awal kata. Untuk masalah seperti itu, gunakan lowercase lalu capitalize dengan selector bertingkat jika perlu (hati-hati dengan i18n). (Kasus nyata dibahas di forum/StackOverflow). (Stack Overflow)

· Karena ini hanya presentasi visual, jangan mengandalkan text-transform untuk data yang sensitif pada huruf besar/kecil (mis. password, username, case-sensitive IDs). Untuk data semacam itu, solusi harus diterapkan di server atau JS sesuai aturan bisnis.

· text-transform diwariskan (inherited), jadi jika ditetapkan pada container, semua anak akan terpengaruh kecuali ditimpa.

Referensi

· MDN https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

· CSS https://css-tricks.com/almanac/properties/t/text-transform

· W3Schools https://www.w3schools.com/css/css_text_transformation.asp

· StackOverflow https://stackoverflow.com/questions/52165435/why-css-text-transform-capitalize-not-working

Belajar Koding HTML & CSS Bagian 26: Membuat Text Transformation

2) Nilai-nilai umum

3) Contoh kode lengkap (HTML + CSS)

4) Tips & caveats (praktis)

Referensi

0 Response to "Belajar Koding HTML & CSS Bagian 26: Membuat Text Transformation"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel