Dijual Rumah di Kota Bandung
LT 140 m2 LB 110 m2 Harga Nego
untuk info KLIK disini

Jumat, 11 Februari 2011

Membuat Gradient Background Blogspot dengan CSS3

Ini 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

0 comments:

Posting Komentar