Membuat Image Bubbles Effect Menggunakan CSS3
CSS3 transform and transition ini memungkinkan anda untuk memanipulasi unsur-unsur hanya dengan menggunakan CSS. CSS transform digunakan untuk skala, memutar, atau bahkan elemen miring tanpa mengganggu konten di sekitarnya, sementara transition digunakan untuk menghidupkan properti CSS ke dalam pandangan. Dua sifat tersebut mendukung versi modern dari Safari, Chrome, Mozilla 3.5 +, dan Opera 9.5 + dalam tingkat yang bervariasi.
Transform and transition properti menggunakan CSS3 ini untuk menampilkan "bloat up" sebuah gambar ketika mouse digulirkan diatasnya.
Contoh:
(Letakan cursor diatas gambar...)
<style type="text/css">
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}
.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>
<ul class="bubblewrap">
<li><a href="#"><img src="http://img823.imageshack.us/img823/3365/stumbleupong.png" title="Add to Stumbleupon" /></a></li>
<li><a href="#"><img src="http://img862.imageshack.us/img862/1769/facebookk.png" title="Add to Facebook" /></a></li>
<li><a href="#"><img src="http://img190.imageshack.us/img190/6814/diggrg.png" title="Add to Digg" /></a></li>
<li><a href="#"><img src="http://img576.imageshack.us/img576/3786/twitteraz.png" title="Add to Twitter" /></a></li>
<li><a href="#"><img src="http://img713.imageshack.us/img713/2669/rssi.png" title="Add RSS Feed" /></a></li>
</ul>
sumber: dynamicdrive
Transform and transition properti menggunakan CSS3 ini untuk menampilkan "bloat up" sebuah gambar ketika mouse digulirkan diatasnya.
Contoh:
(Letakan cursor diatas gambar...)
Cara Memasang Image Bubbles Effect Menggunakan CSS3
- Langkah Pertama:
<style type="text/css">
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}
.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>
- Langkah Kedua:
<ul class="bubblewrap">
<li><a href="#"><img src="http://img823.imageshack.us/img823/3365/stumbleupong.png" title="Add to Stumbleupon" /></a></li>
<li><a href="#"><img src="http://img862.imageshack.us/img862/1769/facebookk.png" title="Add to Facebook" /></a></li>
<li><a href="#"><img src="http://img190.imageshack.us/img190/6814/diggrg.png" title="Add to Digg" /></a></li>
<li><a href="#"><img src="http://img576.imageshack.us/img576/3786/twitteraz.png" title="Add to Twitter" /></a></li>
<li><a href="#"><img src="http://img713.imageshack.us/img713/2669/rssi.png" title="Add RSS Feed" /></a></li>
</ul>
sumber: dynamicdrive
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