Senin, 11 Juli 2011

Transform Effect for Image Galery

Transform Effect for Image GaleryMeneruskan postingan trick mengenai Be an Expert CSS 3. Sekarang mari kita kembangkan lagi dan terapkan dengan variabel ul agar menjadi satu karya cuamik :D Mendapat ide dari salah satu sobat Beben Koben juga nih :">
http://www.blogspotvision.com/2011/07/how-to-add-polaroids-picture-gallery-to.html
Keren kan bos, image yg tampil sedikit ada yang berefek miring² gitooo b-) Tapi pas cursor menyorot, gambar akan terlihat normal. Trik berikut menggunakan variabel CSS3 :nth-child() Selector and using this too CSS3 Transforms. Berikut kode² atribute transforms alakadarnya :P

CSS3 CodedBrowse Support
transform:rotate(3deg);All/Default
-ms-transform:rotate(3deg);IE 9
-moz-transform:rotate(3deg);Firefox
-webkit-transform:rotate(3deg);Safari and Chrome
-o-transform:rotate(3deg);Opera

DEMO

Klik buat mengambil link!

Bisa disimpan pada sidebar blog kalian, guna mempercantik penampilan :x
Bumbu-bumbune

Kode CSS 3

ul.ben-G {
width:495px;
margin:0 auto;
}
ul.ben-G li {
display:inline;
}
ul.ben-G a {
float: left;
color:#000;
width:auto;
font-size:15px;
text-align:center;
background:#D3A76F;
margin:0 25px 30px 5px;
padding:10px 10px 15px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-webkit-box-shadow:0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow:0 3px 6px rgba(0,0,0,.5);
-webkit-transform:rotate(-2deg);
-moz-transform:rotate(-2deg);
}
ul.ben-G img {
display:block;
width:190px;
height:215px;
margin-bottom:10px;
border:2px solid #555;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
ul.ben-G a:after {
content:attr(title);
}
ul.ben-G li:nth-child(even) a {
-webkit-transform:rotate(2deg);
-moz-transform:rotate(2deg);
}
ul.ben-G li:nth-child(3n) a {
top:-5px;
position:relative;
-moz-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
}
ul.ben-G li:nth-child(5n) a {
right:5px;
position:relative;
-moz-transform:rotate(3deg);
-webkit-transform:rotate(3deg);
}
ul.ben-G li:nth-child(8n) a {
top:8px;
right:5px;
position:relative;
}
ul.ben-G li:nth-child(11n) a {
top:3px;
left:-5px;
position:relative;
}
ul.ben-G li a:hover {
z-index:5;
position:relative;
-webkit-transform:scale(1.15);
-moz-transform:scale(1.15);
-webkit-box-shadow:0 3px 5px rgba(0,0,0,.5);
-moz-box-shadow:0 3px 5px rgba(0,0,0,.5);
}
Keterangan code CSS:
  • width:495px
  • Lebar secara keseluruhan. Biar bisa auto, ganti saja dengan auto/100%
  • background:#D3A76F
  • Warna latar belakang pada image.
  • width:190px
  • Lebar image.
  • height:215px
  • Tinggi gambar.
Mungkin itu saja yg memang perlu dirubah ama agan agin sekalian ;)

Code HTML

<ul class="ben-G">
<li>
<a href="http://LINK-YOUR-DIRECTION-HERE" title="">
<img src="http://LINK-YOUR-IMAGE.PNG" alt="" />
</a>
</li>
<li>
<a href="http://LINK-YOUR-DIRECTION-HERE" title="">
<img src="http://LINK-YOUR-IMAGE.PNG" alt="" />
</a>
</li>
<li>
<a href="http://LINK-YOUR-DIRECTION-HERE" title="">
<img src="http://LINK-YOUR-IMAGE.PNG" alt="" />
</a>
</li>
<li>
<a href="http://LINK-YOUR-DIRECTION-HERE" title="">
<img src="http://LINK-YOUR-IMAGE.PNG" alt="" />
</a>
</li>
<li>
<a href="http://LINK-YOUR-DIRECTION-HERE" title="">
<img src="http://LINK-YOUR-IMAGE.PNG" alt="" />
</a>
</li>
<li>
<a href="http://LINK-YOUR-DIRECTION-HERE" title="">
<img src="LINK-YOUR-IMAGE.PNG" alt="" />
</a>
</li>
</ul>
Good luck, and thanks my friend @blogspotvision
Happy CSS 3 \m/

Tidak ada komentar:

Posting Komentar