Efek Bayangan Pada Gambar

Kali ini saya akan membuat tutorial bagaimana untuk Edit Image dengan efek shadow / bayangan, fokus utama kita sudah pasti mengenai Image atau gambar.

Pada postingan kali ini saya akan menggunakan format CSS code untuk membuat efek bayang pada gambar atau memberi kesan bayangan pada gambar yang kita pasang-sehingga tampilannya menjadi sedikit lebih menarik.

Sebagai contohnya anda boleh lihat dibawah ini :
Pada gambar pertama ini saya akan memasang sebuah gambar dengan tampilan yang original

Pada gambar yang kedua saya telah menambahkan efek bayangannya, lihat dibawah ini :

Jika anda sudah cukup paham dengan yang saya maksud, kita edit scriptnya :

.shadow{box-shadow: 8px 8px 10px #424242;-webkit-box-shadow: 8px 8px 10px #424242;-moz-box-shadow: 6px 6px 10px #424242;filter: progid:DXImageTransform.Microsoft.dropShadow(color=#424242, offX=8, offY=8, positive=true);}

Copy kode diatas, kemudian masuk kedalam account blog anda -->> klik menu layout -->> Edit HTML -->> jangan lupa klik "expand widget template" -->> paste kode tadi diatas kode ]]></b:skin>-->> kemudian simpan.

Langkah selanjutnya adalah penerapan pada Image atau gambar, ambil sebuah url gambar, contoh :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRRh6eJWH0p5dcWOp0blDCWJmOiFENcJRHiRhVV6fHU__-uYZtdHUoRo3hjMI8FWvUQLnlnj0Jo-1tWIAfa1gw5PyS0GSSOP797359Igqo7vdEqsydDtRiytgGRA-pvskvBK6jrxh1wsP0/s1600-r/my_Logo.gif">

Kemudian tambahkan kode class="shadow" didalamnya, maka hasilnya akan seperti ini :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRRh6eJWH0p5dcWOp0blDCWJmOiFENcJRHiRhVV6fHU__-uYZtdHUoRo3hjMI8FWvUQLnlnj0Jo-1tWIAfa1gw5PyS0GSSOP797359Igqo7vdEqsydDtRiytgGRA-pvskvBK6jrxh1wsP0/s1600-r/my_Logo.gif" class="shadow">

selepas itu simpan, dan lihat hasilnya

*Pada contoh gambar diatas efek bayang berada di sebelah kanan dan bawah, sedangkan untuk merubah efek bayangnya disamping kiri dan atas. kamu cukup merubah kode CSS dan menambahkan tanda "min" (-) pada angkanya, contohnya sebagai berikut :

.shadow{box-shadow: -8px -8px 10px #424242;-webkit-box-shadow: -8px -8px 10px #424242;-moz-box-shadow: -6px -6px 10px #424242;filter: progid:DXImageTransform.Microsoft.dropShadow(color=#424242, offX=-8, offY=-8, positive=true);}

hasilnya seperti ini :

Posted in: Tutorial Blog