Cara membuat efek bayangan atau Box Shadow di blog 2012-02-22T15:30:00-08:00Bhepal.Corp 2ndDesign Blog|Tips Dan Trick|Comments Cara membuat efek bayangan atau Box Shadow di blog

About Author

Name : Synyster Bluqhkgates

Nick ID : BPL_bluqhk_CRP

i wasn't nobody, i also don't like a nobody, i don't have any knowledge, i'm just an ordinary person, born from the middle to lower, maybe i wasn't a cleaver, but that doesn't mean stupid. IT'S ME !!!not you, your friend or your idol.. and don;t ever think underestimate to me..

Untuk pembuatan box-shadow ini sendiri meski hanya memakai sedikit kode perintah, tapi kita bukan hanya bisa membuat satu bayangan saja, tetapi kita juga bisa membuat lebih dari satu bayangan ganda atau yang disebut bayangan ganda, bahkan lebih dari 2 bayangan pun bisa kita lakukan. Kodenya sangat sederhana, jadi sangat mudah untuk kita pahami. Kita hanya perlu mengatur koordinat jarak horizontal dan koordinat jarak vertikal serta menentukan warna yang akan kita pakai.

 

 

Jika dibuat rumus maka rumusnya kira-kira adalah seperti ini:

 

{box-shadow: (koordinat X) (koordinat Y) (radius blur) (warna);}

Keterangan:
Koordinat X =  Berfungsi untuk  menspesifikasikan jarak horizontal bayangan. Jika sebuah nilai berisi angka positif (misal: 10px) akan membuat bayangan di sebelah kanan kotak sebesar 10px, sedangkan bernilai negatif (misal: -10px) maka akan memberikan bayangan disebelah kiri.

Koordinat Y =  Berfungsi untuk menspesifikasikan jarak vertikal bayangan. Jika nilai berisi positif (misal: 10px) akan membuat bayangan di bagian bawah kotak, sedangkan nilai negatif (misal:-10px) akan memberikan bayangan disebelah atas.

Radius Blur =  Berfungsi untuk  menspesifikasikan radius dari blur yang dihasilkan. Nilai default adalah 0, yang berarti tidak ada blur. Nilai positif berarti meningkatkan kabur, sedangkan nilai negatif berati menyusutkan bayangannya.

Warna         =  Berfungsi untuk  menspesifikasikan warna bayangan.

1. Efek bayangan Tunggal/Satu bayangan.
Contoh penulisan awal.

view plainprint?

1. {box-shadow: 0 0 10px #red;}   

Cara penggunaan:
Sebagai contoh kita anggap kita sudah memiliki kode HTML seperti ini:

view plainprint?

1. <div id="box-bayangan">disini adalah konten  
2.   
3. </div>  

Dan kode CSSnya misal seperti ini.

view plainprint?

1. #box-bayangan{  
2. background: #ccc;  
3. padding: 15px;  
4. margin-top: 10px;  
5. font-size: 18px;  
6. color: #111;  
7. }   

Hasil yang kita dapatkan dari kode CSS dan HTML tersebut hanya akan terlihat seperti dibawah ini.

Hasil sebelum penambahan kode bayangan/shadow

Sekarang kita tambahkan sedikit kode dari box-shadownya.

box-shadow: 0 0 10px red;

Hasil CSS setelah ditambah kode bayangannya yang kita dapatkan kira-kira seperti ini.

view plainprint?

1. #box-bayangan{  
2. background: #ccc;  
3. border:3px ridge #FFF;  
4. padding: 15px;  
5. margin-top: 10px;  
6. font-size: 18px;  
7. color: #111;  
8. text-align:center;  
9. box-shadow: 0 0 10px red; /*--code bayangan--*/  
10. }  

Hasil Setelah Penambahan kode bayangan/shadow

Untuk melihat atau membuat contoh yang lain silakan coba rubah angka-angka tersebut sesuka hati kalian.

2. Cara pembuatan efek bayangan ganda atau lebih.

Untuk cara pembuatan bayangan efek ganda atau lebih ini, prinsipnya tetap sama dengan pembuatan efek satu bayangan. Kita hanya perlu memberikan sedikit tambahan saja. Coba kalian perhatikan perbedaan dua kode dibawah ini.

box-shadow: 0 0 10px red;

box-shadow: 0 0 10px red, 0 0 30px blue;

Pada kode kedua kita hanya menambahkan tanda koma(,) kemudian memberikan tambahan kode bayangan yang baru. Untuk pemberian kode kedua nilai/angka penentu harus lebih besar dari kode yang pertama dan warna yang berbeda pula.

view plainprint?

1. #box-bayangan{  
2. background: #ccc;  
3. border:3px ridge #FFF;  
4. padding: 15px;  
5. margin-top: 10px;  
6. font-size: 18px;  
7. color: #111;  
8. text-align:center;  
9. box-shadow: 0 0 10px red; /*--code bayangan tunggal--*/  
10. }  

view plainprint?

1. #box-bayangan{  
2. background: #ccc;  
3. border:3px ridge #FFF;  
4. padding: 15px;  
5. margin-top: 10px;  
6. font-size: 18px;  
7. color: #111;  
8. text-align:center;  
9. box-shadow: 0 0 10px red, 0 0 30px blue; /*--code bayangan ganda--*/  
10. }  

Sekian Dari saya !