Membuat efek shadow image menggunakan CSS

Hi..
Dalam menampilkan sebuah gambar pada blog ada bermacam-macam style , ada yang dikasi border, da yang nyempetin ngedit gambar aslinya. (doh)
ini contohnya :

contoh 1.

contoh 2.

contoh 3

keterangan :
Pada contoh 1, gambar tersebut tidak diberi style apapun sehingga tampilanya biasa. Untuk gambar kedua sudah diberi style yaitu diberi bingkai atau border menggunakan CSS. Dan untuk gambar yang ketiga diberi efek shadow atau berbayang.

Berikut cara membuat style seperti contoh 2.
Buatlah code css seperti dibawah ini :

<style type="text/css">
#img1{
  padding:5px 5px 5px 5px;
  border:none;
  border:1px solid #ddd;
  background:#fff;
  text-align:center;
}
</style>

kemudian taruh kode tersebut didalam template / theme blog anda, selanjutnya agar gambar yang anda posting secara otomatis memiliki style seprti contoh no 2 maka taruhlah code id="img1" pada source image anda..

<img src="alamat/gambar.jpg" id="img1" />

maka secara otomatis gambar tersebut akan memiliki style seperti pada contoh 2.

kemudian untuk membuat style seperti contoh 3 yaitu efek shadow atau bayangan. Masih sama seperti contoh diatas, terlebih dahulu buat script CSS seperti dibawah ini :

<style type="text/css">
#img2{
  padding:5px 5px 15px 5px;
  border:none;
  background:#fff;
  text-align:center;
  -moz-box-shadow: 1px 3px 5px  #999;
}
</style>

kemudian untuk menampilkan efekna pada gambar taruhlah code id="img2" pada source image anda.

<img src="alamat/gambar.jpg" id="img2" />

keterangan dari code dari CSS:
padding:5px 5px 15px 5px; : Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam, urutan nilai angkanya adalah atas, kanan, bawah dan kiri.

border:none; : Adalah garis tepi dari komponen atau bingkai, pengaturanya bisa diseting seperti ini : border:1px solid #ddd; dengan urutan 1px = tebal dari bingkainya, solid = jenis dari bingkai, #ddd = kode warna dalam hexadecimal, untuk kode warna anda juga bisa menggunakan kode warna seperti black,yellow,red dll.

background:#fff; : menentukan warna latar.

text-align:center; : membuat gambar menjadi rata tengah atau center.

-moz-box-shadow: 1px 3px 5px #999; : code css3 untuk membuat efek shadow.


Gampangkan cara membuat efek shadow menggunkan CSS, efek shadow ini juga bisa digunain bukan hanya untuk menampilkan gambar, tapi juga bisa untuk tag2 div yang lainya.

Udah dulu yah postingannya, semoga masih ada ide lagi untuk membuat artikel yang lebih menarik (amin)

salam......
Ali Mashuri