CSS3 Linear Gradient, Fitur Baru Opera 11.11

Berbahagialah untuk para web designer, CSS3 mania dan para pengguna Opera. Di samping terus mengembangkan opera mobile, pihak opera juga terus menambahkan fitur-fitur terbarunya untuk versi desktop, dan  saat ini Opera browser versi 11.11 telah mendukung colour gradient untuk background walau hanya untuk ‘linear’, sedangkan untuk ‘radial’ kayaknya belum bisa.

Dengan adanya fitur gradient ini, para web designer sudah bisa menambahkan efek gradient pada theme yang digunakan (khusus ditujukan kepada para pengguna Opera). Dengan adanya fitur ini beberapa elemen di blog ini langsung saya edit agar bisa support linear gradient ketika diakses dari Opera terbaru. Dan mulai saat ini ketika pengunjung mengakses blog ini dengan Opera terbaru, tampilannya akan sama ketika dibuka dengan Firefox, Chrome, dan Safari, terutama di bagian-bagian yang saya beri efek gradient, seperti bagian menu navigasi dan footer pada halaman home, judul pada bagian sidebar, related post dan bagian komentar pada postingan.

Untuk kode dasar penulisan linear gradient agar support pada browser Opera yaitu :

background-image: -o-linear-gradient(rgb(100,100,100),rgb(200,200,200));

Anda bisa membuat variasi angle atau arah dari linear gradient bisa dari atas (top), bawah (bottom, kiri (left), atau kanan (right). Contoh :

background-image: -o-linear-gradient(top,rgb(100,100,100),rgb(200,200,200));

Untuk presisi dari angle linear gradient, disamping bisa dengan top, bottom, left dan right, anda bisa menggunakan nilai dari sebuah derajat, misalnya 0deg. Contoh :

background-image: -o-linear-gradient(0deg,rgb(100,100,100),rgb(200,200,200));

Anda bisa menggunakan nilai derajat dari 0 – 360, atau kebalikannya dengan menambahkan tanda minus (-) di depan nilai derajat (deg) tersebut.

Efek lainya yang bisa anda buat yakni variasi dan kombinasi dari warna yang digunakan (colour stops), misalnya jika ingin membuat efek gradient dengan kombinasi warna dari merah agak terang ke merah agak gelap dengan angle top left to bottom right, kodenya kira-kira seperti ini :

background-image: -o-linear-gradient(top left,rgb(255,0,0),rgb(150,0,0));
#atau seperti ini
background-image: -o-linear-gradient(top left,rgb(255,0,0) 0%,rgb(150,0,0) 100%);

Variasi lainnya yang bisa anda buat dengan linear gradient pada Opera ini yaitu : transparent gradient, multiple colour, repeating gradient dan lain-lain. Dan di bawah ini beberapa contoh kode CSS supaya bisa menampilkan linear gradient pada browser Opera terbaru, Firefox, Chrome dan Safari (browser lainnya belum saya coba).

1. Gradients

#IDgradient{
background-image: -moz-linear-gradient(rgb(100,100,100),rgb(200,200,200));
background-image: -o-linear-gradient(rgb(100,100,100),rgb(200,200,200));
background-image: -webkit-linear-gradient(rgb(100,100,100),rgb(200,200,200));
background-image: linear-gradient(rgb(100,100,100),rgb(200,200,200));
}

2. Transparent Gradient

#IDtransparent{
background-image: -moz-linear-gradient(top left,rgba(100,100,100,1),rgba(100,100,100,0.5));
background-image: -o-linear-gradient(top left,rgba(100,100,100,1),rgba(100,100,100,0.5));
background-image: -webkit-linear-gradient(top left,rgba(100,100,100,1),rgba(100,100,100,0.5));
background-image: linear-gradient(top left,rgba(100,100,100,1),rgba(100,100,100,0.5));}

3. Multiple colour Gradient

#IDmultiplecolour{
background-image: -moz-linear-gradient(top left,rgb(255,0,0),rgb(100,0,0) 50%,rgb(50,0,0) 75%,rgb(150,0,0));
background-image: -o-linear-gradient(top left,rgb(255,0,0),rgb(100,0,0) 50%,rgb(50,0,0) 75%,rgb(150,0,0));
background-image: -webkit-linear-gradient(top left,rgb(255,0,0),rgb(100,0,0) 50%,rgb(50,0,0) 75%,rgb(150,0,0));
background-image: linear-gradient(top left,rgb(255,0,0),rgb(100,0,0) 50%,rgb(50,0,0) 75%,rgb(150,0,0));}

4. Repeating Gradient

#IDrepeatinggradient{
background-image: -moz-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
background-image: -o-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
background-image: -webkit-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);}