/* Blog untuk Penggemar Gratis dan Free: CSS text-decoration*/


Tuesday, April 7, 2009

CSS text-decoration

Sesuai dengan namanya, property text-decoration digunakan untuk mempercantik text halaman HTML kita. 

Cara penulisan 
p {text-decoration: overline}

Nilai (value) text-decoration ada 5 macam yaitu:

overline              - untuk membuat tulisan dengan dekorasi garis diatasnya
line-through      - untuk membuat tulisan dengan dekorasi garis ditengahnya
underline           - untuk membuat tulisan dengan dekorasi garis bawah
blink                   - untuk membuat tulisan berkedip
none                   - untuk membuat tulisan tanpa dekorasi

Untuk lebih jelasnya kita coba aja yaa




<html>

<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration: blink}
a {text-decoration: none}
</style>
</head>

<body>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<p><a href="http://4gratisfree.blogspot.com/">Sebuah link</a></p>
</body>

</html>


Contoh Tampilan dalam Browser

Header 1 

Header 2

Header 3

Header 4

Sebuah link


Dalam contoh diatas, sebuah link yang biasanya selalu disertai garis bawah bisa kita buat tanpa garis bawah.

Nah.. udah deh, sekarang kita bisa mempercantik halaman HTML kita dengan text-decoration. Tapi bisa juga memperjelek yaa, coba kalau semua tulisan di over-through..... 

Property text-transform

Dalam menulis halaman HTML, seringkali kita pengen membuat suatu tulisan dengan huruf besar semua atau dengan huruf kecil semua, tetapi kita sering kali lupa menekan tombol Caps Lock sehingga tulisan kita mesti dihapus dulu baru ditulis ulang sesuai keinginan. Sebenarnya ada suatu property yang memudahkan kita untuk keperluan tersebut yaitu property text-transform.
Dengan property ini kita bisa membuat tulisan dengan huruf Kapital semua, huruf kecil semua atau setiap kata diawali dengan huruf kapital tanpa takut salah ketik. Karena secara otomatis browser akan mengikuti perintah CSS kita sesuai dengan keinginan kita.
Contoh pemakaian text-transform

<html>

<head>
<style type="text/css">
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style>
</head>

<body>
<p class="uppercase">Paragrap ini ditulis dengan huruf kapital</p>

<p class="lowercase">Paragrap ini DITULIS dengan huruf kecil semua</p>

<p class="capitalize">Setiap kata diawali huruf kapital</p>
</body>

</html>


Dalam contoh diatas, ketiga contoh paragrap sengaja ditulis dengan huruf besar dan kecil campur aduk. Kesengajaan ini hanya untuk melihat fungsi text-transform yang sebenarnya.

Tampilan Browser



Paragrap ini ditulis dengan huruf kapital


Paragrap ini DITULIS dengan huruf kecil semua


Setiap kata diawali huruf kapital


Posted by Abu Daniyal at 1:50 AM
Labels:

6 comments:

  1. K4driFebruary 14, 2010 at 1:26 AM

    Terima Kasih, Tentang CSS nya !
    Bravooo, Visit Blogku JUGA yaa,,, Hehehe (^.^)

    ReplyDelete
  2. blognya anak GAPTEKSeptember 23, 2010 at 5:49 AM

    makasih sob..

    selain teks link dekoration diatas, apa ada lagi yang lain sob??



    salam kenal ya

    ReplyDelete
    Replies
    1. UnknownMarch 25, 2020 at 5:08 AM

      Underline overline dotted blue
      Underline overline wavy red

      Delete
  3. ageos selaloe goendoelJuly 16, 2012 at 11:53 PM

    makasih mas sangat membantu.........

    ReplyDelete
  4. elektronikabersamaFebruary 7, 2013 at 7:16 AM

    Hatur nuhun kang,
    Ane nyari-nyari cara membuat huruf dengan garis diatasnya, alhamdulillah nemu disini, it's work, akan sangat membantu untuk blog saya, mengenai elektronika (dalam materi teknik digital)

    ReplyDelete
  5. Natanael Jansudin SiregarMay 17, 2015 at 3:48 AM

    wah, makasih banyak gan. Work.
    NATANAEL'S BLOGZ

    ReplyDelete

Subscribe to: Post Comments (Atom)