Cara Membuat Bayangan Image atau Box Shadow

Cara Membuat Bayangan Image atau Box Shadow

Membuat bayangan pada sebuah image atau yang lebih dikenal dengan istilah Box Shadow dilakukan untuk memperindah tampilan image pada halaman website atau blog.

Image yang diberi bayangan atau shadow akan terlihat seperti image 3

dimensi. bentuknya jadi terlihat seperti menggantung, atau seperti tidak menempel pada dasar halaman website/blog.
Pembuatan bayangan pada image ini bisa menjadi sesuatu yang sangat penting untuk dilakukan, manalkala seorang pemilik website/blog ingin menarik perhatian pengunjung pada image yang dipasangnya. Coba sahabat perhatikan kedua image dibawah ini, lalu bandingkan.Menurut sahabat image manakah yang lebih menarik perhatian pengunjung? Pasti jawaban sahabat sama seperti saya, yaitu image yang kedua yang sudah diberi bayangan, benar bukan?

Setelah kita mengetahui manfaat dari pembuatan bayangan pada image tsb, sekarang kita akan membahas cara pembuatannya. Caranya adalah sbb:
Pertama kita buat sebuah style css. Jika sahabat memakai template blogger, langkahnya seperti ini :
1. Login ke blogger sahabat
2. Pada halaman dashboard klik "design/rancangan"
3. Klik "Edit HTML"
4. Pada kotak pengeditan, sebelum "]]></b:skin>" tulis style seperti ini :

.boxshadow {

-webkit-box-shadow: 5px 5px 5px 0px #191a1c;

-moz-box-shadow: 5px 5px 5px 0px #191a1c;

box-shadow: 10px 10px 5px #999999;}

5. Lalu cari kode image sahabat, tambahkan "class". Kode imagenya jadi seperti ini :

<img class="boxshadow" src="...">

6. Simpan template sahabat
7. Selesai
Jika sahabat menulis kodenya dengan benar maka sekarang akan terlihat bayangan pada image yang sahabat pasang