Macam-Macam Cara Pewarnaan dalam CSS

Macam-Macam Cara Pewarnaan dalam CSS - Pewarnaan merupakan unsur yang paling penting dalam hal apapun jika dilihat dari unsur tampilan dan seni. Website yang bagus adalah website yang selain powerfull pada sisi sitem juga mempunyai tampilan atau User Interface (UI) yang bagus. Hal ini perlu perhatian khusus agar user sebagai pelanggan dari website yang akan kita buat nanti menjadi betah berlama-lama dalam mengunjungi atau menggunakan layanan website kita. Oleh karena itu dalam web development terdapat seorang developer yang khusus untuk menangani atau merancang User Interface pada website yang sedang dikembangkan yang biasa disebut dengan Front-end Developer.

Source gambar : http://www.webdschool.com/images/thumbs/webdesign-courses.jpg

Bagi seorang Front-end Developer penguasaan terhadap design adalah keahlian yang harus dimiliki olehnya, termasuk menguasai bagaimana memadukan pewarnaan yang sesuai antar satu elemen HTML dengan elemen yang lainnya. Lalu bagaimanakah cara memberikan warna pada elemen tertentu dengan menggunakan CSS? Mari kita bahas lebih lanjut.

Pemberian warna pada elemen tertentu pada HTML dapat dilakukan sesuai kebutuhan. Contoh property yang digunakan untuk memberikan warna pada teks, tentu akan berbeda dengan property yang digunakan untuk memberikan warna pada gambar. Sehingga memiliki pemahaman terhadap setiap kegunaan property dalam CSS sangatlah penting. Bagi temen-temen yang masih bingung dengan apa itu properti temen-temen bisa membaca Tutorial CSS sebelumnya tentang Pengertian CSS dan Kegunaanya dalam Web Development . 

Disini yang akan saya bahas bukan tentang propertinya terlebih dahulu namun cara memberikan pewarnaanya. Untuk penggunaan setiap properti akan dibahas pada tutorial berikutnya. Cara memberikan warna pada CSS ada beberapa cara. Mari kita bahas satu persatu.

Valid Color Name

Cara yang pertama ini merupakan cara yang paling mudah yang mana pemberian value dilakukan dengan memberikan nama warna dalam Bahasa Inggris. Contohnya red untuk warna merah, yellow untuk kuning dan lain sebagainya. Agar lebih jelas, yuk perhatikan baris kode berikut.

Perhatikan pada pemberian style pada baris kode ke-6. Terdapat property background yang diberikan value red. Nah pewarnaan seperti inilah yang disebut dengan cara pewarnaan dengan menggunakan Valid Color Name.

Hasil yang tampak pada Browser :

RGB (Red, Green, Blue)

Cara ini perpaduan dari unsur warna merah, hijau, dan biru dengan formula rgb(red,green,blue). Setiap parameter dapat diberikan intensitas warna antara 0 - 255. sebagai contoh rgb(255,0,0) yang artinya intensitas 255 untuk warna merah, 0 untuk hijau dan biru sehingga warna yang tampak adalah merah. Perhatikan baris kode berikut.

Terlihat jelas pada baris kode ke-6 bahwa property background diberikan pewarnaan dengan menggunakan rgb(0,255,0) sehingga akan tampak warna hijau sebagai background dari area tag <div>.

Hasil yang tampak pada Browser :

Hex 

Cara Hex merupakan cara pemberian value pada pewarnaan dengan menggunakan bilangan Heksa yang diawali dengan tanda #. Cara ini yang kebanyakan dipakai oleh para web developer pemula karena dapat dengan mudah didapatkan dengan pilihan warna yang sangat beragam. Untuk mendapatkan kode Heksa dari warna yang kita inginkan, kita bisa menggunakan tool Color Picker.

Hasil yang tampak pada Browser :

Selain ketiga cara diatas, CSS3 hadir dengan empat cara baru dalam pewarnaan suatu elemen HTML. Berikut adalah cara pewarnaan baru yang ditawarkan oleh CSS3 :

a. RGBA merupakan pengembangan dari RGB yang memiliki tambahan parameter yaitu alpha. Sehingga formula baru yang terbentuk adalah rgba(red, greeen, blue, alpha) yang mana nilai dari alpha antara 0.0 sampai 1.0 yang merupakan transparansi dari warna hasil parameter red,green dan blue didepannya.

b. HSL merupakan singkatan dari Hue, Saturation, dan Lightness. Hue adalah derajat warna antara 0 sampai 360 yang mana 0 atau 360 adalah merah, 120 adalah hijau dan 240 adalah biru. Saturation adalah persentase dari warna Hue yang berkisar antara 0% sampai 100% yang mana semakin besar persentasenya maka semakin jelas warna yang tampak. Lightness juga merupakan persentase dari warna namun dalam segi yang berbeda yaitu unsur pencahayaan yang mana 0% adalah hitam, dan 100% adalah putih. Formula dari HSL adalah hsl(hue, saturation, lightness).

c. HSLA merupakan pemberian tambahan parameter alpha pada formula HSL sehingga terdapat unsur transparansi. Formula dari HSLA adalah hsla(hue, saturation, lightness, alpha). 

d. Opacity sebenarnya bukan sebuah cara untuk memberikan value warna pada sebuah property warna melainkan ia sendiri adalah sebuah property yang dapat digunakan untuk memberikan transparansi terhadap sebuah elemen tertentu sehingga elemen tersebut dapat menjadi lebih bervariasi. Value dari property opacity berkisar antara 0.0 sampai 1.0 yang mana value 0.0 akan membuat sebuah elemen tidak tampak atau transparan.

Baris kode berikut akan merupakan penerapan dari keempat cara yang dihadirkan oleh CSS3 :

Hasil yang tampak pada Browser :

Dari semua cara pewarnaan yang telah dibahas sebelumnya, semua cara masih dapat digunakan sampai saat ini dalam web design. Temen-temen dapat memilih cara pewarnaan sesuai dengan selera masing-masing mempertimbangkan kebutuhan juga sehingga website yang dihasilkan menarik dan dengan pewarnaan yang sesuai. Demikianlah pembahasan tentang Macam-Macam Cara Pewarnaan dalam CSS. Semoga bermanfaat, tetep semangat terus buat temen-temen belajarnya, Salam Belajar !

Pengertian CSS dan Kegunaanya dalam Web Development

Pengertian CSS dan Kegunaanya dalam Web Development - CSS merupakan bagian yang tak bisa dipandang sebelah mata pada web development terutama bagi para Web Front-End Developer. Pertanyaan yang sering muncul difikiran para pemula atau biasa disebut para beginner (red:newbie) adalah apa sih CSS itu? nah kali ini sebagai sesi awal dari Tutorial CSS saya akan mengulas sedikit tentang gambaran umum dari CSS beserta bagaimana ia digunakan oleh para web developer untuk membuat website nya tampil dengan menakjubkan.

source gambar : http://www.codingdojo.com/blog/wp-content/uploads/css.jpg

Apa itu CSS ?

Kita mulai pembahasanya dari pengertian CSS. CSS merupakan singkatan dari Cascading Style Sheet yang merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman (source:wikipedia). Jadi CSS ini lah yang akan memberikan style atau gaya pada setiap elemen HTML yang kita buat. Ibarat sebuah rumah CSS ini adalah tool seperti cat, gergaji, dll yang digunakan oleh Pak Tukang sebagai web developer untuk mengatur sedemikian rupa agar website yang berhasil dibuat terlihat indah dan sempurna. Bagaimana sudah sedikit faham bukan? Yuk lanjut!

Sejarah CSS

Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan yang kemudian membentuk hubungan saling terkaitpada setiap style (source:wikipedia).

Perkembangan CSS

Perkembangan CSS sendiri dimulai dari versi CSS1 kemudian berubah menjadi CSS2 dan versi terbaru dari CSS saat ini adalah CSS3. Dari setiap perkembangan pasti memberikan kemudahan yang lebih baik kepada para web developer. CSS3 sebagai versi dari CSS yang terbaru saat ini memberikan banyak fitur kemudahan dalam web design bahkan kini membuat animasi dalam website pun dapat dilakukan dengan menggunakan CSS3 murni tanpa perlu bantuan dari JavaScript.

Penulisan CSS
Penulisan CSS dalam Web Development ada tiga cara namun sebelum menginjak ke tiga cara tersebut alangkah lebih baiknya kita mengenal lebih dulu syntax atau format penulisan dari CSS. Mari kita perhatikan gambar berikut :

source : https://www.w3schools.com/css/selector.gif

Pada gambar diatas terdapat selektor yang berarti elemen HTML yang dipilih untuk diberikan style tertentu. kemudian tanda kurung kurawal buka serta kurung kurawal tutup sebagai pembungkus dari style yang diberikan. Diantara tanda kurung kurawal dapat kita tuliskan deklarasi-deklarasi style yang terdiri dari property dan nilainya yang akan diberikan kepada elemen yang ditunjuk oleh selektor.

Berikut ketiga cara dalam menuliskan CSS dalam Web Development:
a. Inline Style Sheet merupakan cara penulisan CSS yang dituliskan langsung beserta tag dari elemen HTML yang akan diberikan style. untuk lebih jelasnya mari perhatikan gamabar dibawah ini.

Hasil yang tampak pada Browser :
Keterangan : Pemberian properti pada style boleh lebih dari satu dan tidak dibatasi tergantung dari kebutuhan.


b. Internal Style Sheet merupakan cara penulisan CSS yang dituliskan dalam satu file dengan baris kode HTML namun dikelompokkan menjadi satu di dalam tag <style>. contohnya pada gambar dibawah ini.
  Baris kode disamping memeberikan hasil tampilan web yang sama dengan baris kode pada cara penulisan Inline Style Sheet. CSS diberikan dengan menuliskannya di dalam tag <style> yang dibungkus oleh tag <head>.






c. Eksternal Style Sheet merupakan cara penulisan CSS yang dituliskan dalam file berbeda dari file HTMLnya. namun pada file HTML diberikan pemanggilan file CSS agar style yang dibuat dapat diterapkan oleh elemen-elemen pada file HTML.

Pada file Belajar.html baris kode ke-5 terdapat pemanggilan file Belajar.css sehingga penulisan dengan cara Eksternal Style Sheet akan membuat baris kode kita menjadi rapi dan mudah dibaca karena file HTML dan File CSS terpisah.





Dari ketiga cara tersebut terdapat pertanyaan jika ada satu elemen yang dipengaruhi oleh tiga style yang berbeda namun selektor menunjuk pada elemen yang sama maka style manakah yang akan memberikan efek pada elemen tersebut? jawabanya adalah tingkat kekuatan style sendiri secara berurutan dimulai dari yang paling kuat adalah Inline Style Sheet , Internal Style Sheet, kemudian baru Eksternal Style Sheet. Sehingga ketika ada style yang menunjuk pada elemen yang sama dan property yang diberikan juga sama namun nilanya berbeda style yang akan diberikan adalah menganut urutan tersebut.  Sekian pembahasan tentang Pengertian CSS dan Kegunaanya dalam Web Development tetap semangat belajarnya.