WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1Facebook Slide panel Empty Facebook Slide panel Sun Jul 29, 2012 4:22 am

Mr.Joker

Mr.Joker
Mr. WebArtz
Mr. WebArtz
Display/Colors/CSS :
Code:
#test {
margin-top:100px;
margin-left:0px;
background-color:#000000;
height:42px;
width: 42px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-top-right-radius:10px;
-moz-border-bottom-right-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
position:absolute;
-webkit-transition: width 1s ease; 
-moz-transition: width 1s ease; 
-o-transition: width 1s ease; 
-ms-transition: width 1s ease; 
transition: width 1s ease; 
border-top:2px solid #6666ff;
border-right:2px solid #6666ff;
border-bottom:2px solid #6666ff;
}
#test:hover {
 width:140px;
}
Add that to CSS. Then open Templates/General/overall_header
After body tag add this:
Code:
 <div id="test"><a href="https://www.facebook.com/"><img src="http://www.dodaj.rs/f/2T/NR/1f0DnhXW/adasd.png" width="130" height="42" align="right" border="0" /></a></div>
Save that and publish it. You will get effect like this.
DEMO: http://fight-club.forumotion.com/

2Facebook Slide panel Empty Re: Facebook Slide panel Sat Aug 04, 2012 10:57 am

ankillien

ankillien
Administrator
Administrator
The code is really nice Very Happy

But it would be much better if you can explain a little about how it works so members can understand the CSS animation technique. Thanks Smile

3Facebook Slide panel Empty Re: Facebook Slide panel Wed Aug 22, 2012 6:25 am

tommycoo

tommycoo
Registered Member
Registered Member
not work for punbb ?

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum