9DesiMeter

Friday, 3 January 2014

Mengenal CSS3 Box Shadow

Assalamualaikum

Halo All.. Hari Minggu Lagi ngapain nih ^_^
Sekarang Artikel Kita Tentang Mengenal CSS3 Box Shadow
Box Shadow Itu Bisa Di Bilang Teknik Membuat Bayangan Pada Sebuah Element
Oke Langsung Aja Ke TKP Tanpa Basa Basi

Pengertian Box
Contoh : box-shadow:1px 3px 5px 7px #555;
Jadi Pengertiannya Begini : [X offset] [Y offset] [Blur Value] [Spread Value] [Color Value]
Hasil Box Shadow Di Atas Jadi Begini


box-shadow:1px 3px 5px 7px #555;
Contoh Berikutnya Kita Akan Menggunakan 6 Kotak Box Shadow Secara Berbeda Ukuran
box-shadow:5px 5px #555;
box-shadow:5px 5px 5px #555;
box-shadow:5px 5px 0 5px #555;
box-shadow:-5px -5px 5px 5px #555;
box-shadow:0 0 10px #555;
box-shadow:0 0 10px 5px #555;
Oke Sekarang Kita Menuju Box Shadow Inset
Apa Emang Bedanya box-shadow Biasa Sama box-shadow inset
Iya.. Memang Setelah Di Teliti Hasilnya Emang Sama *Sok Jadi Profesor ~xD
Cuman Kalo box-shadow inset Itu Hasilnya Di Dalam Kotak Tersebut Bukan Di Luar Kotak Tersebut
Contohnya Seperti Ini ~xD

box-shadow:inset 1px 3px 5px 7px #555;
Contoh Berikutnya Kita Akan Menggunakan 6 Kotak Box Shadow Inset Secara Berbeda Ukuran

box-shadow:inset 5px 5px #555;
box-shadow:inset 5px 5px 5px #555;
box-shadow:inset 5px 5px 0 5px #555;
box-shadow:inset -5px -5px 5px 5px #555;
box-shadow:inset 0 0 10px #555;
box-shadow:inset 0 0 10px 5px #555;
Oke.. Ini lah Beberapa Box Shadow Yang Saya Bisa Jelaskan
Jika Ingin Bertanya Langsung Saja Bisa Chat Atau Komentar Di Bawah Ini ^_^
Sekian Artikel Saya Tentang Mengenal CSS3  Box Shadow

-Special Thank's To
www.w3schools.com

NB : Ini Post Dari KxMadagascar ( Blog Lama Saya ) Jadi Saya Berhak Meng-copy Paste-nya

Wassalamualaikum Wr Wb
Share This

4 comments:

  1. Wah Bermanfaat nih infonya :-d
    Makasih ya udah share :D

    ReplyDelete
  2. oh ane kira box shadow cuma bisa keluar aja, ternyata bisa kedalam (inset)..
    thanks gan.. sangat membantu

    ReplyDelete

Template By Blogger Templates
Designed By 9Desimeter