Tutorial Belajar CSS 3 Part 4 – Gradient Warna CSS3

Posted on Posted in Tutorial CSS

Dalam tutorial ini kita akan membahas mengenai salah satu fitur dari CSS3 yang digunakan untuk membuat gradient warna, jika dalam tutorial sebelumnya kita telah belajar mengenai bagaimana cara merubah warna dengan menggunakan CSS, dimana kita hanya belajar memberi satu warna saja pada sebuah objek.

Nah di tutorial ini agar berbeda kita akan belajar mengenai fitur CSS3 yaitu  Gradient Color yang digunakan untuk membuat perpaduan beberapa warna pada sebuah objek.

Pada CSS 3 terdapat beberapa 2 tipe dari gradient warna yaitu :

  1. Linier gradient
  2. radial gradient

Baik kita akan membahasnya satu persatu tipe dari gradient warna ini.

 

 

Linier Gradient

Linier Gradient digunakan untuk menggabungkan beberapa warna sekaligus, dengan perpaduan warna dengan komposisi vertical (bawah ke atas atau sebaliknya), atau horizontal (kiri ke kanan atau sebaliknya).

Untuk perintah dari Linier Gradient adalah seperti berikut ini :
background: linear-gradient(arah_perubahan_warna, warna ke -1, warna ke -2, warna ke – N);

 

Untuk memahami contohnya silahkan perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama linear-gradient.html, lalu kita buka di browser maka hasilnya adalah

Maka hasilnya adalah seperti gambar diatas, baik kita akan coba bahas satu persatu :

  • Objek pertama yang menggunakan id “kotak_atas_ke_bawah”, warna yang terbuat adalah perpaduan antara warna orange dan kuning dengan komposisi gradient warna dari atas ke bawah, hal tersebut karena kita menuliskan linear-gradient(orange, yellow); , karena kita tidak memberikan nilai pada parameter pertama untuk menentukan pola warna sehingga warna ditampilkan dari atas ke bawah.
  • Objek kedua yang menggunakan id “kotak_kiri_ke_kanan”, warna yang terbuat sama perpaduan antara orange dan kuning dengan komposisi gradient warna dari kiri ke kanan, karena parameter pertama kita berikan nilai “to right”
  • Objek ketiga yang menggunakan id “kotak_kiri_atas_ke_kanan_bawah”, warna yang terbuat sama perpaduan antara orange dan kuning dengan komposisi gradient warna dari kiri atas ke kanan bawah, karena parameter pertama kita berikan nilai “to bottom right”
  • Objek ketiga yang menggunakan id “kotak_multi_warna”, warna yang terbuat sama perpaduan antara orange, kuning, dan biru karena kita memberikan nilai “orange,yellow, blue”

 

Radial Gradient

Radial Gradient ini digunakan untuk membuat perpaduan warna secara radial (melingkar), teman – teman bisa membuat perpaduan dengan perintah berikut ini :

background: radial-gradient(warna ke -1, warna ke -2, warna ke – N);

Untuk memahami konsep dari radial gradient silahkan perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama radial-gradient.html, lalu kita buka di browser maka hasilnya adalah seperti berikut ini :

Maka hasilnya adalah seperti gambar diatas, penjelasannya adalah sebagai berikut :

  • Objek pertama yang menggunakan id “kotak_1” perpaduan warnanya adalah orange, kuning, dan hijau, karena kita memberikan nilai “orange, yellow, green”
  • Objek kedua yang menggunakan id “kotak 2” perpaduan warnaya adalah orange, kuning, dan hijau, tetapi terdapat presentase dari masing masing warna yang membentuk radial, semakin besar nilai presentasenya maka akan semakin besar area warna yang ada pada radial.
  • Objek ketiga yang menggunakan id “kotak 3” perpaduan warnanya adalah orange, kuning, dan hijau, tetapi warna radial ini akan membentuk lingkaran berbeda dengan 2 objek sebelumnya yang mengikuti ukuran dari objeknya, radial warna pada objek ini berbentuk lingkaran karena nilai “circle” pada parameter pertama.

 

Bagaimana teman – teman mudah bukan membuat gradient warna, baik linear-gradient ataupun radial gradient, teman – teman hanya tinggal menuliskan propertinya dan value dari masing – masing propertinya.

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *