Translate To English Translate To French Translate To German Translate To Spain Translate To Russian Translate To Chinese

Posted by:
Lihat Profile Lengkap Dahe Ugi

Suffering from the facts of life have become part of my life, but I never regret and always try to beat it

Dahe Ugi
3/16/2012

Sebuah Efek yang diciptakan dengan menggunakan CSS3, yang dapat memutar kartu, sehingga Anda dapat melihat informasi di sebalik kartu tersebut.

Demo :
Letakan Cursor pada gambar, Untuk melihat Informasi Kartu...

The Barn Owl

(Tyto alba) is the most widely distributed species of owl, and one of the most widespread of all birds. It is also referred to as Common Barn Owl, to distinguish it from other species in the barn-owl family Tytonidae. These form one of two main lineages of living owls, the other being the typical owls (Strigidae). T. alba is found almost anywhere in the world except polar and desert regions, Asia north of the Alpide belt, most of Indonesia, and the Pacific islands.


Source Wikipedia

Barn owl




More Detail :
Letakan Kode CSS kedalam tag <head> template anda dan kode HTML kedalam tag <body>. Untuk gambar dan Text Deskripsi yang akan anda gunakan, silahkan lihat contoh penempatannya dalam kode HTML pada text yang berwarna merah dan kuning.

Kode CSS
<style type="text/css">
#container {position: relative; height:362px; width: 282px; margin: 0 auto;
-webkit-perspective: 800px;
-moz-perspective: 800px;
}
#container div {position:absolute; left:0; top:0; width:242px; height: 322px; padding:20px; background:#463;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
}
#container div.lower {font-family: verdana, arial, sans-serif; background:#642;
background: -moz-linear-gradient(-45deg, #642, #864 50%, #642 100%);
background: -webkit-gradient(linear, 0 0, 100% 100%, from(#642), color-stop(50%, #a86), color-stop(100%, #642));
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
#container div.lower h1 {font-size:20px; padding:0; margin:0; color:#fff; line-height:40px;}
#container div.lower p {font-size:11px; padding:0; margin:0; color:#eee; line-height:20px;}
#container div.lower a {color:#ff0;}

#container div.upper {
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
background: -moz-linear-gradient(-45deg, #463, #8a7 50%, #463 100%);
background: -webkit-gradient(linear, 0 0, 100% 100%, from(#463), color-stop(50%, #8a7), color-stop(100%, #463));
}
#container div.upper img {border:1px solid #fff;}

#container:hover div.lower {
-moz-transform: rotateY(0);
-webkit-transform: rotateY(0);
}
#container:hover div.upper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}

</style>

Kode HTML
<div id="info">
<div id="container">
<div class="lower">
<h1>The Barn Owl</h1>
<p>(Tyto alba) is the most widely distributed species of owl, and one of the most widespread of all birds. It is also referred to as Common Barn Owl, to distinguish it from other species in the barn-owl family Tytonidae. These form one of two main lineages of living owls, the other being the typical owls (Strigidae). T. alba is found almost anywhere in the world except polar and desert regions, Asia north of the Alpide belt, most of Indonesia, and the Pacific islands.</p>

<p>Source <a href="http://en.wikipedia.org/wiki/Barn_Owl">Wikipedia</a>
</div>
<div class="upper">
<img src="gambar/owl.jpg" alt="Barn owl" />
</div>
</div>

</div> <!-- end info -->

Selesai...


Posted by:
Lihat Profile Lengkap Dahe Ugi

Suffering from the facts of life have become part of my life, but I never regret and always try to beat it

Dahe Ugi
Expand

Artikel Terkait Lainnya:







Follow Us


0 komentar:

Poskan Komentar



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







Buku Tamu

Buku Catatan si Ugi

close
cbox