0 Comment


Box Shadow - Sebelumnya saya telah membuat artikel tentang cara membuat efek bayangan pada text dengan bantuan css (text shadow) dan kali ini saya akan menulis artikel tentang cara membuat efek bayangan pada gambar post blog, umum nya ini disebut dengan "box shadow" style css. Bagaimana cara membuat efek bayangan pada gambar artikel blog? simak penjelasan singkat berikut ini mengenai css box shadow.

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

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

Menerapkan css box shadow seperti ini tidak membuat semua gambar di artikel blog anda memiliki bayangan, melainkan hanya satu gambar saja yang di beri efek bayangan, jika anda ingin membuat efek bayangan di semua gambar maka anda harus menerapkan css box shadow ini di setiap gamabar satu-per satu.
  • Bentuk dasar css box shadow adalah [box-shadow: 3px 7px 5px #009678;]
  • Nilai 3px pada css diatas adalah 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, jika di beri niai 0px maka garis bayangan text akan terihat jelas tapi jika di beri nilai 3px garis bayangan tidak jelas (blur). dan
  • #009678 merupakan kode warna css untuk warna bayangan.

Cara Penerapan Css Box Shadow (Manual)

1. Uplood gambar pada sebuah artikel lalu ubah mode penulisan dari Compose ke mode HTML
2. Kemudian cari tag-html gambar tersebut biasanya kode nya seperti di bawah ini.
<div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-oB1UGLhB7mc/WeO8sdL8mfI/AAAAAAAAGQY/2BuewPwCNT8FbktufSe8qtwchJl0i0UHQCEwYBhgL/s1600/image%2Bshadow%2Bstyle%2Bcss.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://3.bp.blogspot.com/-oB1UGLhB7mc/WeO8sdL8mfI/AAAAAAAAGQY/2BuewPwCNT8FbktufSe8qtwchJl0i0UHQCEwYBhgL/s640/image%2Bshadow%2Bstyle%2Bcss.jpg" width="640" /></a></div>
3. Untuk memberi efek bayangan masukkan css box shadow pada bagian tag-html gambar yang saya tandai dengan huruf tebal sehingga menjadi seperti berikut ini
<div class="separator" style="box-shadow: 3px 7px 5px #009678;clear: both; text-align: center;">
Maka hasil nya gambar akan memiliki efek bayangan bayangan hijau di sisi bawah dan kanan gambar seperti terlihat pada contoh gambar berikut ini

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

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

Cara  Memasang Css Box Shadow (Otomatis)

Simpan kode css berikut ini ke dalam template anda tepat nya pass... di atas kode ]]></b:skin> kemudian simpan tempate.
.post img {box-shadow: 3px 7px 5px #009678;}
Sekarang silahkan lihat artikel anda, jika dilakukan dengan benar maka semua gambar dalam artikel akan memiliki bayangan. silahkan kode warna #009678; untuk merubah warna bayangan. Demikian saja penjelasan tentang cara membuat efek bayangan pada gambar artikel blog, cobalah berkreasi dengan css box shadow tersebut, atau pelajari lebih lanjut di www.w3schools.com.

Post a Comment

 
Top