Membuat Efek Bayangan Box-Shadow dengan CSS 3

Property box-shadow merupakan salah satu efek CSS 3 yang menarik untuk dipelajari. Property ini digunakan untuk memunculkan efek bayangan (shadow) pada box. Ini merupakan salah satu efek untuk mempercantik desain web yang dibuat.

Berikut ini contoh dari efek box-shadow:

OK kawan langsung saja kita pelajari kode CSS nya....



Berikut ini kode CSS untuk memberikan efek shadow:

box-shadow: 10px 5px 8px 6px #945;

Inilah penjelasan dari kode tersebut:

box-shadow: merupakan skrip untuk membuat bayangan

10px 5px merupakan posisi bayangan terhadap box
10px: 10px ke arah kanan
5px: 5px ke arah bawah

8px: efek blur pada bayangan
6px: lebar bayangan terhadap box

#945: warna bayangan, merupakan bilangan hexa antara 0-f
atau #945 bisa diganti dengan warna langsung, misal: hijau
box-shadow: 10px 5px 8px 6px green; 

Contoh variasi efek box-shadow beserta codenya:

box-shadow: 0px 5px 5px 6px green;

box-shadow: 0px 0px 5px 6px green;

box-shadow: 0px 0px 0px 6px green;

box-shadow: -5px -5px 5px 6px green;

box-shadow: -5px -5px 0px 6px green;

box-shadow: -5px -5px 0px 0px green;

Selain bayangan diluar box, juga terdapat bayangan didalam box. Caranya yaitu dengan menambahkan parameter inset pada nilai box-shadow.

Berikut ini efek bayangan bila ditambahkan parameter inset pada contoh efek di atas:

box-shadow: inset 0px 5px 5px 6px yellow;

box-shadow: inset 0px 0px 5px 6px yellow;

box-shadow: inset 0px 0px 0px 6px yellow;

box-shadow: inset -5px -5px 5px 6px yellow;

box-shadow: inset -5px -5px 0px 6px yellow;

box-shadow: inset -5px -5px 0px 0px yellow;

Demikianlah penerapan efek css box-shadow, SELAMAT MENCOBA!!!Silahkan tinggalkan komentar berupa saran, pertanyan maupun kritik yang membangun.

---

Artikel Terkait