Home / Trik dan Tips Blog / Membuat Gradient Background Blogspot dengan CSS3

Membuat Gradient Background Blogspot dengan CSS3

Posted by Unknown Selasa, 03 Januari 2012 0 komentar

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: -moz-linear-gradient(100% 100% 90deg, #000, #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));

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%;

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}

Referensi Web: the-art-of-web.com, sitepoint.com, developer.mozilla.org

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: Membuat Gradient Background Blogspot dengan CSS3
Ditulis oleh Unknown
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://azharadzuan.blogspot.com/2012/01/membuat-gradient-background-blogspot.html. Terima kasih sudah singgah membaca artikel ini.