Bila biasanya kalian membuat gambar itu satu - satu, kali ini saya akan mengajarkan kalian bagaimana cara menumpuk gambar menggunakan css, dan juga caranya mudah banget loh. Langsung aja simak tutorial dibawah.
Pertama
Untuk isi folder kali ini saya menggunakan hanya satu file saja untuk contoh, yakni file html. Untuk strukturnya seperti ini.Kedua.
Copy dan paste code berikut, bila kalian hanya ingin kode css-nya saja kalian tinggal copy paste bagian style saja.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Teknograv - Tutorial CSS</title> | |
<!-- Start : Style --> | |
<style type="text/css"> | |
#boxsatu, #boxdua, #boxtiga, #boxempat, #boxlima{ | |
position: absolute; | |
height: 100px; | |
} | |
#boxsatu{ | |
width: 100px; | |
left: 0px; | |
top: 0px; | |
background-color:red; | |
z-index: 1; | |
} | |
#boxdua{ | |
width: 100px; | |
left: 25px; | |
top: 50px; | |
background-color:green; | |
z-index: 2; | |
} | |
#boxtiga{ | |
width: 175px; | |
left: 75px; | |
top: 100px; | |
background-color:blue; | |
z-index: 3; | |
} | |
#boxempat{ | |
width: 100px; | |
left: 200px; | |
top: 50px; | |
background-color:grey; | |
z-index: 2; | |
} | |
#boxlima{ | |
width: 100px; | |
left: 250px; | |
top: 0px; | |
background-color:cyan; | |
z-index: 1; | |
} | |
</style> | |
<!-- End : Style --> | |
</head> | |
<body> | |
<!-- Start : Tampilan Semua Box --> | |
<div id="allbox"> | |
<!-- Start : Tampilkan Box --> | |
<div id="boxsatu">Box Satu</div> | |
<div id="boxdua">Box Dua</div> | |
<div id="boxtiga">Box Tiga</div> | |
<div id="boxempat">Box Empat</div> | |
<div id="boxlima">Box Lima</div> | |
<!-- End : Tampilan Box --> | |
</div> | |
<!-- End : Tampilan Semua Box --> | |
</body> | |
</html> |
Ketiga
Simpan dan lihat hasilnya. Bila kalia mengikuti petunjuk saya dengan benar maka akan menjadi seperti ini.Selanjutnya tinggal kalian variasikan sendiri, entah itu memindahkan posisinya, mengganti warna, ataupun yang lainnya. Nah bagaimana? cukup mudah bukan? bila kalian ada kendala ataupun pertanyaan silahkan berkomentar ya. Itu saja untuk tutorial kali ini ya, sampai jumpa di tutorial selanjutnya.
Download Source Code