Tuesday

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-shadowh-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 Rating: 4.5 Diposkan Oleh: Miftah Budi

0 komentar:

Post a Comment