Pada kesempatan kali ini saya akan menjelaskan cara membuat gradiasi di css. Seperti pada umumnya dan sering banyak yang saya temukan dari banyak nya studi kasus tersebut kebanyakan orang ketika hendak membuat gradiasi efek  menggunakan aplikasi photo editing seperti Photoshop untuk dapat menghasilkan gambar yang ber gradiasi, hal tersebut sebenar nya bebas-bebas saja asalkan hasil tersebut sama, hanya saja kekurangan dari cara tersebut adalah di mana dapat mempengaruhi loading time website teman-teman, karena menggunakan gambar yang dapat memakan resource website, apalagi jika gambar tersebut berukuran yang cukup besare, tentunya saya tidak menyarankan hal tersebut, namun pada penjelasan saya kali ini sedikit berbeda, dimana dengan memanfaatkan property bawaan css.

Gradien tersebut sudah support untuk sebagian browser seperti Firefox, IE, Chrome, dan Safari. Untuk membuatnya, teman-teman bisa lihat contoh di bawah ini.

Berikut Tahapan nya:

  1. Teman-teman bisa buatkan satu buah file.html dan satu buah file .html terlebih dahulu dengan nama bebas, namun pada contoh di sini saya beri nama file tersebut menjadi latihangradien.html dan gradien.css
  2. Ketikan perintah html pada file latihangradien.html seperti berikut di bawah ini:

3.  ketikan perintah css pada file gradien.css seperti berikut di bawah ini:

keterangan :

kode di atas adalah untuk penamaan selektor di css dan dapat di sesuaikan dengan keinginan teman-teman, yang terpenting pada saat pemanggilan class di html harus sesuai dengan nama tersebut.

kode di atas adalah untuk memberikan efek gradiasi di browser IE, startColorstr=’#f00′ adalah untuk warna awal gradiasi tersebut dengan warna merah dan endColorstr=’#333′ adalah untuk warna akhir gradiasi tersebut dengan warna hitam

kode di atas adalah untuk memberikan efek gradiasi di browser webkit seperti Chrome dan Safari , kode Linear adalah untuk tipe gradiasi nya. terdapat beberapa pilihan diantaranya: Radial, Angle, dll, from(#f00) adalah warna awal untuk gradiasi tersebut dan to(#333) adalah warna akhir untuk gradiasi tersebut.

kode di atas adalah untuk memberikan efek gradiasi di browser mozila firefox versi 3.6 dan seterusnya. Untuk penjelasan tersebut sama hal nya seperti penjelasan di atas sebelum nya.

Simpan, dan lihat hasilnya pada browser, maka akan tampil seperti berikut:

cara-membuat-gradient-di-css

Demikian penjelasan saya mengenai cara membuat gradiasi di css, semoga bermanfaat.