Blog e arek Mblitar..
ISLAM CORNER | HANDPHONE | WINDOWS TRICK | SEO | SOFTWARE | VIRUS | ISENG | CBOX TRICK | CSS TUTORIAL | HACKING | BLOGGING TIPS | INTERNET | HTML TUTORIAL |

Tutorial 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

0 comments:

TULIS KOMENTAR ANDA..!!

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger