Cara Mengubah Tulisan Huruf Kecil Menjadi Hurup Besar dan Sebaliknya – CSS

Tutorial Belajar Css kali ini akan membahas tentang Mengubah Tulisan Huruf Kecil Menjadi Hurup Besar dan huruf besar menjadi huruf kecil menggunakan CSS

Untuk mengubah tulisan huruf kecil menjadi huruf besar dan huruf besar menjadi huruf kecil dengan css kita bisa memakai Property text-transform dan font-variant.

Mengubah huruf Kapital dalam CSS

Property ini fungsinya sama seperti di ms word. Dimana kita bisa mengubah tampilan teks menjadi huruf besar semua (uppercase), menjadi huruf kecil semua (lowercase) atau membuat huruf pertama setiap kalimat menjadi huruf besar (capitalize).

Properti text-transform terdiri dari 4 nilai uppercase, lowercase, capitalize serta none. Dimana nilai none ini untuk menghilangkan semua efek dari nilai yang lain.

Saya sering memakai text-transform dibagian judul artikel dalam blog saya.

Contoh text-transform

<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>

<p class="uppercase">Contoh dari transform.</p>
<p class="lowercase">Contoh dari transform.</p>
<p class="capitalize">Contoh dari transform.</p>

</body>
</html>

Font Variant

Property Font Variant digunakan untuk membuat tulisan huruf kecil menjadi huruf besar semua.
Font-Variant hanya mempunyai 2 nilai yaitu small-caps dan normal.
Font-Variant masuk kedalam kategori font css, sedangkan text-transform masuk ke kategori text formating.

Properti Font-Variant berbeda dengan text-transform, dalam font-variant huruf kecil akan diubah menjadi huruf besar, huruf besar juga akan diubah menjadi huruf besar.

Namun perlu diketahui huruf kecil yang diubah ke huruf besar akan memiliki ukuran yang lebih kecil (lebih pendek), sedangkan huruf besar ukurannya lebih tinggi.

Walaupun semua huruf nya huruf besar tapi tinggi dari huruf nya berbeda. Untuk lebih jelas kita lihat contoh dibawah ini

Contoh font-variant

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
}

p.small {
font-variant: small-caps;
}
</style>
</head>
<body>

<p class="normal">Nama blog saya adalah PhpdanMysql.com.</p>
<p class="small">Nama blog saya adalah PhpdanMysql.com.</p>
</body>
</html>

coba perhatikan dari contoh font-variant ini pada paragraf kedua hurufnya huruf besar namun tingginya tidak sama.

Keyword:

  • cara cepat mengubah huruf besar 2018

Get real time updates directly on you device, subscribe now.

loading...

Ingin Berkomentar?

×
Lewat ke baris perkakas