Terkadang pada suat kondisi diinginkan untuk merubah kalimat menjadi huruf besar semua atau huruf kecil semua atau setiap awal kata menjadi di awali huruf besar. Seperti contoh jika di program miscrosoft word, coba anda ketik sebuah kalimat. Kemudian pilih/block kalimat tersebut tekan Shift+F3 berulang kali, coba perhatikan apa yang terjadi? Ya, huruf akan berubah, ajdi kecil semua, besar semua atau awal kata dengan huruf besar.
Pada CSS ini juga bisa dilalukan. Untuk mengubah tampilan huruf kita tidak usah mengetik ulang kata/kalimat tersebut. Contoh : aKu BuKaN aNak aLAy. Dengan sebuah properties ini bisa diubah menjadi AKU BUKAN ANAK ALAY atau aku bukan anak alay atau Aku Bukan Anak Alay.
Properties yang digunakan untuk merubah huruf ini adalah text-transform dengan value : uppercase, lowercase, capitalize , none.
Uppercase digunakan untuk mengubah menjadi huruf besar semua, lowercase digunakan untuk huruf kecil semua. Sementara itu capitalize digunakan untuk bagian awal kata menggunakan huruf besar. Format penulisannya adalahh :
<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
<style type="text/css">
.upper { text-transform: uppercase; }
.lower { text-transform: lowercase; }
.cap { text-transform: capitalize; }
.small { font-variant: small-caps; }
</style>
</head>
<body>
<h3>Belajar CSS: text-transform dan font-variant</h3>
<p> tampilan Asli Aku buKAn aNaK aLAy</p>
<p class="upper"> UPPERCASE:Aku buKAn aNaK aLAy</p>
<p class="lower"> lowercase :Aku buKAn aNaK aLAy</p>
<p class="cap"> Capitalize : Aku buKAn aNaK aLAy</p>
<p class="small">font-variant small-caps : Aku buKAn aNaK aLAy</p>
</body>
</html>
Pada CSS ini juga bisa dilalukan. Untuk mengubah tampilan huruf kita tidak usah mengetik ulang kata/kalimat tersebut. Contoh : aKu BuKaN aNak aLAy. Dengan sebuah properties ini bisa diubah menjadi AKU BUKAN ANAK ALAY atau aku bukan anak alay atau Aku Bukan Anak Alay.
Properties yang digunakan untuk merubah huruf ini adalah text-transform dengan value : uppercase, lowercase, capitalize , none.
Uppercase digunakan untuk mengubah menjadi huruf besar semua, lowercase digunakan untuk huruf kecil semua. Sementara itu capitalize digunakan untuk bagian awal kata menggunakan huruf besar. Format penulisannya adalahh :
selector {text-transform: value;}Selain itu ada juga yang disebut dengan font-variant. Ini memiliki value : small-caps dan normal. small-caps digunakan untuk membuat ukuran teks lebih kecil dengan sedikit bentuk 'klasik'. Sementara untuk normal digunakan sebagai nilai untuk menghapus/ menormalkan kembali teks. Untuk contohnya bisa dijalankan kode HTML di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
<style type="text/css">
.upper { text-transform: uppercase; }
.lower { text-transform: lowercase; }
.cap { text-transform: capitalize; }
.small { font-variant: small-caps; }
</style>
</head>
<body>
<h3>Belajar CSS: text-transform dan font-variant</h3>
<p> tampilan Asli Aku buKAn aNaK aLAy</p>
<p class="upper"> UPPERCASE:Aku buKAn aNaK aLAy</p>
<p class="lower"> lowercase :Aku buKAn aNaK aLAy</p>
<p class="cap"> Capitalize : Aku buKAn aNaK aLAy</p>
<p class="small">font-variant small-caps : Aku buKAn aNaK aLAy</p>
</body>
</html>
Kegunaan text-transform dalam CSS ini adalah untuk penulisan judul. Beberapa website misalnya menerapkan judul dengan format huruf besar semua. Atau setiap awalan kata menggunakan huruf besar. Ini membantu menyeragamkan penulisan.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment