Skip to main content

Membuat Efek Bayangan Pada Gambar Artikel Blog Dengan Css


Box Shadow - Sebelumnya saya telah menciptakan artikel wacana cara menciptakan imbas bayangan pada text dengan santunan css (text shadow) dan kali ini saya akan menulis artikel wacana 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, eksklusif saja kita mulai supaya 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, kalau 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, kalau di beri niai 0px maka garis bayangan text akan terihat terang tapi kalau di beri nilai 3px garis bayangan tidak terang (blur). dan
  • #009678 merupakan instruksi 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 instruksi nya ibarat di bawah ini.
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCfg1zaASwfvnIDLLl9Wt83rByLO9FIr0wk-seAAUeNvTMh5G_jAeUl-UzZrxGSUMb4nhqKUQXqO6s_EHjiY4qaZS6hcOhcHLasbZQ2D_OoilGo13j2vKKg44wWzrKzY176kK60Unwojw/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/AVvXsEhCfg1zaASwfvnIDLLl9Wt83rByLO9FIr0wk-seAAUeNvTMh5G_jAeUl-UzZrxGSUMb4nhqKUQXqO6s_EHjiY4qaZS6hcOhcHLasbZQ2D_OoilGo13j2vKKg44wWzrKzY176kK60Unwojw/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 abjad 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 referensi 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 instruksi 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 instruksi css berikut ini ke dalam template anda sempurna nya pass... di atas instruksi ]]></b:skin> kemudian simpan tempate.
.post img {box-shadow: 3px 7px 5px #009678;}
Sekarang silahkan lihat artikel anda, kalau dilakukan dengan benar maka semua gambar dalam artikel akan mempunyai bayangan. silahkan instruksi warna #009678; untuk merubah warna bayangan. Demikian saja klarifikasi wacana cara menciptakan imbas bayangan pada gambar artikel blog, cobalah berkreasi dengan css box shadow tersebut, atau pelajari lebih lanjut di www.w3schools.com.
Labels:

Comments

Post a Comment

Popular posts from this blog

Widget Contact Form Responsive

Widget Contact Form Responsive - Contact Form atau Contact Us merupakan satu dari beberapa widget penting yang harus ada di setiap laman website termasuk situs blogger, widget contact form merupakan mediator yang menghubungkan antara visitor dengan pengelola situs, Contact form (formulir kontak) biasanya dipakai untuk mengirim pesan berupa kritik, saran, pemesanan pemasangan iklan dan lain-lain. selain itu contact form juga berfungsi sebagai penyaring spam atau malware yang kemungkinan dikirim oleh visitor badung ke e-mail pengelola situs. Platform blogger bekerjsama sudah menyediakan widget contact form untuk situs-situs blog, namun tampilan contact form yang disediakan masih sangat sederhana "default" pengelola situs harus menyesuikan style contact form nya sendiri dengan sedikit penambahan css untuk menciptakan tampilan contact form menjadi lebih elegant. Widget Contact Form Responsive Cara Membuat Laman Contact Form Blogger Login ke Blogger dan buat satu laman ...
Post a Comment
Read more

Cara Buat Tombol Share Sticky Bottom (Melayang Dibawah)

Cara Membuat Share Button Sticky Bottom Blogger - Akhir-akhir ini berbagai variasi tombol share muncul ke pasaran dunia cyber " website & blog " tentunya, dan yang paling terkenal ialah tombol share sticky bottom dan sidebar . Gaya yang lainnya tombol share drop-down. Pada artikel ini aku akan membahas Cara menciptakan tombol share sticky bottom (melayang di bawah) pada perangkat mobile (Handphone) dan tombol share sticky sidebar "melayang di samping jikalau di lihat melalui PC. Adapun tombol share yang akan kita buat merupakan tombol share (share button) yang ringan "sticky bottom" dengan sedikit script namun sangat responsive pada perangkat seluler. Sehingga tidak memberi efek jelek pada loading situs anda. Langsung saja simak langkah-langkah cara menciptakan tombol share sticky bottom berikut ini. Kunjungi laman penyedia tombol share yaitu www.addthis.com Silahkan login dengan dengan e-mail atau facebook anda untuk masuk ke dashboard add...
Post a Comment
Read more

Cara Paralel Exhaust Dengan Lampu

Paralel Hexos Dengan Lampu Paralel Exhaust Dengan Lampu maksudnya yaitu menggabungkan antara exhaust atau fan dengan lampu ke satu switch. Umumnya pada benda electronic menyerupai exhaust memakai jenis kabel NYY isi 3 yaitu Phase, Netral dan Ground sebagai penghubung. Sedangkan Pada instalasi listrik fitting lampu hanya memnggunakan kabel Jenis NYA sebanyak 2 kabel saja yaitu kabel Phase dan Netral saja. Lalu bagaimana " cara memparalel exhaust dengan lampu? " Bahasa singkat dalam teori instalasi listrik " Gabungkan antara netaral exhaust ke netral lampu dan phase ke phase sedangkan kabel ground hubungkan dengan kabel ground pada sumber ground ". Bagaimana mengetahui kabel phase, netral dan ground pada benda electronic menyerupai exhaust? simak panduan instalasi listrik di bawah ini. Warna Kabel NYY Pada barang electronic menyerupai exhaust umumnya ada tiga warna yaitu Biru, Coklat, Dan Kuning atau Coklat, Hitam dan putih.  Biru sebagai kabel Phase ...
Post a Comment
Read more