Jumat, April 29, 2011

Bikin Efek Gradient di blog

Gradient? apakah gradient itu? saya tidak bisa menjelasknannya, lebih baik jika kita lihat contoh dibawah saja. Jika tidak kelihatan, ada kemungkinana browser anda tidak mendukung,oleh karena itu, tidak ada yang bisa saya lakukan.


Nah, Pernah Berfikir memakai efek gradient pada blog? tapi harus pakai gambar? itu dulu, sekarang tidak. Sekarang kita bisa menggunakan efek gradient pada blog dengan mudah, walaupun beberapa browser mungkin ada yang tidak mendukung code tersebut. . .

Ok, Mari kita mulai ya?

Caranya hampir sama seperti cara membuat lengkungan pada blog,

tapi sekarang kita akan membuat efek gradient

Yang kita perlukan hanya code code berikut

background:-moz-radial-gradient(150px 150px 0deg, circle closest-side, #ff0000 0%, orange 50%, yellow 100%);
background:-webkit-gradient(radial, 150 150, 100, 150 150, 40, from(yellow), to(red), color-stop(.4,orange));

contoh:

puluthriau - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

Mau????

Cara pemasangan pada css? biasanya para blogger akan menerapkan gradient untuk background blognya,

cara penempatan codenya sebagai berikut

body{
color:#AAA;
background: -moz-linear-gradient(top, #FF0000, #FFF000);
background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#FFF000));
font:normal 0.6em/1.8em Verdana,sans-serif;
min-width:980px;
}

Mudah-mudahan berguna.

Selamat Mencoba

9 komentar:

  1. Waw, Nice Trick. Thanks

    BalasHapus
  2. Thanks a million for visiting, how have you been friend? Carlos from Brazil

    BalasHapus
  3. i'm just fine, thanks for visiting. :D

    BalasHapus
  4. aku paling sukla baca-baca tentang pengkodean dan yang berhubungan dngan gambar... artikelnya bisa di praktekan

    BalasHapus
  5. Mudah-mudahan JB suka dengan artikel dari puluthriau . . . :D

    BalasHapus
  6. Semacam efek gradasi warna gitu tah sob

    mantab

    BalasHapus
  7. Bisa dibilang Seperti itulah, tapi ini menggunakan CSS untuk membuatnya .. :D
    Terima Kasih Telah berkunjung...

    BalasHapus
  8. Mantap ne trik nya

    BalasHapus

Giliran Kalian Yang berkomentar, Jangan Malu-Malu.
Hubungi Saya Jika Ada Masalah . . .