Pada panduan CSS kali ini kita akan mempelajari Cara Mengubah Tampilan Huruf Kapital (Case) HTML dengan CSS. Property yang akan kita pelajari ialah text-transform dan font-variant.
Cara Mengubah Huruf Kapital teks dengan CSS
Kadang kala kita ingin mengubah sebuah kalimat menjadi huruf besar seluruh atau huruf kecil seluruh. Bagi kebutuhan ini, CSS menyediakan properti text-transform. Sama seperti program word processing seperti Microsoft Word, kita dapat mengubah tampilan teks menjadi huruf besar seluruh (uppercase), menjadi huruf kecil seluruh (lowercase) atau membangun huruf pertama-tama setiap kalimat menjadi huruf besar (capitalize).
Properti text-transform dapat diisi dengan 4 nilai: uppercase, lowercase, capitalize dan none. Khusus bagi nilai none, nilai ini akan menghapus seluruh efek dari text-transform.
Biasanya, properti text-transform digunakan bagi bagian tertentu dari halaman web agar sama pada tampilan, seperti judul sebuah artikel.
Cara Mengubah Huruf Teks menjadi Small Caps
Seandainya text-transform belum mencukupi, CSS menyediakan sebuah properti lain bagi mengubah tampilan teks, yakni font-variant. Properti font-variant hanya dapat diisi dengan 2 nilai, yakni: small-caps dan normal.
font-variant: small-caps akan membangun teks menjadi sedikit lebih kecil, namun dengan huruf besar seluruh. Fitur ini dapat digunakan bagi membangun kesan ‘old-school’ pada teks, dan cocok digunakan bagi judul artikel. Nilai normal bagi font-variant digunakan bagi menghapus efek small-caps yang terdapat.
Panduan Cara Mengubah Huruf Kapital (Case) HTML dengan CSS
Selaku bahan panduan, berikut ialah contoh kode HTML dan CSS pada pemakaian properti text-transform dan font-variant:
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/><title>Belajar text-transform dan font-variant</title><br/><style type=text/css><br/> .upper { text-transform: uppercase; }<br/> .lower { text-transform: lowercase; }<br/> .cap { text-transform: capitalize; }<br/> .small { font-variant: small-caps; }<br/></style><br/></head><br/><br/><body><br/> <h2>Belajar CSS: text-transform dan font-variant</h2><br/> <p class=upper>KALIMAT dengan text-transform: UPPERCASE</p><br/> <p class=lower>KALIMAT dengan text-transform: lowercase</p><br/> <p class=cap>KALIMAT dengan text-transform: Capitalize</p><br/> <p class=small>Kalimat dengan font-variant: small-caps</p><br/></body><br/></html> |
Mengubah tampilan huruf dengan text-transform dan font-variant lebih banyak digunakan bagi bagian-bagian urgen dari web seperti judul artikel, navigasi, atau sidebar. Efek yang diraih membangun tampilan ahir menjadi seragam, terlepas dari cara penulisan teks yang diaplikasikan.
eBook CSS Uncover Duniailkom
Sumber https://www.duniailkom.com/
