Efek Bayangan dan Border Pada Foto Postingan

Obachti 95

Blogger friendly sharing

Efek Bayangan dan Border Pada Foto Postingan

Jane Doe By Jane Doe 18
- Sebelumnya maaf jika sobat yang mencoba trik ini kurang puas karena saya juga bukan seorang blogger yang profesional. Kali ini saya akan berikan CSS border lengkung pada background gambar dipostingan kamu dan efek bayangan di bawahnya. Namun efek bayangan ini hanya bisa sempurna digunakan apabila gambar kamu ada dibagian tengah pada postingan kamu. Jadi semisal kamu menaruh dibagian kiri atau kanan efek bayangan ini tidak akan bekerja sempurna so saran saya selalu taruh tengah gambar yang kamu postingkan.

Cara memberi border dan efek bayangan


.post-body img{ background: #fff; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; -webkit-box-shadow:0px 5px 9px -5px #333333;-moz-box-shadow:0px 5px 9px -5px #333333;-o-box-shadow:0px 5px 9px -5px #333333;-ms-box-shadow:0px 5px 9px -5px #333333;box-shadow:0px 5px 9px -5px #333333;-webkit-box-shadow: 0px 5px 9px -5px #333333;-moz-box-shadow: 0px 5px 9px -5px #333333;}
.post-body .separator {display: block;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilga9ZPg9OB9rKv0Vv1PEiwe5VWjmamtrJHxFvGT_15ydfikhSYCxI_mn6tKH7WaIBYkPJSrQDDGLjjGJx0vP66qsm-hNrlnap8xPjqCD6RDS9uvpCYA32vzjiZsBL_7OE72hbrTQ_uq8/s1600/shadow.png) center bottom no-repeat;margin: 0;padding: 5px 0 25px 0;}

Letakkan kode CSS diatas sebelum kode penutup CSS template kamu dan bagi yang belum ngerti kode penutup CSS template. Cari aja kode seperti berikut ]]></b:skin> dan letakkan tepat diatas kode tersebut. Coba Lihat dulu Hasil kerja kita kali ini :



Catatan : Selalu letakkan gambar dibagian tengah atau "center"
Terima Kasih

18 comments

  1. selalu ada yang menarik disini, trims sobat, ane bungkus dulu:}

    ReplyDelete
  2. mantap sob,
    menarik bgt dah,

    nice info kak :D

    ReplyDelete
  3. Thanks sob sharingnya, nambah ilmu lagi nih :)

    ReplyDelete
  4. keren ya gan. kaya di word aja ada bayangannya segala. mantap, simpen dulu ya gan. tenkyu

    ReplyDelete
  5. lama kelamaan triknya bisa jadi sempurna...tetap semangat sobat :)

    ReplyDelete
  6. sobat buat sendiri ea???
    udah bagus kok tuw, hebat. daripada sy, gk bisa... wkwkwkwk

    ReplyDelete
  7. tips yang bagus
    nanti akan kucoba

    kunjungan perdana

    salam kenal

    ReplyDelete
  8. Dengan ada banyangan, gambar akan terasa hidup. saya juga menggunakannya tapi hanya beda scriptnya saja.

    ReplyDelete
  9. Bagus sih sob. Tp aku lebih suka efek pantulan air atau efek mirror. Kmu pnya script untuk membuat gmbr jdi efek miror atau pantulan air gk sob?

    ReplyDelete
  10. Disini tips nya bagus bagus gan, harus ane coba nieh :)

    ReplyDelete
    Replies
    1. bisa aja nih sobat. terima kasih semoga sobat puas dengan menu saya :D

      Delete

Post a Comment