Cara Membuat Efek Bayangan Pada Gambar CSS3 Box Shadow


Memperindah blog/website sekarang sebagai hal yang semakin gampang dan merupakan kebutuhan bagi setiap web designer serta developer. Keberadaan CSS3 memungkinkan kita buat menciptakan banyak sekali macam imbas tampilan serta fungsi. Sedangkan waktu ini hampir seluruh browser telah compatible menggunakan CSS3.

Pada awal posting tentang CSS3 ini, aku akan mempresentasikan penggunaan CSS3 Box Shadow dalam gambar buat memunculkan pengaruh bayangan (image shadow). Basic penggunaan CSS3 Box shadow merupakan dengan menggunakan syntax:
box-shadow: h-shadow v-shadow blur spread color inset;
h shadow: posisi serta besar bayangan horizontal
v shadow: posisi dan akbar bayangan vertical
blur: besaran serta jeda blur (opsional)
spread: berukuran bayangan (opsional)
inset: aturan yg ditambahkan untuk membarui bayangan jatuh ke bagian pada objek (opsional)

Contoh:
(Biasanya anggaran yang lazim digunakan tidak memakai spread dan inset)
box-shadow: 5px 5px 3px #666666;

Aturan pada atas sangat lah sederhana, pada prakteknya kita wajib menambahkan property lain agar compatible dengan browser-browser lainnya (yg berplatform webkit dan moz). Maka property lengkapnya adalah:
-webkit-box-shadow: 5px 5px 3px #666666;
-moz-box-shadow: 5px 5px 3px #666666;
box-shadow: 5px 5px 3px #666666;
Efek bayangan Box Shadow ini sebenarnya bisa diterapkan dalam aneka macam objek blog/web yg berbentuk kotak serta bahkan juga dalam objek yang berlekuk, yang pada hal ini merupakan rounded corners. Untuk mengaplikasikan ke gambar, kita dapat memasukkannya pribadi ke dalam menggunakan menggunakan atribut style atau memberikan atribut class dan meletakkan anggaran CSS-nya pada bagian lain, baik di bagian HTML posting, widget, atau meletakkannya langsung menjadi anggaran generik buat semua objek yang diberi group/id yg sama di bagian head (antara dan ).
Contoh pengaplikasiannya:

Salah satu cara yang digunakan buat memasukkan kode CSS3 Box Shadow-nya:
Tambahkan class dalam tag html gambar serta beri anggaran CSS3 Box shadow yang sesuai menggunakan classnya. Contoh:
class="boxshadow" border="0" class="bayang2" src="https://4.bp.blogspot.com/-16LfUz0Nkso/TfyGoinAMnI/AAAAAAAAAiY/eSm1uq11meA/s1600/anti_copycats-pencuri+konten.jpg" />
Untuk membuat pengaruh bayangan box shadow dalam blog anda:
Masuk ke dashboard > design/rancangan > Edit HTML (buat Blogger), lalu tambahkan kode CSS ini di bagian head, lebih tepatnya pada ATAS , serta save template.
 Kemudian setiap anda ingin memberikan impak bayangan (image shadow) dalam gambar di posting, sidebar widget yang bergambar, tinggal tambahkan class="bloxshadow" pada tag HTML image-nya:
class="boxshadow" border="0" src="https://urlgambar.com/gambar.jpg" />
Kostumisasi dampak bayangan:
a. Anda bisa mengubah nilai h shadow, v shadow, serta blur (pada px) serta kode warna sesuai dengan hasrat. Untuk mengetahui koleksi kode warna silahkan lihat Hex Color Code Generator.
b. Untuk membarui pengaruh bayangan jatuh ke arah kiri, pakai nilai negatif (-) pada h shadow dan v shadow, contoh:
-webkit-box-shadow: -5px -5px 3px #666666;
-moz-box-shadow: -5px -5px 3px #666666;
box-shadow: -5px -5px 3px #666666;
 Hasilnya:

Coba terus dan silahkan bereksperimen dengan nilai vertical, horizontal, blur, serta warna, serta efek jatuhnya bayangan.

Happy Blogging!
mencuri adalah pekerjaan pengecut! © mengenai-soal.blogspot.com

Tidak ada komentar untuk "Cara Membuat Efek Bayangan Pada Gambar CSS3 Box Shadow"