CSS fungsi Property Text-Transform dan Valuenya

text-transform adalah salah satu property pada css, sedangkan fungsinya untuk membuat style pada text, misal membuat huruf besar diawal kata, semua text huruf kapilal, semua text menggunakan hufuf kecil

Sukses adalah keberhasilan yang anda capai di dalam menggunakan talenta-talenta yang telah Allah berikan kepada Anda. Rick Devos

text-transform adalah salah satu property pada css, sedangkan fungsinya untuk membuat style pada text, misal membuat huruf besar diawal kata, semua text huruf kapilal, semua text menggunakan hufuf kecil

Last Modif at July 10th, 2011

text-transform adalah salah satu property pada css, sedangkan fungsinya untuk membuat style pada text, misal membuat huruf besar diawal kata, semua text huruf kapilal, semua text menggunakan hufuf kecil

value text-transform

berikut value text-transform

  • capitalize
  • uppercase
  • lowercase
  • none

contoh property text-transform dalam inline style

text-transform:capitalize

fungsi value capitalize adalah untuk membuat hufuf besar diawal kata/text

contoh

<div style="clear:both;background-color:lime;width:500px;text-transform:capitalize;">
ini text transform:capitalize
ini text transform:capitalize
ini text transform:capitalize
ini text transform:capitalize
</div>

tampilanya seperti ini

ini text transform:capitalize
ini text transform:capitalize
ini text transform:capitalize
ini text transform:capitalize

text-transform:uppercase

fungsi value uppercase adalah untuk membuat huruf besar/kapital disetiap kata/textnya

contoh

<div style="clear:both;background-color:lime;width:500px;text-transform:uppercase;">
ini text transform:uppercase
ini text transform:uppercase
ini text transform:uppercase
ini text transform:uppercase
</div>

tampilanya seperti ini

ini text transform:uppercase
ini text transform:uppercase
ini text transform:uppercase
ini text transform:uppercase

text-transform:lowercase

fungsi value lowercase ini kebalikan dari uppercase, fungsinya adalah untuk membuat huruf kecil(bukan-size/ukuran) disetiap kata/textnya, jadi walaupun kita menulis textnya dengan huruf kapital maka tampilan pada web browser akan tetap kecil

contoh

<div style="clear:both;background-color:lime;width:500px;text-transform:lowercase;">
INI ADALAH TEXT TRANSFORM LOWERCASE
INI ADALAH TEXT TRANSFORM LOWERCASE
INI ADALAH TEXT TRANSFORM LOWERCASE
INI ADALAH TEXT TRANSFORM LOWERCASE
</div>

tampilanya seperti ini

INI ADALAH TEXT TRANSFORM LOWERCASE
INI ADALAH TEXT TRANSFORM LOWERCASE
INI ADALAH TEXT TRANSFORM LOWERCASE
INI ADALAH TEXT TRANSFORM LOWERCASE

text-transform:none

fungsi value none ini tidak memberi style apa-apa

contoh

<div style="clear:both;background-color:lime;width:500px;text-transform:none;">
ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none
</div>

tampilanya seperti ini

ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none ini text transform:none

contoh text-transform dalam internal style kompleks

perhatikan code dibawah

<html>
<head>
<title>text-transform css</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<style type="text/css">
body{background-color:pink;}
#misaltext-transform1{
text-transform:capitalize;
}
#misaltext-transform2{
text-transform:uppercase;
}
#misaltext-transform3{
text-transform:lowercase;
}
#misaltext-transform4{
text-transform:none;
}
.anggapsebagaikotak{
clear:both;
background-color:white;
width:400px;
margin:20px;
padding:10px;
}
</style>
</head>
<body>
<div class="anggapsebagaikotak" id="misaltext-transform1">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
<div class="anggapsebagaikotak" id="misaltext-transform2">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
<div class="anggapsebagaikotak" id="misaltext-transform3">
INI ADALAH TEXT TRANSFORM LOWERCASE
INI ADALAH TEXT TRANSFORM LOWERCASE
INI ADALAH TEXT TRANSFORM LOWERCASE
INI ADALAH TEXT TRANSFORM LOWERCASE
INI ADALAH TEXT TRANSFORM LOWERCASE
INI ADALAH TEXT TRANSFORM LOWERCASE
INI ADALAH TEXT TRANSFORM LOWERCASE
INI ADALAH TEXT TRANSFORM LOWERCASE
</div>
<div class="anggapsebagaikotak" id="misaltext-transform4">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
<div style="clear:both;"></div>
<p>salam <a href="http://www.indaam.net" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>

untuk melihat hasilnya

  • copy markup style diatas
  • paste ke notepad
  • save as (pilih all types) dengan nama contohtext-transform.htm
  • jalankan(double click), atau
  • open with (firefox, ie, opera, safari, chrome)
  • silakan edit valuenya
  • letak valuenya antara : (titik dua) dan ;(titik koma)
  • selamat belajar

semoga bermanfaat

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

One thought on “CSS fungsi Property Text-Transform dan Valuenya”

  1. forex robot says:

    Great site. A lot of useful information here. I’m sending it to some friends!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-