Trik Membuat Gradient Background dengan CSS3

Trik Membuat Gradient Background dengan CSS3

Hallo teman-teman blogger, mohon maaf blog ini sempat mati suri akibat dari kesibukan saya yang tidak bisa saya tinggalkan. Pada kesempatan ini saya juga akan mengevaluasi komentar teman-teman dan Insya Allah saya akan datang berkunjung juga, disamping mempererat tali silaturahmi sekaligus saling memberikan Backlink agar blog-blog kita tetap hidup.


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;
1. Gudang Informasi
2. Traffic Search Engine
3. ArtikelKomputer Bisnis Internet Design Grafis
4. SettingPercetakan
5. Download Logo Gratis
6. fansclubartis
7. SEO Tutorial
8. blog dofollow
9. ilmu belajar komputer
0. download pc media terbaru
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}