Gradient CSS

Membuat Gradien Warna di CSS3

Membuat Gradien Warna di CSS3 – Perkembangan CSS semakin kesini cenderung semakin pesat. Kemunculan versi terbarunya yaitu CSS3, membawa serta fitur – fitur baru yang tentunya semakin memudahkan pekerjaan para web programmer.

Salah satu fitur baru yang dibawa CSS3 adalah adanya property gradient. Property ini digunakan untuk membuat warna gradient. 🙂

Property gradient masih termasuk dalam status draft yang belum sepenuhnya menjadi standar W3C . Karena itulah untuk mendukung property – property seperti ini, web browser memilih untuk menggunakan Vendor Prefix. Apa itu vendor prefix dan mengapa harus menggunakannya? Jika kamu ingin mengetahui lebih lanjut, saya sudah membahasnya di artikel sebelumnya, yaitu Pengertian CSS Vendor Prefix.

Awalan vendor prefix :

-moz- (untuk web browser Mozilla Firefox)

-o- (untuk web browser Opera)

-webkit- (untuk web browser Chrome)

-ms- (untuk web browser Internet Exploler)

Macam – macam gradient :

Property gradient memiliki dua jenis yaitu linear dan radial. Linear gradient memulai gradasi warna dari pinggir objek, sedangkan radial gradient memulai gradasi warna dari tengah objek.

Linear Gradient

Untuk membuat linear gradient kita dapat menggunakan property linear-gradient, yang kemudian diikuti dengan kode warna.

linear-gradient (kode warna1, kode warna 2);

Jika menggunakan vendor prefix maka ditambahkan diawalan propertinya. Perhatikan contoh berikut :

Membuat Gradien Warna di CSS3

 

Apa bisa lebih dari dua warna? Jawabannya bisa. Kita akan mencoba membuat gradasi menggunakan tiga warna, yaitu warna merah(red), kuning(yellow), dan biru(blue).

Membuat Gradien Warna di CSS3

 

Selain diisi dengan value warna, kita juga bisa menambahkan value deg(derajat) dan intensitas. Misalnya kita ingin agar gradasi warna dimulai dari pojok kanan atas, maka kita dapat menambahkan value 45deg.

Membuat Gradien Warna di CSS3

 

Sedangkan maksud intensitas disini adalah pengaruh warna satu dengan warna yang lain. Misalnya kita ingin agar warna merah lebih mendominasi daripada warna kuning. Maka kita tinggal menambahkan value dengan satuan %(persen) setelah kode warna. Perhatikan contoh berikut:

Membuat Gradien Warna di CSS3

 

 

Lalu kita juga dapat mengulang- ulang warna tersebut, dengan menambahkan property repeating.

Membuat Gradien Warna di CSS3

 

Radial gradient

Untuk membuat radial-gradient caranya hampir sama dengan membuat linear-gradient. Cukup dengan mengganti linear dengan radial.

radial-gradient (kode warna 1, kode warna 2);

Contoh hasil radial-gradient :

Membuat Gradien Warna di CSS3

Membuat Gradien Warna di CSS3

 

Sekian untuk tutorial CSS3 gradient kali ini. Semua kode CSS diatas hanyalah contoh agar memudahkan dalam mempelajari CSS3 gradient. Kamu bisa mengembangkan dengan warna-warna lain, maupun disesuaikan dengan keinginan.

 

 

Leave a Reply

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