-->


CSS3 Image Rotation Back To Top

Back To Top yang sering kita gunakan umumnya berbentuk standar. Gambar menengadah keatas dan itupun hasil kreasi Sotoshop hehe. Gimana kalo kita otak-atik sedikit Back To Topnya dengan sedikit sentuhan supaya ntar jadinya miring. Trik ini menggunakan CSS3 Image Rotation dan kita akan akan mengulasnya pada title Variasi CSS3 Back To Top Miring. Sebenarnya mudah kok, tinggal dibubuhin sedikit coding CSS3 pasti jadi. Hanya penempatannya yang harus tepat, soale kalo tidak, gambar akan bergeser ke kiri atau tepat di tengah bawah FooterWrapper blog. Yeeee jadinya nggak enak diliat to :-D.


Mencoba untuk mendalami CSS3 emang gampang-gampang susah. Seperti yang kita lakukan sekarang ini. Menilik dari tutor yang telah ada pun, masih banyak yang merasa kebingungan. Tapi ya nggak papa, mungkin kesalahan juga ada pada diriku juga yang masih belajar mengotak-atik CSS3. Ribet juga dan terkadang harus mengorbankan waktu dan pikiran untuk menularkan ilmu. Tapi pepatah orang tua mengatakan : Ilmu nggak akan abiz kita bagi, sedangkan harta akan abiz kita bagi. Benerkah itu? bener banget zob. Yaudah kita langsung aja ke tutor Variasi CSS3 Back To Top Miring dibawah ini.



Mungkin ntar codingnya seperti ini ::
Ini kode awal untuk ::
- Opacity atau blur
- Rotation atau berputar

<!-- CSS3 Opacity at devilz -->
/* devilz Gambar Opacity/blur */
.linkopacity img {
filter:alpha(opacity=75);
-moz-opacity: 0.50; /* Opacity gambar pada browser Firefox */
-webkit-opacity: 0.50; /* Opacity gambar pada browser Safari */
opacity: 0.50; /* Coding dasar Opacity */
border:0; /* Border gambar Opacity kosong */
}
/* devilz Gambar Semula/Jelas */
.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0; /* Opacity sorot mouse browser Firefox */
-webkit-opacity: 1.0; /* Opacity sorot mouse browser Safari */
opacity: 1.0; /* Coding dasar Opacity */
border:0; /* Border gambar Opacity kosong */
}
.linkopacityxtra:hover img {
filter:alpha(opacity=1.1);
-moz-opacity: 1.1; /* Opacity gambar pada browser Firefox */
-webkit-opacity: 1.1; /* Opacity gambar pada browser Safari */
opacity: 1.1; /* Coding dasar Opacity */
border:0; /* Border gambar Opacity kosong */
}
<!-- CSS3 Opacity at devilz -->

<!-- CSS3 Opacity at devilz -->
/* devilz Gambar Miring/Berputar */
.rotasiRDL {
transform: rotate(35deg); /* Gambar berputar 35derajat */
-moz-transform: rotate(35deg); /* CSS3 Rotation Image terbaca Firefox */
-webkit-transform: rotate(35deg); /* CSS3 Rotation Image terbaca Safari */
}
<!-- CSS3 Opacity at devilz -->


Semua itu ditempelkan di atas ]]></b:skin> dan letaknya di Edit HTML blog. Tapi jangan lupa sebelum tempel, centang dulu Expand Widget Template.

Kemudian taruh coding Back To Top ini di atas </body> dan letaknya masih di Edit HTML blog.

Seperti ini -->>

<a href='#' style='display:scroll;position:fixed;bottom:0px;right:0px;' title='Back to Top'><img border='0' src='URL Gambar kalian'/></a>

Nah kode diatas yang akan kita permak sedikit --

<span class='linkopacity'><a class='rotasiRDL' href='#' style='display:scroll;position:fixed;bottom:0px;right:0px;' title='Back to Top'><img border='0' src='URL Image Kalian'/></a></span>

Ingat !!
<span class='linkopacity'> untuk gambar blur
class='rotasiRDL' untuk gambar berputar

Contohnya ada di bawah sebelah kanan dari blog ini .. kalian bisa liat khan gambar panah itu bergerak ke arah kanan atas .. itu murni CSS3 bukan buatan dari Sotoshop .. hehe keren khan ?? :-)
Blogger Yang Baek, Meninggalkan Jejak Berupa Komentar

Horeee 1 PertamaX Nongol di sini:

GR "Pulsa" hobby ngeTweet [agi ngeComment]

baru jala2 gan, besuk tak mampir lagi, oke banget blognya

: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