CSS3 : Efek Bayangan Box dengan property box-shadow

Saturday, November 30, 2013 Unknown 3 Comments

kali ini saya akan berbagi tentang cara membuat efek bayangan dengan menggunakan property box-shadow di CSS3.
Format penggunaan property ini adalah sebagai berikut:

...
box-shadow: h-shadow v-shadow blur spread color inset;
...
VariabelPenjelasan
h-shadowHarus di isi. Posisi atau jarak bayangan horisontal. Nilai positif = arah kanan, Nilai negatif = arah kiri
v-shadowHarus di isi. Posisi atau jarak bayangan vertikal. Nilai positif = arah bawah, Nilai negatif = arah atas
blurBoleh diisi atau tidak (Opsional). Jarak blur
spreadOpsional. Ukuran bayangan
colorOpsional. Warna Bayangan. Bisa Anda isi dengan konstanta warna seperti red atau dengan bilangan heksadesimal 3 digit seperti#F00 atau dengan fungsi rgba seperti rgba(255,0,0,1)
insetOpsional. Jika ditulis berarti inner shadow

Contoh


<div style="box-shadow:3px 3px 4px #000;padding:5px;border:1px solid #000;text-align:center">kotak</div>
Akan menghasilkan :
kotak
Contoh Lain :

<div style="box-shadow:3px 3px 4px #000 inset;padding:5px;border:1px solid #000;text-align:center">kotak</div>
Akan menghasilkan :
kotak
Contoh Lain :

<div style="box-shadow:3px 3px 4px red ;padding:5px;border:1px solid #000;text-align:center">kotak</div>
Akan menghasilkan :
kotak
Contoh Lain :

<div style="box-shadow:2px 2px 3px rgba(0,0,0,0.5) ;padding:5px;border:1px solid #000;text-align:center">kotak</div>
Akan menghasilkan :
kotak

Unknown

3 comments:

  1. Aulia Satrio WibowoDecember 01, 2013

    follow back bro
    http://www.parapencariilmu.co.vu

    ReplyDelete
  2. UnknownDecember 01, 2013

    oke mas bro..

    ReplyDelete
  3. ahmadslackDecember 01, 2013

    Mantap lanjutt....
    tambahan nih http://ahmadnurhidayat.asia/button-keren-css3-transition/

    ReplyDelete

Harap Tinggalkan Jejak Setelah Membaca
Jangan Menggunakan Kata Kata Kasar/Mengandung Sara
Berkomenlah Sesuai Topik :D

Subscribe to: Post Comments (Atom)