gubhug reyot
Energy Saving Mode using CSS3

Move your mouse to go back to the page!
Gerakkan mouse anda dan silahkan nikmati kembali posting kami!

Copyright 2010 gubhugreyot.blogspot.com - All rights reserved

CSS nggolekisearchporm

Create Floating Image Link using CSS3

Floating Image Link can be placed in the bottom-right corner, lower-left corner, upper-right corner, upper-left corner or in any part of the blog page. Changes in position in the set with the code left, right, top or bottom.

To change the position of Floating Image Link, you can set with left, right, top or bottom code. If you add the value of left, right, top or bottom bigger and biggger, so the Floating Image Link will be move to the middle of page, opposite of the code (left, right, top or bottom).

You can use the image with .gif, .jpg or .png file extention. When using a flash file, so only DIV tag will be used. Put flash file between opening DIV tag and closing DIV tag.

In the lower-left corner you can see the floating image link created using CSS3 with image extensions ". Jpg"!

CSS Code


#pojok {
position:fixed;
left:2px;
bottom:2px;
}  
#pojok img {
height:167px;
width:20px; 
border:3px solid #888;
padding:1px;
background:#aaa;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-transition:all 1.2s ease-out;
-moz-transition:all 1.2s ease-out;
-webkit-transition:all 1.2s ease-out;
}  
#pojok:hover img {
z-index:99;
background:#993300;
border-color:#FF0000;
-o-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
-moz-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
-webkit-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
}

xHTML


<div id="pojok">
<a href="http://gubhugreyot.blogspot.com/" target="_blank" title="You may learn about 500 of blogger tutorial, here!">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPsG0W6c-biG0_kEmHmNKcwrxbOQaoj3KOoQNgWmu-FLzg7qT8GzL6RGqxWETvnmoklVX7cyhCYWulVTTL7d0seY-1KPMyaKNvvI09uXFI3WVtFJCxBFTsEVG3euR6bVs2tGXpFDSXJaNp/s200/gubhugreyot167.20.jpg" /></a>
</div>


Put CSS code above ]]></b:skin> and xHTML above </body>


Click the link below to open the tutorial!

Tutorial: Floating Image Link!

Original tutorial by gubhug reyot

Recent Posts Using jQuery-CSS3

 
GR | Edited by | gubhug reyot