Setelah dalam 3 tutorial sebelum ini kita telah membahas cara
mengganti jenis font di dalam CSS, dalam tutorial kali ini kita akan
membahas
Cara Merubah Warna Teks (font) HTML dengan CSS. Property yang akan kita gunakan adalah:
color.
Cara Merubah Warna Teks dengan CSS
Perintah CSS yang digunakan untuk mengubah warna text HTML adalah dengan menggunakan property
color, berikut contoh penulisannya:
1
2
3
4
5
6
|
h1 {
color: blue;
}
p {
color: #99FFAA;
}
|
Sebagai nilai untuk property color, bisa berupa
keyword warna (seperti:
red, blue, yellow, dll), bisa juga berupa notasi angka
hexadesimal RGB (seperti:
#112233, #ABCDEF) atau dalam bentuk desimal (seperti:
rgb(0, 160, 255) atau
rgb(0%, 63%, 100%)). Penjelasan lebih lanjut tentang pengertian metode warna ini bisa dibaca pada
Tutorial Belajar CSS: Penulisan Kode Warna pada CSS.
Sebagai contoh tutorial, berikut adalah kode HTML dan CSS dengan penggunaan property
color:
|
<!DOCTYPE html>
<html>
<head>
<title>Belajar Property Color CSS</title>
<style type="text/css">
.pertama {
color: green;
}
.kedua {
color: #335599;
}
.ketiga {
color: rgb(200,200,0);
}
</style>
</head>
<body>
<h2>Belajar Property Color CSS:</h2>
<h3>color: green</h3>
<p class="pertama">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.</p>
<h3>color: #335599</h3>
<p class="kedua">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.</p>
<h3>color: rgb(200,200,0)</h3>
<p class="ketiga">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.</p>
</body>
</html>
|
Dalam contoh diatas, saya membuat 3 buah paragraf dengan class:
pertama, kedua dan
ketiga. Masing-masing class tersebut di set warna teks nya dengan CSS.
Cara Merubah Warna Teks untuk warna RGBA dan HSLA
Untuk penggunaan lebih lanjut, kita juga bisa menggunakan kode warna yang lebih
advanced dengan kode warna
RGBA atau
HSLA seperti:
rgba(0,0,255,0.2) dan
hsla(240,100%,60%,0.8).
Dengan kode warna
RGBA dan
HSLA, CSS menyediakan fitur yang memungkinkan kita untuk mengatur tingkat ke-
transparanan warna. Namun fitur ini tidak bisa digunakan untuk web browser
Internet Explorer dibawah
versi ke-8. Karena IE 6 atau 7 tidak mengerti RGBA, maka warna text
tidak dapat ditampilkan. Untuk mengatasi hal ini, kita akan menggunakan 2
buah property color, dan memanfaatkan sifat prioritas (
cascading) dari CSS.
Idenya adalah jika web browser mendukung warna
RGBA atau
HSLA,
maka web browser tersebut akan menampilkan warna tersebut berikut
dengan fitur ‘transparan’-nya, namun jika web browser tidak mengerti
kode warna
RGBA (seperti IE 6 dan 7), maka web browser akan menampilkan warna tanpa efek transparan.
Sebagai contoh, untuk membuat warna text berwarna biru dengan efek transparan (
alpha channel) sebesar 80%, maka kita bisa menulisnya sebagai berikut:
p {
color: #0000FF; // properti ini hanya akan digunakan pada IE6 dan IE7
color: rgba(0,0,255,0.8); // web browser modern akan menggunakan warna ini
}
|
Dengan memanfaatkan fitur cascading dari CSS, web browser modern seperti
Google Chrome dan
Firefox, akan menampilkan teks berwarna biru dengan efek transparant 80%. Hal ini karena urutan color terakhir adalah kode warna untuk
RGBA yang akan menimpa kode warna RGB yang berada diatasnya.
Namun untuk IE 6 atau 7, warna akan tetap ditampilkan dengan warna
biru (tanpa efek transparan) yang berasal dari perintah color pada baris
pertama (karena kode color untuk baris kedua tidak “dimengerti” oleh
web browser tersebut).
Kode warna
RGBA dan
HSLA lebih cocok digunakan untuk desain web yang saling menimpa (
overlap),
sehingga kita bisa membuat efek modern transparan. Namun perlu menjadi
catatan bahwa tidak semua web browser mendukungnya. Sebaiknya efek warna
RGBA dan
HSLA hanya digunakan untuk
fitur desain yang tidak berisi konten. Karena walaupun kita menggunakan 2
buah property color seperti diatas, pada web browser IE6 dan IE7, warna
yang dihasilkan akan menutupi teks di bawahnya.
