Tutorial CSS terusan- 8

Tutorial CSS terusan- 8

Cara Mengubah Tampilan Huruf Kapital (Case) Teks HTML

Cara Mengubah Huruf Kapital teks dengan CSS

Kadang kala kita ingin mengubah sebuah kalimat menjadi huruf besar semua atau huruf kecil semua. Untuk keperluan ini, CSS menyediakan properti text-transform. Sama seperti aplikasi word processing seperti Microsoft Word, 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 bisa diisi dengan 4 nilai: uppercase, lowercase, capitalize dan none. Khusus untuk nilai none, nilai ini akan menghapus semua efek dari text-transform.
Biasanya, properti text-transform digunakan untuk bagian tertentu dari halaman web agar sama dalam tampilan, seperti judul sebuah artikel.

Cara Mengubah Huruf Teks menjadi Small Caps

Jika text-transform belum mencukupi, CSS menyediakan sebuah properti lain untuk mengubah tampilan teks, yakni font-variant. Properti font-variant hanya bisa diisi dengan 2 nilai, yakni: small-caps dan normal.
font-variant: small-caps akan membuat teks menjadi sedikit lebih kecil, namun dengan huruf besar semua. Fitur ini bisa digunakan untuk membuat kesan ‘old-school’ dalam teks, dan cocok digunakan untuk judul artikel. Nilai normal untuk font-variant digunakan untuk menghapus efek small-caps yang ada.

Tutorial Cara Mengubah Huruf Kapital (Case) HTML dengan CSS

Sebagai bahan tutorial, berikut adalah contoh kode HTML dan CSS dalam penggunaan properti text-transform dan font-variant:

<!DOCTYPE html>
<html>
<head>
<title>Belajar text-transform dan font-variant</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>
   <h2>Belajar CSS: text-transform dan font-variant</h2>
   <p class="upper">KALIMAT dengan text-transform: UPPERCASE</p>
   <p class="lower">KALIMAT dengan text-transform: lowercase</p>
   <p class="cap">KALIMAT dengan text-transform: Capitalize</p>
   <p class="small">Kalimat dengan font-variant: small-caps</p>
</body>
</html>

 Mengubah tampilan huruf dengan text-transform dan font-variant lebih banyak digunakan untuk bagian-bagian penting dari web seperti judul artikel, navigasi, atau sidebar. Efek yang dihasilkan membuat tampilan akhir menjadi seragam, terlepas dari cara penulisan teks yang dipakai.

Cara Penulisan Singkat Property Font CSS

Cara Penulisan Singkat Property Font CSS

Jika anda mengikuti pembahasan tutorial belajar CSS tentang teks dari awal, paling tidak kita telah membahas 6 property text CSS, yakni: font-family, font-size, font-variant, font-weight, font-style dan line-height. Terkadang dalam pembuatan kode CSS, kita akan menggunakan seluruh property tersebut secara sekaligus. CSS menyediakan cara penulisan singkat untuk menyatukan property font kedalam 1 perintah, yakni: font.
Agar lebih mudah dipahami, berikut adalah contoh penulisan property font:

p {
   font: italic bold small-caps 16px/150% Arial, Helvetica, sans-serif;
}

Property font diatas bermaksud:
 Seluruh tag <p> akan ditampilkan dengan baris miring (italic), huruf tebal (bold), dalam bentuk small-caps, dengan ukuran font sebesar 16px, dan line-height sebesar 150%. Jenis font yang digunakan adalah Arial, Helvetica, sans-serif.

Aturan Penulisan Property font CSS

Dengan menggunakan penulisan property font seperti diatas, kita menyatukan 6 properti dalam 1 defenisi, namun dengan aturan sebagai berikut:


  • Kita tidak harus menggunakan ke 6 property sekaligus, namun property font-size dan font-family minimal harus dicantumkan, seperti contoh berikut: font: 1.2em Georgia, Times, serif;
  • Gunakan tanda spasi untuk memisahkan nilai dari sebuah property dengan property lainnya, dan gunakan tanda koma hanya untuk font-family.
  • Khusus untuk menulisan line-height, harus ditulis sesudah font-size dengan menggunakan tanda garis miring seperti berikut ini: 12px/14px atau 1.5em/120%.
  • 2 property terakhir harus diisi dengan font-size (atau font-size/line-height) diikuti dengan font-family secara berurutan. Property lainnya (font-variant, font-weight, dan font-style) ditulis sebelum kedua property ini, dan tidak harus berurutan. Sebagai contoh, kedua property ini diperbolehkan dan akan menghasilkan tampilan yang sama: 
  •  
  • font: italic bold small-caps 14px Arial;
    font: bold small-caps italic 14px Arial;
     
  • Jika kita tidak menuliskan seluruh property, maka property yang tidak ditulis akan di set menjadi normal. Hal ini akan menghapus efek turunan (inheritance) dari tag diatasnya. Sebagai contoh, jika kita mendefenisikan: 
  •  
  • body {
       font-syle: italic;
       font-weight: bold;
       font-size: 16px
       font-family: Georgia, Times, serif;
    }

    dan kemudian mendefenisikan:

    p {
       font: 14px sans-serif;
    }

    Tag <p> tidak akan tampil dengan italic dan bold walaupun tag <p> berada di bawah tag <body> (dimana efek inheritance CSS seharusnya akan berefek). Property font-syle dan font-weight akan di-reset menjadi normal. Dengan kata lain, jika anda hanya menuliskan font-size dan font-family saja seperti contoh tag <p> diatas, maka sebenarnya yang akan dijalankan oleh web browser adalah:

    p {
       font: normal normal 14px/normal sans-serif;
    }

    Nilai normal akan membuat efek turunan (inheritance CSS) tertimpa nilainya dengan nilai default web browser.

Tutorial Cara Penulisan Property Font CSS

Dalam contoh di bawah ini saya akan membuat beberapa paragraf dengan menggunakan penulisan singkat property font. Berikut adalah contoh kode HTML dan CSSnya:

<!DOCTYPE html>
<html>
<head>
<title>Belajar Penulisan Singkat Font CSS</title>
<style type="text/css">
   .contoh1 { font: italic bold small-caps 16px/80% serif;}
   .contoh2 { font: italic 16px/120% Arial, Helvetica, sans-serif;}
   .contoh3 { font: 16px/1.2em Georgia, Times, serif;}
   .contoh4 { font: small-caps 18px/24px "Comic Sans MS", serif;}
</style>
</head>
<body>
   <h2>Belajar Penulisan Singkat Font CSS</h2>
   
   <h3>font: italic bold small-caps 16px/80% serif;</h3>
   <p class="contoh1">Lorem ipsum dolor sit amet, consectetur
   adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
   eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
   posuere laoreet. Eam facilis omittantur at, usu efficiantur
   neglegentur delicatissimi et, in per vero splendide
   persequeris.<p>
   
   <h3>font: italic 16px/120% Arial, Helvetica, sans-serif;</h3>
   <p class="contoh2">Lorem ipsum dolor sit amet, consectetur
   adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
   eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
   posuere laoreet. Eam facilis omittantur at, usu efficiantur
   neglegentur delicatissimi et, in per vero splendide
   persequeris.<p>
   
   <h3>font: 16px/1.2em Georgia, Times, serif</h3>
   <p class="contoh3">Lorem ipsum dolor sit amet, consectetur
   adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
   eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
   posuere laoreet. Eam facilis omittantur at, usu efficiantur
   neglegentur delicatissimi et, in per vero splendide
   persequeris.<p>
   
   <h3>font: small-caps 18px/24px "Comic Sans MS", serif;</h3>
   <p class="contoh4">Lorem ipsum dolor sit amet, consectetur
   adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
   eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
   posuere laoreet. Eam facilis omittantur at, usu efficiantur
   neglegentur delicatissimi et, in per vero splendide
   persequeris.<p>
</body>
</html>



Cara penulisan singkat property font CSS ini bisa mempermudah kita dalam menulis property font CSS, namun efek non-heritance yang ditimbulkannya sebaiknya menjadi catatan agar kita tidak bingung dan bertanya-tanya kenapa efek font-size tidak ‘diturunkan’ kepada tag dibawahnya.

Cara Membuat Teks Underline, Overline, dan Line-through


Cara membuat Underline, Overline, dan Line-through

Penggunaan property CSS text-decoration untuk mendapatkan efek garis bawah (underline), garis atas (overline) dan garis tercoret (line-through) cukup sederhana, kita tinggal menginput nilai tersebut sebagai nilai properti dari text-decoration seperti contoh berikut ini:

span.under {
   text-decoration: underline;
}
span.over {
   text-decoration: overline;
}
span.line {
   text-decoration: line-through;
}

Selain ketiga nilai tersebut, properti text-decoration memiliki 2 nilai tambahan, yakni blink dan none. text-decoration: blink ditujukan untuk membuat teks berkedip (blink!) namun karena efeknya yang mengganggu, umumnya web browser modern mengabaikan efek ini. Sedangkan untuk menghapus efek dekorasi teks, kita bisa menggunakan perintah text-decoration: none. Perintah none ini biasa digunakan untuk menghapus efek underline dari tag <a> yang merupakan setingan bawaan web browser.
Sebagai tutorial kita kali ini, berikut adalah contoh kode HTML dan CSS dengan properti text-decoration:

<!DOCTYPE html>
<html>
<head>
<title>Belajar text-decoration</title>
<style type="text/css">
   .under { text-decoration: underline; }
   .over  { text-decoration: overline; }
   .line  { text-decoration: line-through; }
   .blink { text-decoration: blink; }
   .all   { text-decoration: underline overline line-through; }
   a      { text-decoration: none; }
</style>
</head>
<body>
   <h2>Belajar CSS: text-decoration</h2>
   
   <p class="under">Teks dengan underline sering disangka dengan link</p>
   <p class="over">Teks dengan overline mungkin berguna</p>
   <p class="line">Teks dengan line-through digunakan untuk koreksi</p>
   <p class="blink">Efek blink diabaikan oleh web browser</p>
   <p class="all">Semua efek text-decoration dalam satu selector</p>
   <a href="http://www.duniailkom.com">Ini adalah link
   tanpa efek garis bawah</a>
</body>
</html>
 Dalam contoh kode diatas, saya membuat class untuk masing-masing efek. Perhatikan bahwa class=”blink”, efek text-decoration: blink akan diabaikan oleh web browser.
Untuk class=”all”, saya membuat 3 efek dalam 1 selector. Tiap-tiap nilai dipisahkan dengan spasi.

Kode CSS text-decoration: none untuk tag <a> pada baris terakhir adalah penggunaan paling sering untuk text-decoration. Menghapus efek garis bawah dari sebuah link membuat kita bisa mendesain link dengan lebih baik, terutama jika tag <a> digunakan pada menu navigasi dari website.
 sekian dulu penjelasannya kita lanjut ke tutorial selanjutnya.

About

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Next
« Prev Post
Previous
Next Post »

1 komentar:

Click here for komentar
Essen Aquatic
admin
May 17, 2018 at 5:26 PM ×

Tutor bermanfaat, cukup jelas dan rinci, terimakasih
Golden Gamat

Congrats bro Essen Aquatic you got PERTAMAX...! hehehehe...
Reply
avatar

silahkan berkomentar bila ada yang ingin di tanyakan . ConversionConversion EmoticonEmoticon

Subscribe to: Post Comments (Atom)