Trik Dan Tips Menciptakan Dampak Bayangan Pada Gambar Artikel Blog Dengan Css

Box Shadow - Sebelumnya saya telah menciptakan artikel perihal cara menciptakan imbas bayangan pada text dengan pemberian css (text shadow) dan kali ini saya akan menulis artikel perihal cara menciptakan imbas bayangan pada gambar post blog, umum nya ini disebut dengan "box shadow" style css. Bagaimana cara menciptakan imbas bayangan pada gambar artikel blog? simak klarifikasi singkat berikut ini mengenai css box shadow.

Saya telah menyiapkan dua metode menciptakan imbas bayangan (shading efec) gambar sebagai hiasan untuk mempercantik sebuah postingan blog. yang pertama dengan cara manual dan yang kedua dengan cara otomatis, pribadi saja kita mulai semoga tidak membuang-buang waktu.

#Metode1: Membuat css imbas shadow (bayangan) pada post blog dengan cara manual

Menerapkan css box shadow ibarat ini tidak menciptakan semua gambar di artikel blog anda mempunyai bayangan, melainkan hanya satu gambar saja yang di beri imbas bayangan, jikalau anda ingin menciptakan imbas bayangan di semua gambar maka anda harus menerapkan css box shadow ini di setiap gamabar satu-per satu.

• Bentuk dasar css box shadow ialah [box-shadow: 3px 7px 5px #009678;]
• Nilai 3px pada css diatas ialah merupakan sumbu offset-x: horizontal, semakin besar nilai nya maka bayangan text akan semakin ke kanan, dan sebaliknya semakin kecil nilai nya misal nya -3px (minus tiga pixel) maka bayangan text akan semakin kekiri.
• Nilai 7px merupakan sumbu offset-y: vertical, semakin besar nilai nya maka bayangan text semakin ke bewah, dan sebaliknya semakin kecil nilai nya misal -4px (minus empat pixel) maka bayangan tex akan semakin ke atas.
• Nilai 5px merupakan pembentuk karakter bayangan-blur, jikalau di beri niai 0px maka garis bayangan text akan terihat terang tapi jikalau di beri nilai 3px garis bayangan tidak terang (blur). dan
• #009678 merupakan arahan warna css untuk warna bayangan.

Cara Penerapan Css Box Shadow (Manual)

1. Uplood gambar pada sebuah artikel kemudian ubah mode penulisan dari Compose ke mode HTML
2. Kemudian cari tag-html gambar tersebut biasanya arahan nya ibarat di bawah ini.

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX7gAdvC2Xe6ONfrxTHSDiKczao-AwGb_2SSYdM-EDBBiEZ88bu0yDkFr6uPb73kzdrYUTadDSweqluetdfNI86F5bg3xgMrMDqsjTSUkUZ6nhsklxpRYX6V7uog1efqxguuzL1Ymaw-c/s1600/image+shadow+style+css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1143" data-original-width="1600" height="456" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX7gAdvC2Xe6ONfrxTHSDiKczao-AwGb_2SSYdM-EDBBiEZ88bu0yDkFr6uPb73kzdrYUTadDSweqluetdfNI86F5bg3xgMrMDqsjTSUkUZ6nhsklxpRYX6V7uog1efqxguuzL1Ymaw-c/s640/image+shadow+style+css.jpg" width="640" /></a></div>

3. Untuk memberi imbas bayangan masukkan css box shadow pada bab tag-html gambar yang saya tandai dengan karakter tebal sehingga menjadi ibarat berikut ini

<div class="separator" style="box-shadow: 3px 7px 5px #009678;clear: both; text-align: center;">

Maka hasil nya gambar akan mempunyai imbas bayangan bayangan hijau di sisi bawah dan kanan gambar ibarat terlihat pada pola gambar berikut ini

#Metode2: Membuat css imbas shadow (bayangan) pada post blog dengan cara Otomatis

Penerapan css box shadow berikut ini, untuk menciptakan imbas bayangan di semua gambar dalam postingan (artikel) blog, jadi dengan melalui metode ini anda tidak perlu menerapkan arahan css box shadow satu-persatu lagi. Sekali pasang semua gambar yang ada di dalam postingan blog akan mempunyai imbas bayangan.

Cara  Memasang Css Box Shadow (Otomatis)

Simpan arahan css berikut ini ke dalam template anda sempurna nya pass... di atas arahan ]]></b:skin> kemudian simpan tempate.

.post img {box-shadow: 3px 7px 5px #009678;}

Sekarang silahkan lihat artikel anda, jikalau dilakukan dengan benar maka semua gambar dalam artikel akan mempunyai bayangan. silahkan arahan warna #009678; untuk merubah warna bayangan. Demikian saja klarifikasi perihal cara menciptakan imbas bayangan pada gambar artikel blog, cobalah berkreasi dengan css box shadow tersebut, atau pelajari lebih lanjut di www.w3schools.com.