Teknik Shadowing dengan CSS3 | #5 | Mukti911

A. Pendahuluan

Pada kali ini aku akan share bagaimana teknik shadowing sebuah div di CSS. Jika diingat beberapa tahun yang lalu, ketika ingin menciptakan efek bayangan di website, maka kita harus membuat nya di photoshop dengan menggunakan Efek Drop Shadow, lalu kita crop/slicing sesuai kebutuhan. Lalu muncul lah CSS3 yang dapat membuat efek shadow.

B. Latar Belakang

Saat ini masa-masa shadowing manual sudah dibilang berakhir, walaupun tidak sepenuhnya berakhir. Shadow di website bisa kita ciptakan dengan menambahkan beberapa baris CSS3 saja.

C. Maksud dan Tujuan
agar dapat membuat effect shadowing dengan CSS.

D. Pembahasan
Prinsip kerja CSS Shadow adalah seperti berikut ini:

Kita bisa melihat kalau shadow dipisahkan oleh koma (,) dan setiap koma digunakan untuk memberikan shadow vertikal atau horizontal. dan lebar ketebalan/BLUR.

Contoh seperti berikut ini:

ini Shadow Mukti911

Ini adalah contoh Shadow di CSS

Sintak nya kira-kira seperti ini:

Ini adalah contoh Shadow di CSS
Sintak nya kira-kira seperti ini:

example1 {
 box-shadow: 10px 10px 5px #888;
}

tapi terkadang kita membutuhkan tambahan prefix jika ingin menerapkan css di Firefox dan Safari, karena perbedaan engine yang mereka miliki. Jadi sebaiknya script diatas ditulis seperti ini:

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

Berikut ini beberapa contoh potongan shadow yang bisa anda gunakan

Contoh 1 :

Mukti911

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

Shadow / Bayangan ke Dalam
Jika ingin membuat Shadow / Bayangan yang arah nya kedalam dari elemen yang kita inginkan, maka kita bisa menambahkan inset Contoh nya seperti berikut ini :

Contoh 2:

Contoh 2 ( Inset )

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

Multiple Shadow
Kita juga bisa menerapkan beberapa efek shadow untuk satu element objek dengan memberikan tanda koma (,)

#Contoh_3{
-moz-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
-webkit-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
}

E. Hasil Yang Didapat

• dapat membuat shadow di tag

E. Kesimpulan
jadi di CSS belum bisa melakukan shadowing tapi dalam pengembangan CSS3 baru bisa melakukan shadowing di tag maupun content.
F. Referensi

• www.w3school.com