Mengenal Lebih Jauh Tentang CSS3 Linear Gradient

Mengenal Lebih Jauh Tentang CSS3 Linear Gradient - Membuat warna yang berbeda-beda di salah satu TAB kolom halaman pada blog Anda, mungkin sangat mudah dilakukan dengan penggunaan CSS background-color seperti hijau, kuning, merah dan lain sebagainya yang jika kita deklarasikan dalam penggunaan kode HEKSA dapat kita tuliskan seperti ini :

Penggunaan HEKSA Warna Dalam Bahasa HTML

KODE WARNA	HASIL TAMPILAN
#080000
#e06666
#38f
#3cef45
red
magenta
blue

Perubahan dapat kita terapkan lebih jauh lagi, tentunya dengan penggunaan sintaks elemen CSS3 Linear Gradient. Namun untuk dapat menerapkan sintaks ini, pertama kita harus tahu awal kedatangan gradient tersebut diproduksi, misalnya dapat kita tuliskan left bottom, top bottom (apakah dari kiri bawah atau dari atas bawah).

Artikel Terkait :
1. Mengenal CSS Dasar Box Shadow
2. Memahami Dengan Mudah Bentuk Kinerja CSS Animasi



TAHAP I - Mengenal Sintaks
Berikut beberapa sintaks Gradient yang dapat Anda gunakan:

1. linear-gadient
2. radial-gradient
3. repeating-linear-gradient
4. repeating-radial-gradient

PENULISAN FUNGSI

PENGGUNA	ELEMEN KODE
Chrome Dan Safari 4+	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
Chrome 10+ Dan Safari 5.1+	background: -webkit-linear-gradient(top, #fff, #000);
Firefox 3.6+	background: -moz-linear-gradient(top, #fff, #000);
Opera 10+	background: -o-linear-gradient(top, #fff, #000);
W3C	background: linear-gradient(top, #fff, #000);
Internet Explorer 6 - 9	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
Internet Explorer 10+	background: -ms-linear-gradient(top, #fff, #000);

TAHAP II - Penerapan Sintaks
1. Linear Gradient

span {
  background:-webkit-linear-gradient(left top, red, blue);
  background:-moz-linear-gradient(left top, red, blue);
  background:-ms-linear-gradient(left top, red, blue);
  background:-o-linear-gradient(left top, red, blue);
  background:linear-gradient(left top, red, blue);
}

1.1 Linear Gradient Dengan Warna Berganda
Bahkan disini, Anda dapat menggunakan beberapa ragam warna yang berbeda dalam satu area. Pada intinya warna apa yang akan Anda tambahkan, selalu berikan tanda koma (,) sebagai pemisah atau spasi batas seperti ini:

span {
  background:-webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
  background:-moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
  background:-ms-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
  background:-o-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
  background:linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
}

1.2 Linear Gradient Dengan Nilai
Pada tahapan ini, kita coba mengubah keseimbangan warna dalam pembagian ruang dalam satu area, sehingga jika kita menyisipkan dua warna yang berbeda, maka letak warna yang pertama akan mendapatkan bagian ruang sebesar 0%, sedangkan letak warna yang ke dua akan mendapatkan bagian ruang 100%. Dengan menambahkan nilai pada masing-masing warna, Anda dapat menentukan dan mengatur luas warna pada ruang dalam satu area seperti ini:

span {
  background:-webkit-linear-gradient(top left, red, yellow, green 60%, purple 60%, blue);
  background:-moz-linear-gradient(top left, red, yellow, green 60%, purple 60%, blue);
  background:-ms-linear-gradient(top left, red, yellow, green 60%, purple 60%, blue);
  background:-o-linear-gradient(top left, red, yellow, green 60%, purple 60%, blue;
  background:linear-gradient(top left, red, yellow, green 60%, purple 60%, blue);
}

2. Radial Gradient

span {
  background:-webkit-radial-gradient(white, black, #080);
  background:-moz-radial-gradient(white, black, #080);
  background:-ms-radial-gradient(white, black, #080);
  background:-o-radial-gradient(white, black, #080);
  background:radial-gradient(white, black, #080);
}

3. Repeating Linear Gradient

span {
  background:-webkit-repeating-linear-gradient(left, red 10%, blue 30%);
  background:-moz-repeating-linear-gradient(left, red 10%, blue 30%);
  background:-ms-repeating-linear-gradient(left, red 10%, blue 30%);
  background:-o-repeating-linear-gradient(left, red 10%, blue 30%);
  background:repeating-linear-gradient(left, red 10%, blue 30%);
}

4. Repeating Radial Gradient

span {
  background:-webkit-repeating-radial-gradient(top left, circle, red, blue 10%, red 20%);
  background:-moz-repeating-radial-gradient(top left, circle, red, blue 10%, red 20%);
  background:-ms-repeating-radial-gradient(top left, circle, red, blue 10%, red 20%);
  background:-o-repeating-radial-gradient(top left, circle, red, blue 10%, red 20%);
  background:repeating-radial-gradient(top left, circle, red, blue 10%, red 20%);
}