Membuat Efek Bayangan Box-Shadow Dengan Css 3

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

Berikut ini pola dari imbas box-shadow:


OK mitra eksklusif saja kita pelajari instruksi CSS nya....



Berikut ini instruksi CSS untuk memperlihatkan imbas shadow:

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

Inilah klarifikasi dari instruksi tersebut:
box-shadow: merupakan skrip untuk menciptakan 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 sanggup diganti dengan warna langsung, misal: hijau

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

Contoh variasi imbas 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 adalah dengan menambahkan parameter inset pada nilai box-shadow.

Berikut ini imbas bayangan jikalau ditambahkan parameter inset pada pola imbas 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 imbas css box-shadow, SELAMAT MENCOBA!!!Silahkan tinggalkan komentar berupa saran, pertanyan maupun kritik yang membangun.




Subscribe to receive free email updates:

0 Response to "Membuat Efek Bayangan Box-Shadow Dengan Css 3"

Posting Komentar