Source Code Main Remi Bersama Top Komentator

Kalau di postingan sebelumnya saya tampilkan Top Komentator Bulan Oktober 2010 dengan sedikit kreasi menggunakan CSS3 dengan kombinasi gambar kartu remi atau playing card, ternyata ada beberapa pengunjung yang tertarik dengan hasil kreasi abal-abal tersebut, dan menanyakan bagaimana cara membuatnya.

Maka di postingan ini izinkan saya tampilkan source codenya baik CSS maupun HTML-nya. Di samping itu yang harus dipersiapkan adalah 5 buah gambar kartu remi dan 5 buah gambar Avatar para komentator. Untuk membuat efek lengkungan pada gambar kartu remi tersebut saya tempatkan sebuah gambar transparan (format png) dengan ukuran yang sama dengan gambar kartu remi tersebut, dan diberi sentuhan gradient dengan rgba (gradient bisa menggunakan radial atau linear).

Kode CSS-nya :

#background {
  background:#9999FF;
  border: 1px solid #666666;
  box-shadow: 3px 3px 3px #666666;
  -moz-box-shadow: 3px 3px 3px #666666;
  -webkit-box-shadow: 3px 3px 3px #666666;
  width: 555px;
  height: 400px;
  padding-left: 40px;
}

ul#index_kartu {
  padding-top: 60px;
}

ul#index_kartu li {
  height: 233px;
  width: 188px;
  display: block;
  float: left;
  border: 2px solid #666666;
  padding: 10px 1px;
  position: relative;
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  box-shadow: 2px 2px 10px #000000;
  -moz-box-shadow: 2px 2px 10px #000000;
  -webkit-box-shadow: 2px 2px 10px #000000;
  -o-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  margin-bottom: -135px;
}

#kartu-1 {
  background: #ffffff url(http: //alwi70.files.wordpress.com/2010/11/kingsekop.gif) no-repeat;
  -o-transform: rotate(-40deg);
  -webkit-transform: rotate(-40deg);
  -moz-transform: rotate(-40deg);
  z-index: 1;
  left: 30px;
  top: 30px;
}

#kartu-2 {
  background: #ffffff url(http: //alwi70.files.wordpress.com/2010/11/kinghati.jpg) no-repeat;
  -o-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  z-index: 2;
  left: -120px;
  top: -1px;
}

#kartu-3 {
  background: #ffffff url(http: //alwi70.files.wordpress.com/2010/11/assekop.jpg) no-repeat;
  -o-transform: rotate(1deg);
  -webkit-transform: rotate(1deg);
  -moz-transform: rotate(1deg);
  left: 113px;
  top: -150px;
  z-index: 3;
}

#kartu-4 {
  background: #ffffff url(http: //alwi70.files.wordpress.com/2010/11/kingwajik.jpg) no-repeat;
  -o-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  z-index: 2;
  left: -38px;
  top: -120px;
}

#kartu-5 {
  background: #ffffff url(http: //alwi70.files.wordpress.com/2010/11/kingkeriting.jpg) no-repeat;
  -o-transform: rotate(30deg);
  -webkit-transform: rotate(35deg);
  -moz-transform: rotate(35deg);
  z-index: 1;
  left: 200px;
  top: -217px;
}

ul#index_kartu li: hover {
  z-index: 4;
}

#kartu-1: hover {
  background: #ffffff url(http: //alwi70.files.wordpress.com/2010/11/aziz.jpg) no-repeat;
  -moz-transform: scale(1.2) rotate(-18deg);
  -o-transform: scale(1.2) rotate(-18deg);
  -webkit-transform: scale(1.2) rotate(-18deg);
}

#kartu-2: hover {
  background: #ffffff url(http: //alwi70.files.wordpress.com/2010/11/alamendah.jpg) no-repeat;
  -moz-transform: scale(1.2) rotate(-8deg);
  -o-transform: scale(1.2) rotate(-8deg);
  -webkit-transform: scale(1.2) rotate(-8deg);
}

#kartu-3: hover {
  background: #ffffff url(http: //i690.photobucket.com/albums/vv270/alwi/Bangiwan.jpg) no-repeat;
  -moz-transform: scale(1.2) rotate(-1deg);
  -o-transform: scale(1.2) rotate(-1deg);
  -webkit-transform: scale(1.2) rotate(-1deg);
  -o-transform: scale(1.2) rotate(-1deg);
}

#kartu-4: hover {
  background: #ffffff url(http: //alwi70.files.wordpress.com/2010/11/hybridcar.jpg) no-repeat;
  -moz-transform: scale(1.2) rotate(12deg);
  -o-transform: scale(1.2) rotate(12deg);
  -webkit-transform: scale(1.2) rotate(12deg);
}

#kartu-5: hover {
  background: #ffffff url(http: //alwi70.files.wordpress.com/2010/11/jualbarcode.jpg) no-repeat;
  -moz-transform: scale(1.2) rotate(22deg);
  -o-transform: scale(1.2) rotate(22deg);
  -webkit-transform: scale(1.2) rotate(22deg);
}

ul#index_kartu li img {
  -o-transition: all 1s ease-in-out;
  margin-top: -8px;
  border: none;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  background-image: -moz-radial-gradient(top, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .55));
  background-image: -webkit-gradient(linear, right top, left top, color-stop(0.01, rgba(0, 0, 0, .20)), color-stop(0.07, rgba(0, 0, 0, 0)));
}

#judul {
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  margin-top: -248px;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
}

Kode HTML-nya :

<div id="background">
<ul id="index_kartu">
<li id="kartu-1"> <a href="http://www.faisalbook.co.cc/2010/10/emoticon-baru-di-plurk.html" target="_blank"><img title="Muhammad Faisal Aziz" src="http://alwi70.files.wordpress.com/2010/11/transparan.png" alt="Muhammad Faisal Aziz" width="186" height="250" /></a>
<div id="judul">4. Muh. Faisal Aziz</div></li>
<li id="kartu-2"> <a href="http://alamendah.wordpress.com/2010/11/01/penghargaan-bagi-mbah-maridjan-dari-kemenhut/" target="_blank"><img title="Alamendah" src="http://alwi70.files.wordpress.com/2010/11/transparan.png" alt="Alamendah" width="186" height="250" /></a>
<div id="judul">2. Alamendah</div></li>
<li id="kartu-3"> <a href="http://metrolisa.info/cermin.html" target="_blank"><img title="Bang Iwan" src="http://alwi70.files.wordpress.com/2010/11/transparan.png" alt="Bang Iwan" width="186" height="250" /></a>
<div id="judul">1. Bang Iwan</div></li>
<li id="kartu-4"> <a href="http://www.hybridcars9.com/plug-in-hybrid-cars" target="_blank"><img title="Hybrid Car" src="http://alwi70.files.wordpress.com/2010/11/transparan.png" alt="Hybrid Car" width="186" height="250" /></a>
<div id="judul">3. Hybrid Car</div></li>
<li id="kartu-5"> <a href="http://jualbarcode.co.id/" target="_blank"><img title="Barcode Printer" src="http://alwi70.files.wordpress.com/2010/11/transparan.png" alt="Barcode Printer" width="186" height="250" /></a>
<div id="judul">5. Barcode Printer</div></li>
</ul>
</div>

Hasilnya bisa dilihat di postingan ini : Main Remi Bersama Top Komentator. Supaya bisa ditampilkan di dalam sebuah postingan caranya bisa dilihat di postingan ini : Custom CSS Per Post. Untuk pengaturan lebar (width), tinggi (height), margin, padding dan lain-lain silahkan disesuaikan.