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. Bypass Template Path dan Stylesheet Path
  2. Tips dan Tricks CSS (Cascading Style Sheets)
  3. Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll
  4. Membuat Menu Navigasi Dengan CSS3
  5. Modifikasi Tampilan Halaman Daftar Isi
  6. Main Remi Bersama Top Komentator
  7. Mempercantik Tampilan Code Snippets Dengan CSS
  8. CSS Image Sprites Generator
  9. Cara Membuat Tampilan Postingan Yang Berbeda-beda
  10. Membuat Text Gradient Dengan CSS
  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)