Mempelajari Selector Pada Pemrograman CSS - Part 7


Halo sobat lautan, semoga sehat selalu ya. 
Kali ini lautan akan kembali membahas tentang pemrograman website. Bila sebelumnya membahas HTML, maka kali ini kita akan membahas pasangan HTML untuk memperindah tampilan, yaitu CSS. Sebelumnya, kita telah memagari materi kita didalam CSS yakni CSS Typography. Kita telah membahas 2 topik dari 21 topik CSS Typography. Dua topik itu adalah font-family dan font-size.

Baca juga : Mempelajari selector pada pemrograman CSS - Part 6

Nah, kali ini kita akan belajar 1 topik saja, yakni tentang property color. Untuk font weight akan dibahas pada kesempatan berikutnya.
Sebelumnya, lautan mendapat saran nih untuk membuat script dalam bentuk gambar. Namun, setelah lautan pikir-pikir, membuat script dalam bentuk gambar, akan menyulitkan pembaca yang ingin praktik langsung. Eh, tidak bisa di copy paste gitu :v. Ya, balik lagi pada gaya awal, lautan akan menulis scriptnya langsung di sini.

Property Color

Property ini digunakan untuk mengubah warna font. Property ini terbagi atas dua bagian yakni foreground color yang diwakili oleh property color, dan background color yang diwakili oleh property background-color. Pembahasan background color akan dibahas pada artikel berikutnya dalam kesempatan yang akan datang. Berikut adalah contoh penggunaan kedua property ini

<html>
<head>
<title>Lautan-it</title>
<style>
h1,p {
color:white;
background-color: black;
}
</style>
</head>
<body>
<h1>Belajar CSS</h1>
<p>Sebuah paragraf sederhana</p>
</body>
</html>

Script diatas menggunakan keyword white dan black sebagai nilai warna untuk tulisan dan latar belakang. CSS juga menyediakan cara penulisan warna sama halnya dengan nilai satuan length pada property font-size.

Satuan Color CSS

Dalam CSS, satuan warna dapat ditulis dengan 4 notasi penulisan, yakni ;
  • Keyword
  • #RRGGBB / #RGB
  • rgb (rr, gg, bb) / rgba (rr, gg, bb, aa)
  • hsl (hh, ss, ll) / hsla (hh, ss, ll, aa)
Kita akan menjelaskan satu persatu, mulai dari notasi pertama, yakni keyword.

Notasi Keyword

Pada dasarnya ini adalah notasi nama warna dalam bahasa inggris. Notasi ini sering digunakan oleh beberapa programmer, termasuk juga lautan. Alasannya jelas, sangat mudah. Contohnya seperti red, black, white, green, yellow, grey, dan lain-lain. Awalnya, CSS hanya dapat menampilkan 17 warna yang terkenal dalam sebutan classic internet color. Warna-warna yang termasuk didalamnya adalah aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, dan yellow. 

Saat ini, CSS telah berkembang dan dapat memuat 147 warna tambahan, yang disebut dengan X11 colors, atau 147 SVG colors. Berikut adalah contoh penggunaannya ;

<html>
<head>
<title>Lautan-IT</title>
<style>
p { font-size: 24px; }
p.peachpuff {color: peachpuff; }
p.royalblue {color: royalblue; }
p.tomato {color: tomato; }
p.rebeccapurple {color: rebeccapurple; }
p.chocolate {color: chocolate; }
</style>
</head>
<body>
<p class='peachpuff'>Warna peachpuff</p>
<p class='royalblue'>Warna royalblue</p>
<p class='tomato'>Warna tomato</p>
<p class='rebeccapurple'>Warna rebeccapurple</p>
<p class='chocolate'>Warna chocolate</p>
</body>
</html>

Notasi #RRGGBB / #RGB

RGB adalah singkatan dari Red Green Blue, jenis notasi warna inilah yang paling banyak digunakan untuk televisi atau komputer. Seluruh warna yang dihasilkan adalah perpaduan tiga warna RGB. Format yang digunakan adalah #1267F5. Format #RRGGBB terdiri dari 3 bagian yakni RR untuk warna merah, GG untuk warna hijau, dan BB untuk warna biru. Masing masing bagian memiliki 256 tingkat kepekatan, yang diwakili dari angka 0 hingga 255

Jadi misalnya untuk mendapatkan warna putih maka diperlukan untuk RRGGBB, masing masing adalah 255. Sedangkan untuk warna hitam adalah 0 untuk masing masing RRGGBB. Masing masing warna dalam format ini di konversi ke angka heksadesimal. Yakni terdiri dari angka 0-9 dan huruf A-F. Nilai 225 pada bilangan desimal, sama dengan FF pada bilangan heksadesimal. Berikut adalah contoh penggunaanya ;

<html>
<head>
<title>Lautan-it</title>
<style>
p { font-size: 24px; }
p.satu {color: #FFFFFF; }
p.dua {color: #000000; }
p.tiga {color: #FF0000; }
p.empat {color: #00FF00; }
p.lima {color: #FFFF00; }
p.enam {color: #00FFFF; }
</style>
</head>
<body>
<p class='satu'>255 Red, 255 Green, dan 255 Blue = #FFFFFF</p>
<p class='dua'>0 Red, 0 Green, dan 0 Blue = #000000</p>
<p class='tiga'>255 Red, 0 Green, dan 0 Blue = #FF0000</p>
<p class='empat'>0 Red, 255 Green, dan 0 Blue = #00FF00</p>
<p class='lima'>255 Red, 255 Green, dan 0 Blue = #FFFF00</p>
<p class='enam'>0 Red, 255 Green, dan 255 Blue = #00FFFF</p>
</body>
</html>

Contoh lain, adalah ;

<html>
<head>
<title>Lautan-it</title>
<style>
p { font-size: 24px; }
p.satu {color: #AAAAAA; }
p.dua {color: #FFD700; }
p.tiga {color: #ADFF2F; }
p.empat {color: #FA4455; }
p.lima {color: #191970; }
p.enam {color: #F12268; }
</style>
</head>
<body>
<p class='satu'>Paragraf dengan warna teks #AAAAAA</p>
<p class='dua'>Paragraf dengan warna teks #FFD700</p>
<p class='tiga'>Paragraf dengan warna teks #ADFF2F</p>
<p class='empat'>Paragraf dengan warna teks #FA4455</p>
<p class='lima'>Paragraf dengan warna teks #191970</p>
<p class='enam'>Paragraf dengan warna teks #F12268</p>
</body>
</html>

Penulisan format #RRGGBB tidak harus huruf kapital, tapi bisa juga dengan huruf kecil (case insensitive), namun tidak boleh ada spasi antara tanda pagar dengan nilai warna. Khusus untuk penulisan warna yang berulang, seperti #aabbcc, dapat disingkat menjadi #abc.

Notasi rgb (rr, gg, bb) / rgba (rr, gg, bb, aa)

Hampir sama dengan notasi sebelumnya, namun bedanya kita tidak harus menggunakan angka heksadesimal. Notasi ini bisa ditulis dengan nilai desimal (basis 10) maupun dalam satuan persen. Contoh dibawah ini, 

color: #FF00FF;
color: rgb(255, 0, 255);
color: rgb(100%, 0%, 100%);

Hasilnya adalah warna pink dari perpaduan warna merah dan biru. Dengan notasi ini, kita dapat mencampurkan warna RGB dengan lebih cepat dan mudah. Tetapi perlu diperhatikan, jika awal penulisan nilai menggunakan persen maka semua penulisan harus mengunakan persen, begitu juga dengan yang tidak menggunakan persen. Untuk nilai desimal, kita tidak bisa menggunakan bilangan pecahan. 

Sedangkan untuk format rgba (rr, gg, bb, aa) adalah variasi rgb dengan penambahan nilai alpha channel. Ini termasuk fitur baru dalam CSS3, dan digunakan untuk mengatur tingkat transparansi warna. Nilainya berupa angka desimal dan bisa berbentuk pecahan dalam rentang 0 (transparan) dan 1 (warna utuh). Contoh ;

color: rgba (100%, 0%, 0%, 0.5)

Berikut adalah contoh penggunaan 

<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
p { font-size: 24px; }
p.satu {color: rgba(45,45,80,1); }
p.dua {color: rgba(45,45,80,0.8); }
p.tiga {color: rgba(45,45,80,0.6); }
p.empat {color: rgba(45,45,80,0.4); }
p.lima {color: rgba(45,45,80,0.2); }
p.enam {color: rgba(45,45,80,0); }
</style>
</head>
<body>
<p class='satu'>Paragraf dengan alpha channel 1</p>
<p class='dua'>Paragraf dengan alpha channel 0.8</p>
<p class='tiga'>Paragraf dengan alpha channel 0.6</p>
<p class='empat'>Paragraf dengan alpha channel 0.4</p>
<p class='lima'>Paragraf dengan alpha channel 0.2</p>
<p class='enam'>Paragraf dengan alpha channel 0</p>
</body>
</html>

Notasi hsl (hh, ss, ll) / hsla (hh, ss, ll, aa)

Kedua format notasi penulisan ini adalah baru dalam spesifikasi CSS3. HSL adalah singkatan dari Hue, Saturation, Lightness (Luminance). Menggunakan konsep color wheel, atau roda warna. Color wheel adalah sebuah lingkaran yang berisi berbagai jenis warna, yang setiap warna memiliki posisi tertentu.


Atau 


Posisi tiap warna dinyatakan dalam bentuk derajat, mulai dari 0 derajat yakni warna merah, sampai 300 derajat yakni warna magenta, dan kembali ke derajat 0. Antara derajat ini terdapat kombinasi warna lain, yang akan menjadi input untuk hue. 

Saturation, merujuk pada kekuatan suatu warna, mulai dari grayscale (tanpa warna) 0%, dan warna penuh 100%. Lightness adalah tingkat kecerahan warna, jika nilainya adalah 0%, maka warna apapun akan menjadi hitam, 100% jadi putih, 50% adalah warna sebenarnya.


Sedangkan hsla (hh, ss, ll, aa) adalah variasi lain HSL dengan penambahan alpha channel. Nilainya 0 untuk transparan dan 1 untuk penuh.Beriky contoh penggunaanya..

<html>
<head>
<title>Lautan-it</title>
<style>
p { font-size: 24px; }
p.satu {color: hsl(300,100%,50%); }
p.dua {color: hsl(40,100%,20%); }
p.tiga {color: hsl(120,50%,90%); }
p.empat {color: hsla(120,100%,50%,0.6); }
p.lima {color: hsla(120,100%,50%,0.2); }
p.enam {color: hsla(120,100%,50%,1); }
</style>
</head>
<body>
<p class='satu'>Paragraf dengan warna hsl(300,100%,50%)</p>
<p class='dua'>Paragraf dengan warna hsl(40,100%,20%)</p>
<p class='tiga'>Paragraf dengan warna hsl(120,50%,90%)</p>
<p class='empat'>Paragraf dengan warna hsla(120,100%,50%,0.6)</p>
<p class='lima'>Paragraf dengan warna hsla(120,100%,50%,0.2)</p>
<p class='enam'>Paragraf dengan warna hsla(120,100%,50%,1)</p>
</body>
</html>

Ya, begitulah akhir dari topik property color, nantikan lah artikel selanjutnya :)

Post a Comment

0 Comments