Membuat Gradient Background Blogspot dengan CSS3

Posted by Gani Mugni 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 Gani Mugni
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.

0 komentar:

Posting Komentar

Panduan blog dan SEO support Jual Online Baju Wanita - Original design by Bamz | Copyright of Azhara Blog.