CSS Image Shadow effects

roperti bayangan kotak memungkinkan kita untuk menggambar bayangan di belakang elemen. Kotak-shadow digunakan untuk menerapkan inset atau drop shadow untuk elemen blok. Karena semua elemen blok HTML dianggap sebagai kotak, Anda dapat menerapkan bayangan untuk setiap elemen blok-tingkat.

Gambar dengan efek bayangan

Image with CSS Shadow

Code	Example
<style type='text/css'> .img1 { width: 300px; height: 150px; border:2px solid #fff; background: blue no-repeat; box-shadow: 10px 10px 5px #ccc; -moz-box-shadow: 10px 10px 5px #ccc; -webkit-box-shadow: 10px 10px 5px #ccc; -khtml-box-shadow: 10px 10px 5px #ccc; } </style>

Rounded Corner image with CSS Shadow

Code	Example
<style type='text/css'> .img2 { width: 300px; height: 150px; border:2px solid #fff; background: yellow no-repeat; -moz-box-shadow: 10px 10px 5px #ccc; -webkit-box-shadow: 10px 10px 5px #ccc; box-shadow: 10px 10px 5px #ccc; -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px; } </style>

Rounded Images with CSS Shadow

Code	Example
<style type='text/css'> .img3 { width: 190px; height: 190px; border:2px solid #fff; background: red no-repeat; -moz-box-shadow: 0px 6px 5px #ccc; -webkit-box-shadow: 0px 6px 5px #ccc; box-shadow: 0px 6px 5px #ccc; -moz-border-radius:190px; -webkit-border-radius:190px; border-radius:190px; } </style>

Images with inset CSS Shadow

Code	Example
<style type='text/css'> .img4 { width: 300px; height: 150px; border:2px solid #fff; background: green no-repeat; -moz-box-shadow: inset 10px 10px 50px #fff; -webkit-box-shadow: inset 10px 10px 50px #fff; box-shadow: inset 10px 10px 50px #fff; }</style>

Image behind text

Code	Example
<style type='text/css'> .img5 { width: 300px; height: 150px; border:2px solid #fff; background: yellow no-repeat; color:red; font-size:30px; -moz-box-shadow: 10px 10px 50px #ccc; -webkit-box-shadow: 10px 10px 50px #ccc; box-shadow: 10px 10px 50px #ccc; } </style><br /> <div align="center" class="img5"> warna merah</div>	warna merah

Shaped Image with CSS Shadow

Code	Example
<style type='text/css'> .img6 { width: 170px; height: 110px; border:2px solid #fff; background: red no-repeat; box-shadow: 0px -10px 30px #ccc; color:white; font-size:50px; border-top-left-radius:75px; border-top-right-radius:75px; border-bottom-left-radius:0px; border-bottom-right-radius:0px; } </style>