Membicarakan tentang blog/web tentu tak akan pernah lepas dari properti "text" karena inilah media yang digunakan sebagai sarana komunikasi antara pemilik blog/web dan pengunjung selain image atau media yang lain. Menggunakan property text dalam web akan berkaitan erat dengan 3 css property lain.
- color property
- text-align property
- text-transform property
Text Color
Warna teks dibentuk melalui color property. Berbagai macam warna dapat digunakan dimana nilai warna dapat menggunakan 3 pilihan kode warna.- Color Name
Anda bisa gunakan nama warna sebagai value/nilai color property. Red, green, blue adalah contoh warna-warna tersebut. - RGB color, RGBA color.
Contoh rgb color » rgb(0,0,0) Contoh rgba color » rgba(255,0,0,0.7)
rgba color untuk membuat warna dengan efek transparan. - Hexadecimal/Hex Color
Hex color menggunakan symbol angka dan huruf seperti misalnya #000, #eee, #f00 dll
Beberapa warna penting berikut kode warnanya:
Black = #000000 Green = #008000
Silver = #C0C0C0 Lime = #00FF00
Gray = #808080 Olive = #808000
White = #FFFFFF Yellow = #FFFF00
Maroon = #800000 Navy = #000080
Red = #FF0000 Blue = #0000FF
Purple = #800080 Teal = #008080
Fuchsia= #FF00FF Aqua = #00FFFFPenulisan kode color property
color:red; color:rgb(0,0,0); color:rgba(255,0,0,0.7); color:#f00;
Kode color property dalam syntax
p{
font-size:12px;
color:#000;
line-height:1em;
}
h3{
font-size:18px;
color:orange;
margin:20px 0;
}
Text Alignment
Perataan text mempunyai 4 pilihan:- Rata kiri
- text-align:left;
- Rata kanan
- text-align:right;
- Rata tengah
- text-align:center;
- Rata kanan-kiri
- text-align:justify;
text-align property dalam syntax
p{
font-size:12px;
color:#000;
line-height:1em;
text-align:justify;
}
h3{
font-size:18px;
color:orange;
margin:20px 0;
text-align:center;
}
text-transform property
Teks-transform property untuk membentuk teks agar membentuk beberapa karakter teks tertentu secara otomatis.Value/nilai & kode text-transform property
- text-transform:uppercase; » secara otomatis semua teks berbentuk huruf capital
- text-transform:lowercase; » secara otomatis semua teks berbentuk huruf kecil
- text-transform:capitalize; » secara otomatis karakter pertama dalam setiap kata berbentuk huruf capital
- text-transform:normal; » teks sesuai yang tertulis
Kode text-transform property dalam syntax css
p{
font-size:12px;
color:#000;
line-height:1em;
text-align:justify;
text-transform:uppercase;
}
h3{
font-size:18px;
color:orange;
margin:20px 0;
text-align:center;
text-transform:capitalize;
}Di bawah ini telah tersedia demo yang berkaitan dengan text property. Lakukan perubahan pada beberapa kode agar bisa terlihat pengaruh penggunaan property css seperti color property, text-align property dan text-transform property pada teks yang kita buat.
Please click the button to display. Continue with editing code and click to see the results!
Post : CSS Text Propertyby : gubhugreyot - gubhugcss
my Blogs : Demo Tutorial Blogger-1 | Demo Tutorial Blogger-2 | Best Blogger Hacks | Best Blogger Menus | gubhuggreyot-b'detik | gubhugreyot
Tidak ada komentar:
Posting Komentar