CSS3 | Efek Gradient Pada Blog

Sepertinya posting kali ini menarik, kenapa? karena tentang CSS3 lagi hahaha. Kali ini tentang cara membuat Efek Gradient Pada Blog. Iyap, sekarang gradient saja sudah bisa di buat dengan CSS, betapa majunya teknologi sekarang. Nah tanpa basa basi dan agar tidak terlalu panjang dan lebar langsung saja ke Step.By.Step!!!

Kode CSS yang di gunakan untuk efek gradient adalah seperti ini
background: #ffa45a;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d');
background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d));
background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);
Berikut keterangan kode di atas :
background: #ffa45a;
warna background yang akan muncul apabila browser tidak mendukung

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d');
merupakan kode efek gradiasi untuk browser IE. StartColorstr='#ffa45a' adalah warna awal gradiasi dan endColorstr='#ba5b0d' adalah warna akhir gradiasi

background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d));
merupakan kode efek gradiasi untuk browser webkit seperti Safari, Google Chrome, dll. Linear adalah tipe gradiasi. Anda dapat mengganti dengan Radial, Angle, dll. From(#ffa45a) adalah warna awal gradiasi dan to(#ba5b0d) adalah warna akhir gradiasi.

background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);
merupakan kode efek gradiasi untuk browser Firefox v3.6 keatas. Linear adalah tipe gradiasi anda mengganti dengan Radial, Angle, dll. #ffa45a adalah warna awal gradiasi dan #ba5b0d adalah warna akhir gradiasi.
Untuk peletakan anda bisa memasukannya ke dalam tag CSS anda. Misalnya untuk background blog anda, maka kode yang haru di cari adalah body {. Cara meletakan
body {
background: #ffa45a;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d');
background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d));
background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);
}
Untuk DEMO
Sekian posting dari saya kali ini, saya akhiri wassalam

4 komentar:

Jana Virananda, 20 November 2010 at 09:02 | [Reply]

Keren, ternyata kode warna udah bisa gradien :)

DanIndBas, 20 November 2010 at 09:26 | [Reply]

@Mr.Kelpo Yups udah bisa , Terus berkunjung gan , dan Makasih atas kunjungannya .

Dimas Abi Galoga, 20 November 2010 at 09:38 | [Reply]

@Mr.Kelpo itu dia hebatnya css3 gan

Unknown, 21 May 2011 at 00:53 | [Reply]

wah hebat dah teknologi sekarang!
admin,apa masih ada versi lainnya selain CSS3?

Post a comment

Kotak Komentar Klasik Klik Di sini

« Prev Next » Home