Cara Gampang Buat Dampak Bayangan (Box Shadow) Dengan Css

Kali ini akan share mengenai cara menciptakan efek bayangan (box shadow) di blog. Efek bayangan ini tentunya bila diterapkan untuk desain template blog akan lebih bagus dan menarik tentunya. Cara membuatnya pun tidak sulit kok, yang terpenting anda mengetahui sedikit CSS (cascading style sheet). Untuk berguru memakai CSS pun tidak sulit, banyak tutorial web yang membahas ihwal hal ini. Box shadow pada dasarnya menciptakan efek blur sampai mirip bayangan, efek blur yang dihasilkan tergantung bagaimana anda menempatkan aba-aba tersebut sesuai impian anda, dapat blur dengan kondisi vertical maupun horizontal.

Penggunaanya pun dapat memakai CSS maupun penulisan aba-aba HTML secara langsung, nah berikut pola aba-aba efek box shadow sederhana beserta penjelasannya. Untuk penggunaan dengan CSS maka penulisannya akan mirip 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 pola penulisan aba-aba tersebut sbb:

<div style='-moz-box-shadow: -5px -5px #888;-webkit-box-shadow: -5px -5px #888;box-shadow: -5px -5px #888;'></div>

Namun pada pada dasarnya semua aba-aba tersebut berbentuk sbb:

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

Keterangan dari aba-aba box shadow tersebut yaitu sebagai berikut:
  • x-point merupakan bayangan yang mengarah pada offset horizontal (horizontal shadow). Jika bernilai negatif, maka bayangan yang di hasilkan akan mengarah ke samping kiri dan sebaliknya, bila bernilai faktual maka akan mengarah ke samping kanan.
  • y-point merupakan bayangan yang mengarah pada offset vertical (vertical shadow). Jika bernilai negatif, maka bayangan yang di hasilkan akan mengarah ke atas dan sebaliknya, bila bernilai faktual maka akan mengarah ke bawah.
  • blur untuk mengatur jarak blur dari bayangan (menetukan besar kecilnya efek blur pada bayangan).
  • spread merupakan ukuran dari bayangan itu sendiri.
  • color untuk menetukan warna bayangan yang akan di hasilkan.
  • inset untuk menaruh bayangan di dalam box dan bersifat optional, artinya boleh ada dan boleh tidak.
Kali ini aku akan sedikit share ihwal penerapan pola penggunaan box shadow, perhatikan gambar dibawah ini tanpa efek bayangan:

A

#kotak a{
border: 1px solid #ddd; 
background:#eee; 
width:620px; 
height:70px;
 }

Nah berikut penambahan CSS untuk box shadow atau efek 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 gampang kan cara menciptakan box shadow di blog, anda dapat menerapkannya baik melalui CSS maupun HTML langsung, biar artikelnya bermanfaat.