jendelablog.wordpress.com

budiscyan weblog area's

Menambahkan efek shadow

Sedikit tambahan tentang CSS, jika anda adalah multiply newbi seperti saya yang suka merombak theme tidak ada salahnya tau satu CSS efek ini. CSS ini memberikan semacam efek bayangan pada site anda.


Anda bisa menambahkan kode ini pada bagian-bagian tertentu yang anda kehendaki :

-moz-box-shadow: 10px 10px 5px #222;
-webkit-box-shadow: 10px 10px 5px #222;
box-shadow: 10px 10px 5px #222;

contoh :

itembox {

-moz-box-shadow: 10px 10px 5px #222;
-webkit-box-shadow: 10px 10px 5px #222;
box-shadow: 10px 10px 5px #222;

}

Keterangan:

Adapun 4 bagian yang terdapat dalam box shadow adalah :

  • Horizontal offset : Jika nilainya positif maka bayangan akan berada disebelah kanan kotak, dan jika negatif maka bayangan akan berada disebelah kiri kotak.
  • Vertikal offset : Jika nilainya positif maka bayangan akan berada dibawah kotak, dan jika negatif maka bayangan akan berada diatas kotak.
  • Blur radius : Jika nol maka akan seperti bayangan biasa, dan jika nilainya semakin besar maka bayangan akan tampak menjadi blur.
  • Warna dari bayangan.

tambahan: untuk bayangan di dalam anda bisa menambahkan kode inset.

contoh:

itemboxsub {
-moz-box-shadow: inset 0 0 5px 5px #222;
-webkit-box-shadow: inset 0 0 5px 5px #222;
box-shadow: inset 0 0 5px 5px #222;
}

semoga bermanfaat


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Information

This entry was posted on 26 Maret 2011 by in artikel.

Kategori

Blog Statistic

  • 21,292 hits

Contact

%d blogger menyukai ini: