-->


CSS3 Fish Eye Bubble Ease In & Scale

Membuat Fish Eye atau mata ikan (ikon gambar menyembul ketika onmousehover) dalam bahasa CSS3 adalah membuat gambar yang kita sorot menjadi besar dari gambar sedia kala. Teknik ini lumayan cukup bagus, mengingat teknik ini irit space di sidebar blog karena biasanya penempatannya di sidebar blog. Tapi ketika kita membutuhkan untuk view gambar, maka gambar itu akan menjadi semakin besar dengan perbandingan yang udah kita atur dengan skala dari semula yaitu ease in dan ease out ketika kita sorot mouse. Asyik bukan Teknik Fish Eye ala CSS3?

Untuk mempermudah kalian memahami apa itu teknik CSS3 menggunakan teknik Fish Eye, aku akan mencoba memberikan runtutannya seperti dibawah ini. Memang agak ribet, tapi kalo mbacanya pelan-pelan ntar juga bisa dipahami juga kok. Jadi tenang aja, wong sebenernya kalian tinggal copas doang tu coding, dan hanya mengganti URL image yang akan kalian pampang. Mudah khan, ya udah kita langsung aja ke TKP untuk melihat tutorial Teknik Fish Eye ala CSS3, hehe ...


Langsung aja ke Edit HTML
terus temuin ]]></b:skin>
Letakkan CSS dibawah persis diatas ]]></b:skin>


<style type='text/css'>
/*Devilz Fish Eye CSS3*/
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 45px; /*Setelah disorot mouse*/
height: 40px; /*Setelah disorot mouse*/
}
.bubblewrap li img{
width: 35px; /*Sebelum disorot mouse*/
height: 40px; /*Sebelum disorot mouse*/
border:0;
margin-right: 0px;
-moz-transition:-moz-transform 0.1s ease-in; /*Kecepatan transisi*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*Kecepatan transisi*/
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*Skala image disorot mouse*/
-webkit-transform:scale(1.8); /*Skala image disorot mouse*/
</style>


Kalo udah tinggal tambahin HTML dibawah ini di sidebar kalian

<div class="bubblewrap">
<ul>
<li><a href="URL target 1"/><img src="URL image 1 kalian"/></a></li>
<li><a href="URL target 2"/><img src="URL image 2 kalian"/></a></li>
<li><a href="Dan seterusnya"/><img src="URL image 3 kalian"/></a></li>
</ul>
</div>


Contohnya yang di sisi atas sidebar blog ini .. ada ikon Firefox, Aurora dan Safari




Blogger Yang Baek, Meninggalkan Jejak Berupa Komentar

Horeee 1 PertamaX Nongol di sini:

Hamba allah hobby ngeTweet [agi ngeComment]

contohnya gak ada nih bang? :14

:10 :11 :12 :13
:14 :15 :16 :17
:18 :19 :20 :21
:22 :23 :24 :25
:26 :27 :28 :29
:30 :31 :32 :33
:34 :35 :36 :37
:38 :39 :40 :41
:42 :43 :44 :45
:46 :47 :48 :49
:50 :51 :52 :53
:54 :55 :56 :57
:58

Jangan lupa ada emo Kaskus diatas CommentBox Ini. Langsung dicoba gan ? Entar ane kasih cendol dah.

Protected by Copyscape Web Plagiarism Software
English French German Spain Italian DutchRussian Portuguese Japanese Korean Arabic Chinese Simplified