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);}
wah jadi kepengen nyoba opera juga ane,
Reply
Lama nggak pake opera. Sekarang lagi menikmati kebersamaan dengan jeng mozila….
Boleh juga nih dicoba. Infonya mantab bung…
Reply
tapi lemot mas,,,, mding google chrome
Reply
Hybrid car Reply:31-05-2011 at 10:51
Iya to mas ? kalau dibanding mozilla gimana ?
Reply
download film gratis Reply:7-06-2011 at 06:51
q ce mding google chrome, jos bgt lah
Reply
ga sia sia mampir sini banyak ilmu yang bisa dipelajari,makasih banyak,,
Reply
Hybrid car Reply:1-06-2011 at 08:46
Betul sob, mangkanya itu sering mampir….
Reply
dulu pernah install nih Opera di OS saya, namun keburu tak uninstall lagi dah :P
dan ada 2 browser sih, ntar malah gk kepake opera pan japa nya `eh`
Reply
saya buka ini dengan mozilla 3.6
mantabs habis
Reply
tp aku lbh seneng pakai mozilla sama googlechrome mas, opera loadnya lambat bgt. Mungkin krn terlalu banyak fitur kali ya?
Reply
pngen coba tp ga’ bsa d download.
Reply
wah ya bagus nih sangat mernaik
Reply
waw keren banget nih infonya
Reply