CARA MUDAH BUAT EFEK BAYANGAN BOX SHADOW DENGAN CSS

Kali ini Tips & Cara akan share tentang cara membuat imbas bayangan (box shadow) pada blog. Efek bayangan ini tentunya jika diterapkan buat desain template blog akan lebih cantik serta menarik tentunya. Cara membuatnya pun tidak sulit kok, yang terpenting anda mengetahui sedikit CSS (cascading style sheet). Untuk belajar memakai CSS pun nir sulit, poly tutorial web yang membahas tentang hal ini. Box shadow intinya membuat dampak blur hingga menyerupai bayangan, dampak blur yg didapatkan tergantung bagaimana anda menempatkan kode tadi sinkron cita-cita anda, bisa blur dengan syarat vertical juga horizontal.
Penggunaanya pun mampu menggunakan CSS maupun penulisan kode HTML secara pribadi, nah berikut contoh kode pengaruh box shadow sederhana bersama penjelasannya. Untuk penggunaan dengan CSS maka penulisannya akan seperti berikut:

#contoh kotak
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}

Sedang untuk penulisan mode HTML model penulisan kode tadi sbb:

Namun dalam intinya semua kode tersebut berbentuk sbb:

box-shadow: x-point y-point blur spread color inset;

Keterangan berdasarkan kode box shadow tadi adalah sebagai berikut:

• x-point merupakan bayangan yg mengarah pada offset horizontal (horizontal shadow). Jika bernilai negatif, maka bayangan yg di hasilkan akan mengarah ke samping kiri dan sebaliknya, apabila bernilai positif maka akan mengarah ke samping kanan.
• y-point merupakan bayangan yg mengarah pada offset vertical (vertical shadow). Jika bernilai negatif, maka bayangan yang pada hasilkan akan menunjuk ke atas serta sebaliknya, jika bernilai positif maka akan mengarah ke bawah.
• blur buat mengatur jeda blur menurut bayangan (menetukan besar kecilnya dampak blur pada bayangan).
• spread adalah ukuran berdasarkan bayangan itu sendiri.
• color buat menetukan warna bayangan yang akan pada hasilkan.
• inset untuk memberikan bayangan pada pada box dan bersifat optional, ialah boleh terdapat dan boleh nir.

Kali ini saya akan sedikit share mengenai penerapan model penggunaan box shadow, perhatikan gambar dibawah ini tanpa dampak bayangan:

A

#kotak a
border: 1px solid #ddd; 
background:#eee; 
width:620px; 
height:70px;
 
Nah berikut penambahan CSS buat box shadow atau dampak bayangan:

B

#kotak b
border: 1px solid #ddd; 
background:#eee; 
width:620px; 
height:70px;
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}

C

#kotak c
border: 1px solid #ddd; 
background:#eee; 
width:620px; 
height:70px;
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}

D

#kotak d
border: 1px solid #ddd; 
background:#eee; 
width:620px; 
height:70px;
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}

E

#kotak e
border: 1px solid #ddd; 
background:#eee; 
width:620px; 
height:70px;
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}

F

#kotak f
border: 1px solid #ddd; 
background:#eee; 
width:620px; 
height:70px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

G

#kotak g
border: 1px solid #ddd; 
background:#eee; 
width:620px; 
height:70px;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px #888;
box-shadow: 0 0 5px 5px #888;
}
Nah mudah kan cara membuat box shadow di blog, anda mampu menerapkannya baik melalui CSS juga HTML langsung, semoga artikelnya berguna.