Membuat Polaroid Gallery Menggunakan CSS3
Tidak hanya itu, CSS3 pun mempunyai kemampuan menciptakan efek-efek jQuery, seperti animasi, slideshow, dropdown menu, accordion, horizontal tab, tooltips, dll.
Setelah memahami sintaks dasar CSS3, anda akan menjelajahi fitur baru CSS3 dengan beberapa contoh kasus yang dapat memberikan inspirasi untuk anda. Dan kali ini saya akan memberikan suatu contoh yang dihasilkan oleh CSS3, sebuah proyek bertajuk Membuat Polaroid Gallery menggunakan CSS3, sebuah gallery gambar dengan style Polaroids.
Kode CSS
<style style="display: none;" type="text/css">
/** Polaroid Gallery Dengan CSS3 Example by (C) Buku Catatan si Ugi */
ul.thumb {
position: relative;
list-style: none;
}
ul.thumb li {
position: absolute;
top: 50%;
left: 50%;
padding: 6px 6px 24px 6px;
background: #FFF;
width: 150px;
height: 130px;
-webkit-box-shadow:1px 1px 6px #222;
box-shadow:1px 1px 6px #222;
}
ul.thumb li img {
width: 100%;
height: 100%;
}
margin-top: -130px;
margin-left: -130px;
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
ul.thumb li:nth-child(2) {
margin-top: -120px;
margin-left: -10px;
-moz-transform: rotate(19deg);
-webkit-transform: rotate(19deg);
transform: rotate(19deg);
}
ul.thumb li:nth-child(3) {
margin-top: -10px;
margin-left: -180px;
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
ul.thumb li:nth-child(4) {
margin-top: -50px;
margin-left: -80px;
-moz-transform: rotate(12deg);
-webkit-transform: rotate(12deg);
transform: rotate(12deg);
}
ul.thumb li:nth-child(5) {
margin-top: 20px;
margin-left: 30px;
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
z-index: 10;
height: 322px;
margin-left: -240px;
-webkit-box-shadow:8px 8px 24px #111;
box-shadow:8px 8px 24px #111;
/* and finally order via zero degrees rotation */
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
</style>
/** Polaroid Gallery Dengan CSS3 Example by (C) Buku Catatan si Ugi */
ul.thumb {
position: relative;
list-style: none;
}
ul.thumb li {
position: absolute;
top: 50%;
left: 50%;
padding: 6px 6px 24px 6px;
background: #FFF;
width: 150px;
height: 130px;
/* box shadow is heavy as well if we need
to rotate it during the animation or if
we have not a flat background behind
The alpha channel needs to work a lot
but it gives 3D feeling
*/
-moz-box-shadow:1px 1px 6px #222;-webkit-box-shadow:1px 1px 6px #222;
box-shadow:1px 1px 6px #222;
/* to activate transiction FXs
this is all we need
specifying "all" means that
the browser will try to resolve
and computate everything
z-index included
*/
-webkit-transition: all 3s ease-in-out;/* to create a better 3D feeling
z-index will be in a range from 0 to 10
this means while another pic is going
back to its position another rollovered one
will gradually reach higher z-index
*/
z-index: 0;}
ul.thumb li img {
width: 100%;
height: 100%;
}
/* each image will have a fake rotation
to emulate a disordered desk
It's not clear to me why we like so much
rotated stuff ... probably because we
like to put order without effort
and simply with an hover, or a click?
*/
ul.thumb li:nth-child(1) {margin-top: -130px;
margin-left: -130px;
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
ul.thumb li:nth-child(2) {
margin-top: -120px;
margin-left: -10px;
-moz-transform: rotate(19deg);
-webkit-transform: rotate(19deg);
transform: rotate(19deg);
}
ul.thumb li:nth-child(3) {
margin-top: -10px;
margin-left: -180px;
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
ul.thumb li:nth-child(4) {
margin-top: -50px;
margin-left: -80px;
-moz-transform: rotate(12deg);
-webkit-transform: rotate(12deg);
transform: rotate(12deg);
}
ul.thumb li:nth-child(5) {
margin-top: 20px;
margin-left: 30px;
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
/* here is how the LI element should look
at the end of the transition which
will be activated on hover special selector
*/
ul.thumb li:hover{z-index: 10;
/* original image size */
width: 480px;height: 322px;
/* put the LI in the center (almost due to bottom padding) */
margin-top: -151px;margin-left: -240px;
/* the effect is a "zoom" one, the shadow will be bigger */
-moz-box-shadow:8px 8px 24px #111;-webkit-box-shadow:8px 8px 24px #111;
box-shadow:8px 8px 24px #111;
/* and finally order via zero degrees rotation */
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
</style>
Kode HTML
<ul class="thumb">
<li><img height="322" src="http://www.3site.eu/examples/gallery/img/image1.jpg" width="480" /></li>
<li><img height="322" src="http://www.3site.eu/examples/gallery/img/image2.jpg" width="480" /></li>
<li><img height="322" src="http://www.3site.eu/examples/gallery/img/image3.jpg" width="480" /></li>
<li><img height="322" src="http://www.3site.eu/examples/gallery/img/image4.jpg" width="480" /></li>
<li><img height="322" src="http://www.3site.eu/examples/gallery/img/image5.jpg" width="480" /></li>
</ul>
<li><img height="322" src="http://www.3site.eu/examples/gallery/img/image1.jpg" width="480" /></li>
<li><img height="322" src="http://www.3site.eu/examples/gallery/img/image2.jpg" width="480" /></li>
<li><img height="322" src="http://www.3site.eu/examples/gallery/img/image3.jpg" width="480" /></li>
<li><img height="322" src="http://www.3site.eu/examples/gallery/img/image4.jpg" width="480" /></li>
<li><img height="322" src="http://www.3site.eu/examples/gallery/img/image5.jpg" width="480" /></li>
</ul>
Keterangan:
Pada kode HTML diatas, silahkan anda ganti URL gambar yang telah diberi warna Orange, dengan Gambar yang anda inginkan.More Detail:
Untuk kode CSS, silakan anda letakan ke dalam tag <head> template anda dan untuk kode HTML anda pasang ke dalam tag <body>, atau dimanapun anda ingin menampilkan Polaroid Gallery pada halaman website anda, dengan menambahkan Gadget dan meletakan kode HTML tersebut kedalamnya.
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon