The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

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

4 posters

The forum of the forums :: Support forum :: Scripts (Coding) Problems :: Scripts Problems Archives

Go down

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

Post by !_NICK_! 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_!
!_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 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
LGforum
Hyperactive

Male Posts : 2265
Reputation : 264
Language : English
Location : UK

Back to top Go down

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

Post by Dark_Code 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
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_! 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_!
!_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 May 28th 2012, 8:07 pm

!_NICK_! wrote:@Staff - Solved!

Topic Solved & Locked


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

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

Male Posts : 51489
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: Support forum :: Scripts (Coding) Problems :: Scripts Problems Archives

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