Blog Request tutorial? klik disini!

  • Warna Di CSS

    1203 kali dibaca
    05 Feb / 2014 22:26

    Ada 4 metode memberikan warna di CSS: keyword, hexadecimal, rgb dan hsl. Dua yang pertama dikenalkan pertama kali waktu di CSS1 dan didukung di semua web browser sampai CSS3, dimana masuklah rgb dan hsl masing-masing memiliki "alpha" dalam memberikan efek opacity. 

     

    Keywords 

    Color Keywords sudah lama di dukung oleh web browser. Ada 16 keyword yang secara resmi dijadikan standar oleh W3C. black, white, aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, and yellow. Contoh: 

    Lalu CSS3 mengembangkan lists warna yang ada menjadi 140 standar warna website. Contoh seperti: salmon, aliceblue, smoke etc.  

     

    Hexadecimal 

    Ketika warna Keyword hanya sampai 140 tidaklah demikian dengan Hexadecimal dimana bisa memunculkan 256 warna. Wow, banyak sekali. Supaya aman dulu ada istilah yang dinamakan "Web Safe Color" dimana ada table yang memperlihatkan 216 warna dari total 256 kode warna Hexadecimal. Kalau sekarang, monitor sudah bisa memunculkan jutaan warna. Paling tidak minimal 16.384 warna. Sering kita lihat istilah 16k. Jadi sudah tidak di batasin lagi hanya 256 warna. 

    Sistem Hexadecimal memiliki 16 digits 0 sampai 9 lalu di ikuti dengan a sampai f. Untuk menentukan warna, ada 3 set nomor Hexadecimal yang mewakili Red, Green dan Blue. Setiap set memiliki 2 nomor Hexadecimal. Jadi #ffffff artinya Red, Green dan Blue dalam keadaan full memberikan efek warna putih. Sedangkan #000000 memberikan efek warna yang paling lemah yaitu hitam. #ff0000 adalah Red, #00ff00 adalah Green dan #0000ff adalah Blue. Sedangkan #777777 adalah Grey.  

    Web Safe Color hanya menggunakan 1 dari 2 nomor Hexadecimal. Misalkan #f00 artinya Red. Warna di Hexadecimal tidak harus selalu berpasangan. Bisa #3fa027. 

     

    RGB 

    Metode RGB lebih gampang untuk diatur atau di manipulasi di script. Nilai RGB bisa di beri dari antara 0 dan 255. 

    Atau persen: 

    Lalu CSS3 memperkenalkan RGBA, dimana a itu adalah alpha atau opacity dimana nilai 0 adalah (full transparan) dan 1 (full buram). 

    Contoh, kita mau buat sebuah div dengan id background-color merah transparant 50%. 

     

    HSL

    Yang terakhir adalah HSL ( Hue, Saturation & Luminosity ). Secara teori, HSL akan mempermudah developer dalam menentukan "Deeper" atau "Lighter" sebuah warna dengan cepat. 

    HSL berdasarkan color wheel, geser dari Red ke Yellow, Green, Blue dan Violet dan kembali ke Red lagi. HUE itu diambil dari derajat dari sisi luar wheel. Dengan Red sebagai 0 derajat dan juga 360 derajat. Saturation dan Luminosity diatur dengan persen. Silahkan ber-experimen dengan kombinasinya. 

    Juga ada hsla, dan caranya sama seperti cara penulisan rgba. 

    Untuk mengetahui bagaimana mendapatkan code hsla, bisa akses di artikel yang sebelumnya di www.dumetschool.com/blog/Menerapkan-HSLa-dan-RGBa-Pada-CSS

    Selamat Mencoba smiley






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155