20/03/2016

CSS Text Transform (Konversi Teks dalam Karakter Huruf Besar dan Huruf Kecil)

20/03/2016

Pada umumnya, CSS Text Transform digunakan untuk mengatur judul artikel, deskripsi, atau huruf pertama pada baris teks. Nilai dasar (default) dalam sebuah elemen adalah none, artinya selama kita tidak menentukan aturan css teks tranformer, maka efek konversi karakter teks tidak akan muncul, kecuali sebagaimana keadaan penulisannya.

Fungsi CSS Text Transform :: Menentukan Huruf Kapital (Huruf Besar) pada Teks

CSS Text Transform berfungsi untuk mengkonversi karakter teks menjadi huruf besar (kapital) atau huruf kecil di awal kalimat, awal kata, atau seluruh karakter huruf.

Nilai Properti CSS Text Transform

  • none
  • uppercase
  • lowercase
  • cpitalize
  • inherit
  1. none
    • tidak menerapkan gaya konversi teks ke huruf besar dalam bentuk apapun, sehingga teks hanya akan ditampilkan sebagaimana keadaaan penulisannya
  2. uppercase
    • Semua karakter teks dikonversi menjadi huruf besar (kapital)
  3. lowercase
    • Semua karakter teks dikonversi menjadi huruf kecil
  4. capitalize
    • Mengkonversi karakter pertama dari setiap kata dalam kalimat, dan membiarkan karakter sisanya dalam keadaan normal
  5. inherit
    • Konversi teks menjadi huruf besar atau kecil sesuai aturan CSS yang telah ditentukan pada elemen induknya.

Sintaks CSS Text Transform

Sintaks CSS

text-Transform: none;
text-Transform: uppercase;
text-Transform: lowercase;
text-Transform: capitalize;
text-Transform: inherit;
Tag HTML yang Mendukung CSS Text Transform
  • html
  • body
  • div
  • H1
  • H2
  • H3
  • H4
  • H5
  • H6
  • p
  • a
  • b
  • i
  • u
  • abbr
  • acronym
  • address
  • baseFont
  • bdo
  • big
  • blink
  • blockQuote
  • button
  • caption
  • center
  • cite
  • code
  • col
  • colGroup
  • dd
  • del
  • dfn
  • dir
  • dl
  • dt
  • em
  • fieldSet
  • font
  • form
  • input:button
  • input:file
  • input:password
  • input:reset
  • input:search
  • input:submit
  • input:text
  • textArea
  • ins
  • isIndex
  • kbd
  • xmp
  • label
  • legend
  • listing
  • marquee
  • menu
  • nobr
  • ol
  • ul
  • li
  • optGroup
  • option
  • plainText
  • pre
  • q
  • rt
  • ruby
  • s
  • samp
  • select
  • small
  • span
  • strike
  • strong
  • sub
  • sup
  • table
  • tBody
  • td
  • th
  • tr
  • tt
  • tFoot
  • tHead
  • var
Contoh Penerapan Sintaks CSS Text Transform

Kembali ke CSS Font dan Teks