Membuat Transformasi Teks dengan CSS


Properti transformasi teks dalam CSS digunakan untuk mengubah sebuah ukuran teks, ukuran yang dimaksud bukan seberapa besar teks tersebut, tetapi huruf kecil atau huruf besar (kapital) pada teks. Misal huruf kecil diubah menjadi huruf besar (kapital) atau sebaliknya, huruf kapital dijadikan menjadi huruf kecil. 

Properti transformasi teks di deklarasikan dengan text-transform. Terdapat 3 value atau nilai yang sering kita pakai dalam melakukan transformasi teks, yaitu:

  • Capitalize 

Nilai Capitalize dalam properti text-transform akan memberikan transformasi huruf besar pada huruf pertama di setiap kata. 

  • Uppercase

Uppercase memberikan nilai transformasi mengubah semua huruf menjadi huruf besar/ kapital.

  • Lowercase

Lowercase adalah nilai kebalikan dari Uppercase, yaitu memberikan transformasi atau mengubah semua huruf menjadi huruf kecil.

 

Untuk lebih mudah dipahami, mari kita langsung ambil contoh. Seperti biasa kita buat dahulu sintak CSS seperti dibawah ini.

<style type="text/css">

.cap {
  text-transform: capitalize;
  }
.up {
  text-transform: uppercase;
  }
.low {
  text-transform: lowercase;
  }

</style>

Kemudian kita membuat contoh teks seperti dibawah ini.

<html>
 <head>
  <title> Transfomasi Teks dengan CSS </title>
 </head>
 <body>

<h2 class="cap"> contoh transformasi teks capitalize.</h2>

<h2 class="up"> Contoh Transformasi Teks Uppercase.</h2>

<h2 class="low"> CONTOH TRANSFORMASI TEKS LOWERCASE.</h2>

</body>
</html>

Dari sintak CSS dan HTML yang telah kita buat, maka akan menghasilkan dokumen seperti gambar dibawah ini.

Transformasi Teks dengan CSS

Dari contoh diatas, dapat kita ambil kesimpulan sebagai berikut.

Pada teks pertama, saya menuliskan kalimat yang semuanya terdiri dari huruf kecil. Dengan menggunakan transformasi teks atau text-transform capitalize, maka secara otomatis akan mengubah teks menjadi huruf besar hanya pada huruf pertama disetiap kata.

Pada teks kedua, saya menuliskan sebuah kalimat dengan huruf pertama kapital pada setiap kata. Tetapi saya melakukan transformasi teks dengan menggunakan nilai Uppercase, jadi teks berubah menjadi huruf besar/ kapital semuanya.

Sebaliknya pada teks ketiga, saya menuliskan teks dengan menggunakan huruf besar/ kapital. Namun setelah menggunakan nilai text-transform Lowercase, semua teks tersebut berubah menjadi huruf kecil semua.

 

Baiklah sobat akawebster, demikian belajar transformasi teks kita menggunakan properti text-transform didalam CSS. Semoga tulisan singkat ini mudah dipahami dan bermanfaat untuk kita bersama.


Membuat Efek Bayangan Pada Teks dengan CSS    -   


Berikan Komentar Anda