Home » CSS » CSS3 Linear Gradient, Fitur Baru Opera 11.11

CSS3 Linear Gradient, Fitur Baru Opera 11.11

28 Mei. 201128 comments
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);}
Contoh tampilan/penampakan dari ke 4 model kode Gradient tersebut di atas :

1. Contoh Gradients

2. Transparent Gradient

3. Multiple Colour Stops

4. Repeating Gradient

Download Opera 11

Mudah-mudahan artikel tentang CSS3 Linear Gradient, Fitur Baru Opera 11.11 ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Border Style, Border Width, Border Color
  2. Cara Menggabungkan File CSS WordPress
  3. Menggulingkan Top Komentator
  4. Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll
  5. CSS3, Sonic Mengejar Bola
  6. Cara Mengganti Font Dalam Postingan
  7. Membuat Text Gradient Dengan CSS
  8. Yesterday, The Beatles
  9. 80 Inspirasi, Design Footer Nan Cantik Dan Unik
  10. Membuat Efek Text Stroke Dengan CSS
  1. 29-5-2011 at 09:25 | #1

    wah jadi kepengen nyoba opera juga ane,

    Reply

  2. 30-5-2011 at 08:57 | #2

    Lama nggak pake opera. Sekarang lagi menikmati kebersamaan dengan jeng mozila….
    Boleh juga nih dicoba. Infonya mantab bung…

    Reply

  3. 30-5-2011 at 09:31 | #3

    tapi lemot mas,,,, mding google chrome

    Reply

    Hybrid car Reply:

    Iya to mas ? kalau dibanding mozilla gimana ?

    Reply

    download film gratis Reply:

    q ce mding google chrome, jos bgt lah

    Reply

  4. 31-5-2011 at 10:22 | #4

    ga sia sia mampir sini banyak ilmu yang bisa dipelajari,makasih banyak,,

    Reply

    Hybrid car Reply:

    Betul sob, mangkanya itu sering mampir….

    Reply

  5. 2-6-2011 at 15:37 | #5

    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

  6. 3-6-2011 at 23:36 | #6

    saya buka ini dengan mozilla 3.6
    mantabs habis

    Reply

  7. 14-6-2011 at 12:33 | #7

    tp aku lbh seneng pakai mozilla sama googlechrome mas, opera loadnya lambat bgt. Mungkin krn terlalu banyak fitur kali ya?

    Reply

  8. 5-1-2012 at 06:09 | #8

    pngen coba tp ga’ bsa d download.

    Reply

  9. 7-4-2014 at 12:30 | #9

    wah ya bagus nih sangat mernaik

    Reply

  10. 16-4-2014 at 19:00 | #10

    waw keren banget nih infonya

    Reply

Comment pages
3+3=? (Wajib diisi)