Halo Sobat, kali ini saya akan memberikan satu lagi trik CSS3 yang 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 :)