• Post Title 1

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede ...

  • Post Title 2

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla ...

  • Post Title 3

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla ...

  • Post Title 4

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In dapibus. In pretium pede. Donec molestie facilisis ante. Ut a turpis ut ipsum pellentesque tincidunt. Morbi blandit sapien in mauris. Nulla lectus lorem...

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

0 komentar:

Posting Komentar

 
Copyright © kumpulan buku gratis. Original Concept and Design by My Blogger Themes | Tested by Blogger Templates | Best Credit Cards