CSS: kotak berbayang-bayang

awalnya kita buat style

<style>

#kotak {

  background: lightblue;

  padding: 5px;

  border: 5px solid darkblue;

  border-radius:10px;

  -moz-border-radius:10px;

  -webkit-border-radius:10px;

  box-shadow:5px 5px 10px gray;

  -moz-box-shadow:5px 5px 10px gray;

  -webkit-box-shadow:5px 5px 10px gray;

}

</style>

lalu bikin kotak

<div id=kotak>

INI KOTAK LHO

</div> 

penjelasan:

nah, ada yang baru tuh "box-shadow"

rumusan pemakaiannya adalah:

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

h-shadow  = posisi horisontal bayangan, angkanya boleh minus

v-shadow  = posisi vertikal bayangan, angkanya boleh minus

blur  = optional (boleh ada, boleh tidak), ini jarak ngeblur

spread  = optional, ukuran besarnya bayangan

color  = optional, warna dari bayangan, baiknya pakai hex #123456 atau sebutin warnanya

inset = optional, yang suka pake fotosop pasti inget drop shadow dan inner shadow

box-shadow property didukung IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1

Safari mendukung dengan tambahan -webkit-box-shadow

color = red, green, blue, cyan, magenta, yellow, pink, maroon, darkblue, darkgreen, lightblue, lightyellow, lightgreen, lime, purple, violet (apa lagi ya?)

oke segitu dulu yee.. ntar ditambahin lagi.. (^_^)

CSS: kotak berbayang-bayang 2012-02-28T18:03:00+07:00 Rating: 4.5 Diposkan Oleh: Unknown