Setelah membaca buku CSS Mastery, saya baru mengerti bahwa dalam CSS dikenal juga konsep 3 dimensi (Lebar, Tinggi dan kedalaman). Kita terbiasa dalam mengelola objek mengatur lebar dan tingginya. Dan sekarang saya akan sedikit berbagi bagaimana cara membuat agar beberapa gambar tampak seperti memiliki layer.
Untuk maksud tersebut kita memberikan nilai angka terhadap element z-index. System ini akan mengatur, nilai z-index terkecil akan berada pada bagian bawah / layer pertama, dan angka yang lebih besar dari angka pertama akan berada pada layer kedua, begitu seterusnya.
Untuk menghasilkan tampilan seperti diatas, codingnya adalah seperti berikut ini :
<html>
<head>
<title>this title</title>
<style type="text/css">
img{
width:150px;
height:150px
}
#pertama{
position:absolute;
z-index:1;
top:160px;
left:160px;
}
#kedua{
position:absolute;
z-index:2;
top:180px;
left:180px;
}
#ketiga{
position:absolute;
z-index:3;
top:200px;
left:200px;
}
#keempat{
position:absolute;
z-index:4;
top:220px;
left:220px;
}
#kelima{
position:absolute;
z-index:5;
top:240px;
left:240px;
}
</style>
</head>
<body>
<img id="pertama" src="zuzu (1).jpg" /><img id="kedua" src="zuzu (2).jpg" /><img id="ketiga" src="zuzu (3).jpg" />
<img id="keempat" src="zuzu (4).jpg" /><img id="kelima" src="zuzu (5).jpg" />
</body>
</html>
Posting Komentar
Posting Komentar