contact

Contact Person
Pin BB : 5AB31960
SMS : 082288467823
WA : 081275371724
call : 081275668074


Box Shadow (Efek Bayangan) dengan CSS

Posted in HTML & CSS Life at 22 Februari 2016 With 0 Comments

Properti box shadow yang ada pada CSS memungkinkan disagner web  dapat lebih berkreasi dalam menerapkan bayangan luar dan dalam pada sebuah kotak, menetapkan nilai untuk warna, ukuran, blur dan offset..  CSS Box Shadow sering digunakan untuk menampilkan bayangan pada elemen level-blok ( seperti div  )

box-shadow:…px…px…px…px color;
  1. Horizontal offset : apabila nilainya positif maka bayangan akan berada disebelah kanan kotak, dan jika negatif maka bayangan akan berada disebelah kiri kotak.
  2. Vertikal offset : apabila nilainya positif maka bayangan akan berada dibawah kotak, dan jika negatif maka bayangan akan berada diatas kotak.
  3. Blur radius : apabila nol maka akan seperti bayangan biasa, dan jika nilainya semakin besar maka bayangan akan tampak menjadi blur.
  4. Spread Radius (optional)
  5. Warna dari bayangan

Untuk lebih jelasnya mari kita lihat ilustrasi bayangan pada Gambar dibawah ini :



Box Shadow CSS

Berikut Kode CSS yang mengatur style diatas :

Example A menampilkan Shadow pada bagian kiri dan atas sebesar 5 px

#Example_A {
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}

 Example B menampilkan Bayangan dan blur distance sebesar 5 px

#Example_B {
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}

 Example C

#Example_C {
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}

Example D

#Example_D {
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}

Example E

#Example_E {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

Example F

#Example_F {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}

Membuat Inner Shadow dengan "inset"

Box Shadow CSS

Example G code :

#Example_G {
-moz-box-shadow: inset -5px -5px #888;
-webkit-box-shadow: inset -5px -5px #888;
box-shadow: inset -5px -5px #888;
}

Example H code :

#Example_H {
-moz-box-shadow: inset -5px -5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px #888;
box-shadow: inset -5px -5px 5px #888;
}

Example I code :

#Example_I {
-moz-box-shadow: inset -5px -5px 0 5px #888;
-webkit-box-shadow: inset -5px -5px 0 5px#888;
box-shadow: inset -5px -5px 0 5px #888;
}

Example J code :

#Example_J {
-moz-box-shadow: inset -5px -5px 5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px 5px#888;
box-shadow: inset -5px -5px 5px 5px #888;
}

Example K code :

#Example_K {
-moz-box-shadow: inset 0 0 5px #888;
-webkit-box-shadow: inset 0 0 5px#888;
box-shadow: inner 0 0 5px #888;
}

 Example L code :

#Example_L {
-moz-box-shadow: inset 0 0 5px 5px #888;
-webkit-box-shadow: inset 0 0 5px 5px#888;
box-shadow: inset 0 0 5px 5px #888;
}

 

Artikel Terkait

Diskusi