Membuat Profil Box / Foto Bertumpuk Seperti Kartu

Halo Sobat, kali ini saya akan memberikan satu lagi trik CSS3yang lumayan keren nih hehehe, seperti yang kalian lihat box yang berbentuk kartu dibawah ini bisa berfungsi sebagai box profile atau foto.

• 
  

  Card 1

  
  Name:Orok
  Age:5
  Size:50cm
  Weight:600g
  Food:Sendal
  Lives in southern and central America and loves to fly around
  
• 
  

  Card 2

  
  Name:Bakekok
  Age:3
  Size:70cm
  Weight:5.5kg
  Food:Gehu
  Lives in the northern hemisphere and loves to play seek and hide
  
• 
  

  Card 3

  
  Name:Ananda
  Age:5
  Size:120cm
  Weight:10kg
  Food:Nasi Goreng
  Lives in a house and loves to chew chick, laugh and go for walks
  
• 
  

  Card 4

  
  Name:Ceu Eroh
  Age:20
  Size:110 cm
  Weight: 35 kg
  Food:Cilok
  Lives where it's cold and icy and loves to swim and dive
  
• 
  

  Card 5

  
  Name:Neneng Jebred
  Age: 12
  Size:190 cm
  Weight:180 kg
  Food:ongol-ongol
  Lives in Africa and loves to sleep most of the day and hunt sometimes
  

Kalau kamu mau menggunakannya silahkan copy code CSS+CSS3nya dibawah ini

<style type="text/css">
h1, h2, h3, h4, h5, h6 {
  font-family: arial, sans-serif;
  font-size:10px;
}

.bg {
background:#ffffff;
clear:both;
float:left
padding: 80px 80px 0px 80px;
width: 600px;
height:700px;
margin: 30px auto 0px auto;

border-bottom:1px solid #BDC1C7;
border-top:1px solid #BDC1C7;overflow:hidden
}

ul#index_cards {
  margin-top:50px;
  text-align:center;
}
 
ul#index_cards li {
  background:url(URL GAMBAR BACKGROUND KARTU) repeat;
  height:500px;
  width:120px;
  display:block;
  float:left;
  border:1px solid #666;
  padding:25px 10px;
  position:relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-box-shadow: 2px 2px 10px #000;
  -webkit-box-shadow: 2px 2px 10px #000;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}

#card-1 {
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  z-index:1;
  left:40px;
  top:40px;
}
 
#card-2 {
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  z-index:2;
  left:-50px;
  top:10px;
}
 
#card-3 {
  background-color:#69732B;
  z-index:3;
  left:-160px;
}
 
#card-4 {
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  z-index:2;
  right:-180px;
  top:-540px;
}
 
#card-5 {
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  z-index:1;
  right:-90px;
  top:-520px;
}

ul#index_cards li img {
  margin-top:7px;
  background:#eee;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-box-shadow: 0px 0px 5px #aaa;
  -webkit-box-shadow: 0px 0px 5px #aaa;
}
     
ul#index_cards li:hover {
  z-index:4;
}
 
#card-1:hover {
  -moz-transform: scale(1.1) rotate(-18deg);
     -webkit-transform: scale(1.1) rotate(-18deg);
}
   
#card-2:hover {
  -moz-transform: scale(1.1) rotate(-8deg);
   -webkit-transform: scale(1.1) rotate(-8deg);
}
 
#card-3:hover {
  -moz-transform: scale(1.1) rotate(2deg);
   -webkit-transform: scale(1.1) rotate(2deg);
}
 
#card-4:hover {
  -moz-transform: scale(1.1) rotate(12deg);
   -webkit-transform: scale(1.1) rotate(12deg);
}
 
#card-5:hover {
  -moz-transform: scale(1.1) rotate(22deg);
   -webkit-transform: scale(1.1) rotate(22deg);
}
ul#index_cards li img {
  margin-top:7px;
  background:#eee;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-box-shadow: 0px 0px 5px #aaa;
  -webkit-box-shadow: 0px 0px 5px #aaa;
}
     
ul#index_cards li p {
  margin-top:4px;
  text-align:left;
  line-height:28px; 
}
</style>

note: kamu bisa mengganti backgroundnya dengan url gambar yang telah kamu upload, untuk panjang dan lebarnyanya bisa kamu sesuaikan, lihat tulisan yang berwarna merah dan hijau

 Jangan lupa copy juga HTMLnya dibawah ini

</style>
<div class="bg">
<ul id="index_cards">
<li id="card-1">
<h3>
Card 1</h3>
<img alt="Orok" height="100" src="Ganti Dengan URL Foto Kamu" width="100" />
Di Sini Kamu Bisa Isi Data Atau Profile Tentang Fotonya
</li>
<li id="card-2">
<h3>
Card 2</h3>
<img alt="Bakekok" height="100" src="Ganti Dengan URL Foto Kamu" width="100" />
Di Sini Kamu Bisa Isi Data Atau Profile Tentang Fotonya
</li>
<li id="card-3">
<h3>
Card 3</h3>
<img alt="Ananda" height="100" src="Ganti Dengan URL Foto Kamu" width="100" />
Di Sini Kamu Bisa Isi Data Atau Profile Tentang Fotonya
</li>
<li id="card-4">
<h3>
Card 4</h3>
<img alt="Eroh" height="100" src="Ganti Dengan URL Foto Kamu" width="100" />
Di Sini Kamu Bisa Isi Data Atau Profile Tentang Fotonya
</li>
<li id="card-5">
<h3>
Card 5</h3>
<img alt="Neneng" height="100" src="Ganti Dengan URL Foto Kamu" width="100" />
Di Sini Kamu Bisa Isi Data Atau Profile Tentang Fotonya
</li>
</ul>
</div>

Sekarang tinggal menentukan dimana kamu akan letakan profil box ini, jika kesulitan untuk meletakan posisinya dalam template kamu Insya Allah saya akan bantu secepatnya, silahkan tinggalkan komen saja di bawah ini :)

Blogging Is Sharing...

Description: Membuat Profil Box Bertumpuk Rating: 4.5