Assalamualaikum Sobat Blogger, Apa kabar nih ? :) di sekian posting kali ini Roxx mau ngasih tutorial cara Membuat Gradient Background 2 Warna Blogspot dengan CSS 3 yup sebenernya bisa lebih dari dua warna ( sparasi) tapi kalo untuk background warnanya jangan banyak2 yach... ( nanti jadi bagus, wkwkwk) yap untuk tidur lebih dalam lagi (maksudnya to do point)eh.. kaya pesulap yg di tv hehehe.... (cengengesan :D) yup langsung aja kita lihat kode dasar CSS 3 untuk Gradient berikut ini :
Kode Dasar CSS 3 untuk Gradient
Support Browser Firefox :
background-image: -moz-linear-gradient( point, warna1, warna2);
Repeat Gradient Support Browser Firefox :
background-image: -moz-repeating-linear-gradient( point, warna1, warna2);
Support Browser Safari :
background-image: -webkit-gradient( linear, point1, point2, from(warna1), to(warna2) );
Repeat Gradient Support Browser Safari :
background-image: -webkit-gradient( linear, point1, point2, from(warna1), to(warna2) ); -webkit-background-size: ukuran dalam persen;
Bisa dilihat dari kode dasar gradient diatas bahwa untuk membuat suatu background dengan gradarasi warna ( perpaduan antara dua warna ) ditentukan oleh titik awal ( point1 ) ke titik akhir ( point2 ) dan warna awal:mulai ( warna1 ) ke warna akhir:selesai ( warna2 ). Gunakan kedua kode Support Browser tersebut untuk mendukung beberapa Browser. Untuk lebih jelasnya perhatikan contoh kode berikut ini : [ untuk mau ngeliat kode warna mending kesini aja ]
Contoh kode Gradient 2 Warna
background-image: -moz-linear-gradient(top, #000, #CCC);
background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#CCC));
background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#CCC));
background-image: -moz-linear-gradient(100% 100% 90deg, #000, #FF0000);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#FF0000));
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#FF0000));
Contoh kode Gradient banyak warna (Pelangi)
background-image: -moz-linear-gradient( left top, right bottom ,
from(red),
color-stop(16%, orange),
color-stop(32%, yellow),
color-stop(48%, green),
color-stop(60%, blue),
color-stop(76%, indigo),
to(violet));
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0.00, red),
color-stop(16%, orange),
color-stop(32%, yellow),
color-stop(48%, green),
color-stop(60%, blue),
color-stop(76%, indigo),
color-stop(1.00, violet));
from(red),
color-stop(16%, orange),
color-stop(32%, yellow),
color-stop(48%, green),
color-stop(60%, blue),
color-stop(76%, indigo),
to(violet));
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0.00, red),
color-stop(16%, orange),
color-stop(32%, yellow),
color-stop(48%, green),
color-stop(60%, blue),
color-stop(76%, indigo),
color-stop(1.00, violet));
Contoh kode Gradient Repeat
background-image: -moz-repeating-linear-gradient(100% 100% 90deg, #000, #FF0000);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#FF0000));-webkit-background-size: 10% 100%;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#FF0000));-webkit-background-size: 10% 100%;
Selipkan kode CSS 3 tersebut pada tag Body { TaroDisini; .... ; .... ; } yang berada dibawah kode <b:skin><![CDATA[ atau kalian bisa selipkan dimana saja sesuka hati dan kreasi anda [ :) be unique ] contoh penerapan kode sebagai berikut :
body{color:#ffff; background-image: -moz-linear-gradient(top, #000, #CCC);
background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#CCC)); font-family:"Tahoma",Georgia,Serif; font-size:12px;background-attachment: fixed}
background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#CCC)); font-family:"Tahoma",Georgia,Serif; font-size:12px;background-attachment: fixed}
Referensi Web: the-art-of-web.com, sitepoint.com, developer.mozilla.org