Tutuorial kali ini berbicara tentang box shadow salah satu properti yang ada di css3. Banyak skill yang harus dipelajari untuk membuat tampilan yang baik, salah satunya box-shadow. Masih seputar box, materi kali ini membahas cara membuat efek bayang pada box. Tujuannya untuk membuat box tersebut tampak nyata. Kita tau sebuah desain tanpa efek, adalah gambar dua dimensi yang kurang enak dilihat.

Efek bayangan membuat benda tampak seperti nyata atau terlihat seperti tiga dimensi karena objek tiga dimensi biasanya memiliki bayangan.

#file html
<!DOCTYPE html>
<html>
<head>
<title>Box Shadow</title>
<link rel="stylesheet" type="text/css" href="box-shadow.css">
</head>
<body>
<div class="box">
</div>
<div class="box2">
</div>
</body>
</html>


#file css (border-radius.css)
.box{
background-color: green;
width: 500px;
height: 500px;
box-shadow: 10px /*posisi horizontal*/ 10px /* posisi vertikal*/ 20px /* blur*/ 0px/* luas penyebaran bayangan*/ #999 /*warna bayangan*/;
position: relative;
left: 50px;
top: 50px;
float: left;
margin-right: 50px;
border-radius: 5px;
}

.box2{
background-color: blue;
width: 500px;
height: 500px;
box-shadow: 0px /*posisi horizontal*/ 0px /* posisi vertikal*/ 20px /* blur*/ 10px/* luas penyebaran bayangan*/ #999 /*warna bayangan*/;
position: relative;
left: 50px;
top: 50px;
float: left;
border-radius: 5px;
}

#tampilan

Sebenarna value dari box-shadow ini masih banyak anda bisa baca disini https://www.w3schools.com/cssref/css3_pr_box-shadow.asp. Tapi menurut saya nilai terpenting dari box-shadow adalah.
  • posisi horizontal
  • posisi vertikal
  • blur
  • warna
luas penyebaran bayangan sebenarnya tidak terlalu penting, demikian tutorial kali ini. Terima Kasih.

Tags

Post a Comment

Post a Comment

Previous Post Next Post