Home » CSS » Source Code Main Remi Bersama Top Komentator

Source Code Main Remi Bersama Top Komentator

11 Nov. 201018 comments
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.

Mudah-mudahan artikel tentang Source Code Main Remi Bersama Top Komentator ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Tips dan Tricks CSS (Cascading Style Sheets)
  2. Menggulingkan Top Komentator
  3. 80 Inspirasi, Design Footer Nan Cantik Dan Unik
  4. Custom CSS Per Post
  5. Cara Mengganti Background Theme WordPress
  6. Modifikasi Tampilan Halaman Daftar Isi
  7. Cara Mencegah Copy Paste Dengan CSS
  8. Membuat Text Gradient Dengan CSS
  9. Membuat Efek Text Stroke Dengan CSS
  10. Border Style, Border Width, Border Color
  1. 17-1-2013 at 17:18 | #1

    saya juga kepengen memasangnya di blog saya script top komentator diatas
    terima kaish sudah berbagi ilmu

    Reply

Comment pages
1 22108
1+6=? (Wajib diisi)