MEMBUAT EFEK BAYANGAN PADA GAMBAR ARTIKEL BLOG DENGAN CSS
Box Shadow - Sebelumnya saya telah membuat artikel tentang cara menciptakan pengaruh bayangan dalam text menggunakan bantuan css (text shadow) serta kali ini saya akan menulis artikel mengenai cara membuat efek bayangan dalam gambar post blog, umum nya ini diklaim menggunakan "box shadow" style css. Bagaimana cara menciptakan dampak bayangan pada gambar artikel blog? Simak penerangan singkat ini dia mengenai css box shadow.
Saya sudah menyiapkan 2 metode menciptakan imbas bayangan (shading efec) gambar menjadi hiasan buat mempercantik sebuah postingan blog. Yg pertama dengan cara manual dan yg ke 2 menggunakan cara otomatis, eksklusif saja kita mulai agar tidak membuang-buang saat.
#Metode1: Membuat css efek shadow (bayangan) dalam post blog dengan cara manual
Menerapkan css box shadow seperti ini nir menciptakan semua gambar di artikel blog anda mempunyai bayangan, melainkan hanya satu gambar saja yg pada beri dampak bayangan, bila anda ingin menciptakan impak bayangan di semua gambar maka anda wajib menerapkan css box shadow ini pada 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.
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
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 Lihat Demo
#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 ]]> lalu 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 mempunyai bayangan. Silahkan kode rona #009678; buat merubah warna bayangan. Demikian saja penjelasan mengenai cara membuat pengaruh bayangan pada gambar artikel blog, cobalah berkreasi dengan css box shadow tadi, atau pelajari lebih lanjut di www.W3schools.com.
Comments
Post a Comment