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

Cara Melihat Jumlah Followers Blog Sendiri

Cara Melihat Jumlah Followers Blog Sendiri - Situs blog yang terkenal tentu sudah memiki jumlah followers (pengikut) situs yang cukup banyak, ratusan atau mungkin ribuan followers. Taukah kau followers situs blogger yang gotong royong yaitu followers yang di sanggup dari feedburner atau lebih dikenal dengan istilah Follow by E-mail atau RSS Feed . Pertanyaan nya berapakah jumlah followers atau pengikut situs blog anda ketika ini? Untuk mengetahui nya mari kita simak cara melihat jumlah followers situs blogger yang diperoleh dari feedburner google (widget follow by e-mail) berikut ini; Cara Mengetahui Jumlah Pengikut RSS Feed Pertama Login ke Akun G-mail, kemudian Kunjungi laman Dashboard Feedburner Anda akan diarahkan ke dashboard RSS Feed (Laman kawasan melihat statistik dan jumlah followers situs blog) Seperti yang ditunjukkan pada pola berikut ini. Cara melihat atau mengetahui jumlah followers blog Keterangan : Gambar sebelah kiri mengatakan daftar feedburner s...
1 comment
Read more

Rangkaian Lampu Tl Double 1 Ballas

Rangkaian Lampu TL Double 1 Ballas - Pada artikel sebelum nya saya telah membahas wacana cara memasang Single lampu TL (Tube Lamp) dengan Single Ballas . Bagi kau yang ingin mengetahui lebih jauh wacana lampu TL silahkan baca artikel sebelum ny alasannya pada kesempatan kali ini saya hanya akan membuatkan diagram rangkaian lampu TL double 1 ballas dengan tata letak komponen lampu tl yang lebih gampang untuk dipahami. Sebenar-nya di luar sana ada aneka macam tutorial yang menjelaskan wacana " Rangkaian Lampu TL Double 1 Ballas ( 2 lampu TL 1 Ballas ) " ibarat ini. Namun kebanyakan dari mereka menampilkan diagram rangkaian lampu tl yang kurang baik dari segi penataan gambar komponen lampu TL sehingga sedikit sulit di pahami. Sebelum menuju ke rangkaian lampu tl double 1 ballas dan cara merakit lampu tl double sebaik nya persiapkan material "komponen" lampu tl nya terlebih dahulu ibarat tertera di bawah ini: Casing " Double Tube Lamp " atau casing untu...
Post a Comment
Read more

Download Rujukan Surat Lamaran Kerja Microsoft Word

Berikut ini ialah " Contoh Surat Lamaran Kerja " dengan format penulisan microsoft word.  Bolehkah melamar kerja dengan surat lamaran yang di tulis melalu komputer (microsoft word) ? jawaban-nya boleh, alasannya ialah setahu saya tidak ada undang-undang yang mengatur bahwa melamar kerja surat lamaran-nya harus tulis tangan. Namun hal ini juga sanggup bersifat relatif alasannya ialah setiap perusahaan juga berhak memilih syarat-syarat bagi pelamar kerja di perusahaan-nya. Bagi seorang teknik komputer, administrasi dan akuntansi tentu akan lebih pantas kalau surat lamaran kerja di tulis dengan memakai goresan pena komputer (microsoft word), sekaligus memperlihatkan kehlian-nya memakai program-program komputer. Tapi jangan pulak alasannya ialah membaca ini tukang listrik menulis surat lamaran kerja pakai kabel atau pakai trafo. Baik eksklusif saja ke file download teladan surat lamaran kerja dengan format microsoft word, silahkan Download Disini . example : thumbnail (gam...
Post a Comment
Read more