Categories: Artikel CSS

Membuat Dampak Bayangan Di Css3

Dengan CSS3, anda sanggup membuat dampak lengkung pada setiap sudut border, menambahkan bayangan, dan memakai gambar sebagai border.

Untuk membuat dampak lengkung pada setiap sudut border, silahkan lihat di artikel Efek Lengkung Untuk Border Dengan CSS3.

Bagaimana cara membuat kotak menyerupai di sebelah kiri tersebut, di sana nampak terlihat ada dampak bayangan, dampak bayangan itu berwarna silver.

Efek bayangan itu dinamakan SHADOW.

Dengan CSS3 kita dimungkinkan membuat dampak bayangan menyerupai itu. Properti CSS3 yang dipakai membuat dampak shadow ialah box-shadow.

Bentuk penulisan:

box-shadow: h-shadow v-shadow blur spread color inset;

Dua nilai yang harus ada dari box-shadow di atas ialah h-shadow dan v-shadow, sisanya opsional. h-shadow dipakai untuk menetapkan posisi horizontal shadow, dan v-shadow dipakai untuk menetapkan posisi vertical shadow.

Contoh berikut menambahkan box-shadow untuk elemen ber-ID ‘myDIV’:

#myDIV { background-color: yellow; width: 200px; height: 100px; box-shadow: 10px 10px 5px #888888; }

Dimana elemen ber-ID ‘myDIV’ yang diatur oleh box-shadow mungkin menyerupai berikut:

Nantinya JavaScript dimungkinkan juga memanipulasinya, bentuk:

Obj.style.boxShadow = "h-shadow v-shadow blur spread color inset";

Umumnya penulisan di atas ditempatkan di dalam fungsi dan fungsi ditempatkan di bab HEAD, referensi fungsinya:

function oFunc() { var oObject = document.getElementById("myDIV"); oObject.style.boxShadow = "10px 10px 5px #ff0000"; }

Untuk memanggil fungsi sanggup dari manapun yang di mau, contohnya akan di panggil dikala suatu tombol di klik:

Tambahan: Jangan lupa menambahkan prefix -moz- untuk Firefox 3.6 dan versi sebelumnya dan prefix -webkit- untuk Chrome dan Safari versi lama.

Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.

Ahmad Code