-->


CSS3 Animation Variasi Trick Pojok

Hei ketemu lagi dengan CSS3 lagi. Ampe eneg dari kemaren cuman CSS3 mulu. Hehe tapi khan ntar jadinya bagus tuh blog kalian. Karena dengan CSS3 segalanya menjadi mungkin. Mau trick yang kayak gimana dan design yang serupa apa pun bisa. Asal itu semua kita pelajari dan kita kombinasikan. Sebenernya nggak sulit kok zob. Intinya cuman butuh disiplin waktu belajar dan tekun mempelajari sesuatu. Yakin, asal kita mau, semuanya menjadi mungkin. Nah sekarang kita akan langsung ke trick berikutnya yaitu membuat Variasi Trick Pojok dengan CSS3 Animation sehingga ntar bila icon image yang ada di pojok kita sorot dengan mouse, hasilnya maka image itu akan segera mengecil dan ketika kita jauhkan mouse, image akan kembali seperti semula.




Untuk lebih terangnya, kalian bisa liat dengan seksama gambar facebook bulat dengan ornament stir kapal yang ada di pinggirnya berada di bawah pojok dari blog contoh itu. Bila kalian sorot mouse, maka gerakannya akan gimana, pasti akan segera mengecil khan? Nah itulah Variasi Trick Pojok dengan CSS3 Animation yang ntar akan aku beri ke kalian semua. Gimana, masih bingung, kalo bingung, langsung aja aku kasih tuntunannya pelan-pelan ya zob.


Langsung masuk ke Edit HTML
Cari kode ]]></b:skin>
Letakkan kode dibawah persis diatas kode
]]></b:skin>
#devilz {
width: 160px;
height:160px;
}
#devilz li a {
text-decoration: none;
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
}
#devilz li a:link, #devilz li a:visited {
color: #777;
display: block;
background: url(http://2.bp.blogspot.com/-Q03BYRgLTFg/TjjiX-ooe6I/AAAAAAAAAQA/VlgbmHYeaOc/s200/devilz.gif);
padding: 0px 0 0 0px;
}
#devilz li a:hover {
color: #257EB7;
background: url(http://2.bp.blogspot.com/-Q03BYRgLTFg/TjjiX-ooe6I/AAAAAAAAAQA/VlgbmHYeaOc/s200/devilz.gif) 0 -32px;
padding: 0px 0 0 0px;
}
#devilz li a:active {
color: #fff;
background: url(http://2.bp.blogspot.com/-Q03BYRgLTFg/TjjiX-ooe6I/AAAAAAAAAQA/VlgbmHYeaOc/s200/devilz.gif) 0 -64px;
padding: 0px 0 0 0px;
}
#devilz ul {
list-style: none;
margin: 0;
padding: 0;
}
.devilzenlarge{
list-style-type:none;
margin:0;
padding:0;
}
.devilzenlarge li,
.devilzenlarge li.hell1{
display:inline;
width:110px;
}
.devilzenlarge li img,
.devilzenlarge li.hell1 img{
width:160px;
float:left;
border:0px outset #00bfff;
margin: 0px;
opacity: 1.0;
background: transparent;
padding: 0px;
z-index: 100;
cursor: pointer;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-webkit-transition: all 1.5s ease-in;
-moz-transition: all 1.5s ease-in;
box-shadow: 0px 0px 0px rgba(0,0,0, 1.0);
-moz-box-shadow: 0px 0px 0px rgba(0,0,0, 1.0);
-webkit-box-shadow: 0px 0px 0px rgba(0,0,0, 1.0);
}
.devilzenlarge li img:hover{
-moz-transform:scale(0);
-webkit-transform: scale(0);
opacity: 0;
background: transparent;
border-color: transparent;
}
.devilzenlarge li.hell1 img:hover{
-moz-transform: scale(0) rotate(1080deg);
-webkit-transform: scale(0) rotate(1080deg);
}


Terus untuk memanggil codingnya kita harus memiliki coding
Trick Floating Image Corner ::

#trik_pojok {
position:fixed; _position:absolute; bottom:0px; left:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+document.documentElement.clientWidth - offsetWidth);}
]]></b:skin>


terus sambungannya

<div id='trik_pojok'>
<img border='0' src='http://1.bp.blogspot.com/-1bKw7qRI-sE/Tiw3caHF5HI/AAAAAAAAAYc/kXjRFFQJFww/s400/FB.png'/>
</div>
</body>


Nah catatan :
Kalian tinggal bubuhin coding ini disela-sela ::

<div id='trik_pojok'>
<img border='0' src='http://1.bp.blogspot.com/-1bKw7qRI-sE/Tiw3caHF5HI/AAAAAAAAAYc/kXjRFFQJFww/s400/FB.png'/>
</div>
</body>


PERHATIKAN ::

<div id='trik_pojok'>
<ul class='devilzenlarge'>
<li class='hell1'><img border='0' src='http://1.bp.blogspot.com/-1bKw7qRI-sE/Tiw3caHF5HI/AAAAAAAAAYc/kXjRFFQJFww/s400/FB.png'/></li>
</ul>
</div>


Open DIV Trik Pojok

<ul class='devilzenlarge'>
<li class='hell1'>URL Image Floating</li>
</ul>


Close DIV




Blogger Yang Baek, Meninggalkan Jejak Berupa Komentar

Horeee 1 PertamaX Nongol di sini:

cybercere hobby ngeTweet [agi ngeComment]

masih agak pusing sob

: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