Cara Gampang Buat Pengaruh Bayangan (Box Shadow) Dengan Css

Kali ini akan share mengenai cara menciptakan dampak 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 dampak blur sampai mirip bayangan, dampak blur yang dihasilkan tergantung bagaimana anda menempatkan arahan tersebut sesuai impian anda, dapat blur dengan kondisi vertical maupun horizontal.

Penggunaanya pun dapat memakai CSS maupun penulisan arahan HTML secara langsung, nah berikut pola arahan dampak 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 arahan 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 arahan tersebut berbentuk sbb:

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

Keterangan dari arahan box shadow tersebut yakni 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 nyata 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 nyata maka akan mengarah ke bawah.
• blur untuk mengatur jarak blur dari bayangan (menetukan besar kecilnya dampak 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 dampak bayangan:

A

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

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

Share this post