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 WARNAHASIL 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).

Gradient syntax image


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
PENGGUNAELEMEN 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);
W3Cbackground: linear-gradient(top, #fff, #000);
Internet Explorer 6 - 9filter: 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%);
}

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Mengenal Lebih Jauh Tentang CSS3 Linear Gradient
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

11 komentar

  1. hmm... saya masih nggak paham :-)

    BalasHapus
    Balasan
    1. makanya kenalan lebih jauh lagi biar paham, hehehe....

      Hapus
    2. kalau sudah kenal, pasti sayang dan kalau sudah sayang pasti cepat PAHAM, hehe

      Hapus
    3. sebenarnya saya pengen nih nerapin gradient di blog saya, terutama pada backgroundnya. saya pelajari dulu ya mbak (o)

      Hapus
    4. silahkan kang, saya sudah mencoba menerapkan salah satu fungsi elemen diatas pada warna background MENU NAVIGASI

      Hapus
  2. yang bentuk lonjong itu yang cantik mbak menurut saya (h)

    BalasHapus
    Balasan
    1. Radial Gradient dapat kita tambahkan nilai persen (%) atau satuan pixel (px) pada start awal direksi seperti Circle dan Ellipse, sehingga posisi warna dapat kita tentukan letaknya dan ukurannya seperti ini:
      [pre]//sifat Ellipse
      span {
      background:-webkit-radial-gradient(30% 30%, ellipse closest-corner, white, black, #080);
      background:-moz-radial-gradient(30% 30%, ellipse closest-corner, white, black, #080);
      background:-ms-radial-gradient(30% 30%, ellipse closest-corner, white, black, #080);
      background:-o-radial-gradient(30% 30%, ellipse closest-corner, white, black, #080);
      background:radial-gradient(30% 30%, ellipse closest-corner, white, black, #080);}

      //sifat Circle
      span {
      background:-webkit-radial-gradient(30% 30%, circle closest-corner, white, black, #080);
      background:-moz-radial-gradient(30% 30%, circle closest-corner, white, black, #080);
      background:-ms-radial-gradient(30% 30%, circle closest-corner, white, black, #080);
      background:-o-radial-gradient(30% 30%, circle closest-corner, white, black, #080);
      background:radial-gradient(30% 30%, circle closest-corner, white, black, #080);}[/pre]

      [blockquote]Circle dan Ellipse dapat ditambahkan sebelum menuliskan nilai warna untuk sekedar mempertegas bentuk radial dari gradien. Meskipun pada area tidak sama tinggi dan lebar suatu objek, namun bentuk yang bulat sempurna dapat dipertahankan, atau memilih atau memilih untuk membentuk elips.[/blockquote]

      ==<< Bentuk Radial-Gradient Dengan Direksi Ellipse dan Circle

      Hapus
  3. Tak kenal maka tak sayang ya mbak, maka dari itu saya akan mengenal CSS3 linear gradient ini di sini.

    BalasHapus
  4. bagus nih artikelnya mbak,dapat menambah wawasan saya tentang oprek CSS

    BalasHapus
  5. Jadi ingin belajar CSS3 nih, biar faham gradient. Gradient lurus, dan gradient memutar. Bisa pengulangan juga ya sobat?.

    Penerapan gradient ini selain untuk background-color, untuk apa saja ya sobat?. Kurang faham di penerapannya.

    Oh iya untuk bowser IE 6 s/d 9, penulisan element-code nya ribet ya?.

    BalasHapus
    Balasan
    1. pada tabel fungsi elemen untuk peramban seperti IE, diatas sudah saya siapkan IE 6-9 dan IE 10+, memang cukup ribet, karena tidak semua menggunakan webkit dan Ms.

      fungsi elemen ini cukup banyak sobat, selain untuk mendesain background, kita juga bisa menerapkan elemen gambar hanya dengan menggunakan konsep perpaduan warna yang berbeda, yang terpenting pada area,nilai dan target objek

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK