The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to do this in #pun-intro (CSS)

View previous topic View next topic Go down

Solved How to do this in #pun-intro (CSS)

Post by !_NICK_! on May 27th 2012, 9:18 pm

How do I do what they've done here is CSS?

http://demonstratii.wikiforum.ro/forum


Last edited by !_NICK_! on May 28th 2012, 8:00 pm; edited 1 time in total

!_NICK_!
Active Poster

Male Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.

Back to top Go down

Solved Re: How to do this in #pun-intro (CSS)

Post by LGforum on May 28th 2012, 6:03 pm

You mean the logo? That would be a background image being moved on hover. Using CSS3 transitions to create the sliding sort of effect.

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: How to do this in #pun-intro (CSS)

Post by Dark_Code on May 28th 2012, 7:49 pm

here it is for Phpbb3

Code:
.headerbar {
border-radius: 10px;
background: url(http://i44.servimg.com/u/f44/16/84/52/28/abstra10.jpg);background-position: 80% 0%;-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
height: 180px;
}

.headerbar:hover {
background: url(http://i44.servimg.com/u/f44/16/84/52/28/abstra10.jpg);background-position: 80% 100%;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;}

and here it is for Punbb
Code:

#pun-intro {
border-radius: 10px;
background: url(http://i44.servimg.com/u/f44/16/84/52/28/abstra10.jpg);background-position: 80% 0%;-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
height: 180px;
}

#pun-intro:hover {
background: url(http://i44.servimg.com/u/f44/16/84/52/28/abstra10.jpg);background-position: 80% 100%;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;}

Dark_Code
Forumember

Male Posts : 91
Reputation : 4
Language : CSS
Location : Modesto

http://csshelp.ipbhost.com/

Back to top Go down

Solved Re: How to do this in #pun-intro (CSS)

Post by !_NICK_! on May 28th 2012, 7:58 pm

@LGforum - Thanks for telling me what it was called.

@Dark_Code - Thanks for posting both codes. Very much appreciated!

@Staff - Solved!

!_NICK_!
Active Poster

Male Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.

Back to top Go down

Solved Re: How to do this in #pun-intro (CSS)

Post by SLGray on May 28th 2012, 8:07 pm

@!_NICK_! wrote:@Staff - Solved!

Topic Solved & Locked


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36673
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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