deZige

Frame Photo/Kotak Iklan Tidak Beraturan

Membuat kotak iklan atau frame photo dengan tampilan tidak beraturan

Frame Photo/Kotak Iklan Tidak Beraturan

Frame Photo/Kotak Iklan Tidak Beraturan - Membuat kotak iklan dengan ukuran 125px X 125px dengan tampilan yang acak atau tidak beraturan dengan gaya miring yang berbeda-beda, kotak iklan ini bisa kita jadikan sebuah frame sebuah gambar photo atau pun untuk menampilkan gambar/icon logo.

Frame Photo Kotak Iklan Tampilan Acak

Ini merupakan salah satu model tampilan yang bisa dijadikan pilihan untuk menampilkan sebuah gambar yang bertautan pada sebuah produk ataupun sebuah halaman yang berbeda.

Penempatannya bisa ditempatkan pada bagian sidebar untuk mempermudah pengunjung melihat, karena sidebar merupakan bagian penting dan biasa dijadikan tempat untuk menampilkan sebuah kotak iklan.

Kurang lebih tampilannya seperti gambar diatas dan untuk demonya sendiri bisa melihat dengan meng-klik tombol demo bawah ini:


Untuk membuatnya hanya dengan css yang sederhana dan mudah untuk kita modifikasi sesuai dengan keinginan yang kita sesuaikan.

CSS
#frame {
  background:transparent;
  border:4px solid #ddd;
  margin:0 auto;
  padding:2% 0 0 3%;
  position:relative;
  overflow:hidden;
  width:300px;
}
.frame {
  background:#ddd;
  box-shadow:0px 2px 5px #666;
  float:left;
  height:135px;
  margin:0 3% 4% 0;
  text-align:center;
  position:relative;
  width:45.5%;
  -webkit-transition:all 0.5s linear;
  -moz-transition:all 0.5s linear;
  -o-transition:all 0.5s linear;
  transition:all 0.5s linear;
  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  transform:rotate(-5deg);
}
.frame:nth-child(2n+0) {
  -webkit-transform:rotate(15deg);
  -moz-transform:rotate(15deg);
  -o-transform:rotate(15deg);
  -ms-transform:rotate(15deg);
  transform:rotate(15deg);
}
.frame:nth-child(3n+0) {
  -webkit-transform:rotate(10deg);
  -moz-transform:rotate(10deg);
  -o-transform:rotate(10deg);
  -ms-transform:rotate(10deg);
  transform:rotate(10deg);
}
.frame:nth-child(4n+0) {
  -webkit-transform:rotate(-10deg);
  -moz-transform:rotate(-10deg);
  -o-transform:rotate(-10deg);
  -ms-transform:rotate(-10deg);
  transform:rotate(-10deg);
}
.frame a:hover:after {
  background:rgba(0,0,0,0.25);
  font:normal 12px arial,sans-serif;
  color:#999;
  text-decoration:none;
  content:attr(title);
  position:absolute;
  left:4%; 
  bottom:3%;
  width:92%;
  z-index:1;
}
.frame img {
  margin:4% auto 0;
  width:125px;
  height:125px;
}
.frame:hover {
  background:#eee;
  box-shadow:2px 3px 5px #333;
  -webkit-transform:scale(1.1,1.1);
  -moz-transform:scale(1.1,1.1);
  -o-transform:scale(1.1,1.1);
  -ms-transform:scale(1.1,1.1);
  transform:scale(1.1,1.1);
  position:relative;
  z-index:10;
}

HTML
<div id="frame">
  <div class="frame"><a href="###" title="Banner"><img src="Alamat Gambar" alt="Banner"/></a>
  </div>
  <div class="frame"><a href="###" title="Banner"><img src="Alamat Gambar" alt="Banner"/></a>
  </div>
  <div class="frame"><a href="###" title="Banner"><img src="Alamat Gambar" alt="Banner"/></a>
  </div>
  <div class="frame"><a href="###" title="Banner"><img src="Alamat Gambar" alt="Banner"/></a>
  </div>
  <div class="frame"><a href="###" title="Banner"><img src="Alamat Gambar" alt="Banner"/></a>
  </div>
  <div class="frame"><a href="###" title="Banner"><img src="Alamat Gambar" alt="Banner"/></a>
  </div>
</div>

Semoga bermanfaat.

No comments:

Terima Kasih Atas Komentar Anda

  • +Bagikan
  • +Admin

Kontak SosMed

.
deZige