Nah kali ini saya akan memebrikkan tips sederhana lagi dan soal efek gambar lagi. Untuk tutorial kali ini yaitu cara membuat bayangan gambar pada blog Anda. Sebenarnya trik ini bisa di atak atik sesuai keinginan Anda. Anda tinggal modifikasi kode CSSnya saja. Berikut ini adalh beberapa kreasi saya mungkin Anda juga ingin menerapkkan atau mencobanya, cek ki dot :
1. Untuk efek bayangan yang sederhana :
Kode yang saya gunakan :
<style type="text/css">
.bayang{
box-shadow: 5px 5px #222;
-webkit-box-shadow: 5px 5px #222;
-moz-box-shadow: 5px 5px #222;
}
</style>
2. Untuk efek bayang dengan penambahan blur :Kode yang saya tambahkan untuk blur adalah kode warna merah :
<style type="text/css">
.bayang {
box-shadow: 5px 5px 7px #222;
-moz-box-shadow: 5px 5px 7px #222;
-webkit-box-shadow: 5px 5px 7px #222;
}
</style>
3. Untuk yang ke ini saya buat NEGATIF :Kode yang saya gunakakan hanya dengan penambahan kode negatif lihat kode warna merah bandingkan kode di atas :
<style type="text/css">
.bayang {
box-shadow: -5px -5px 7px #222;
-moz-box-shadow: -5px -5px 7px #222;
-webkit-box-shadow: -5px -5px 7px #222;
}
</style>
4. Untuk efek berikut saya membuat gambar yang bayangannya ke dalam dengan menambahkan kode inset dan merubah kode horisontal lihat contohnya :
Kode yang saya gunakan sebagai berikut :
<style type="text/css">
.bayang {
box-shadow: inset 0 5px 7px #222;
-moz-box-shadow: inset 0 5px 7px #222;
-webkit-box-shadow: inset 0 5px 7px #222;
}
</style>
Kemudian cara penerapanya atau cara memakainya :
1. Anda bisa langsung pakai di postingan atau widget dengan menambahkan kode untuk gambar Anda:
<img class="bayang" src="URL GAMBAR DISINI" />
contoh :<style type="text/css">
.bayang {
box-shadow: inset 0 5px 7px #222;
-moz-box-shadow: inset 0 5px 7px #222;
-webkit-box-shadow: inset 0 5px 7px #222;
}
</style>
<img class="bayang" src="URL GAMBAR DISINI" />
2. Anda bisa menyimpannya di Template Blog Anda dengan cara, login ke akun Blogger, Klik design, Klik tab menu Edit HTML kemudian Anda letakkan kode CSS di atas kode ]]></b:skin>
*Jangan lupa hilangkan kode <style type="text/css"> ..... </style> hanya mengambil kode CSS-nya saja seperti ini :
.bayang {
box-shadow: inset 0 5px 7px #222;
-moz-box-shadow: inset 0 5px 7px #222;
-webkit-box-shadow: inset 0 5px 7px #222;
}
*Untuk menerapkkan CSS yang disimpan pada tempalte Anda, hanya menggunakkan kode di bawah ini pada postingan gambar atau widget Anda :<img class="bayang" src="URL GAMBAR DISINI" />
Nah selamat mencobanya, Anda juga bisa lebih berkreasi sendiri dengan kode CSS di atas misalnya Anda terapkkan selain pada gambar seperti pada text dan lain-lain. dan juga bisa merubah warna bayangan dengan menganti kode #222.
Semoga bermanfaat....!!!
