how make a colored text fade into another using a hover code? (using css transitions)
4 posters
Page 1 of 1
how make a colored text fade into another using a hover code? (using css transitions)
how make a colored text fade into another using a hover code?
(using css transitions)
(using css transitions)
Last edited by Ace 1 on May 21st 2015, 1:08 am; edited 2 times in total
Re: how make a colored text fade into another using a hover code? (using css transitions)
Are you speaking about links on your forum
Or a paragraph of text in a post?
Or a paragraph of text in a post?
Re: how make a colored text fade into another using a hover code? (using css transitions)
Please change the title of your topic to something that is related to your question/issue, so that other users will be able to find their question/issue using the search engine.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: how make a colored text fade into another using a hover code? (using css transitions)
Just one link or all links?
Re: how make a colored text fade into another using a hover code? (using css transitions)
All links <a>
Including those in my chatbox which don't do that.
Also including the topics inside forums which don't do that.
Including those in my chatbox which don't do that.
Also including the topics inside forums which don't do that.
Re: how make a colored text fade into another using a hover code? (using css transitions)
Now what color did you want for for plain links?
And what color for when you hover them?
And what color for when you hover them?
Re: how make a colored text fade into another using a hover code? (using css transitions)
Try adding this to the top of your Css Style sheet.
Please let me know if this code worked for you, if not i will fix it.
- Code:
a {
color: #fff !important;
/* dont edit bellow this line */
transition: color 1.0s linear !important;
-o-transition: color 1.0s linear !important;
-moz-transition: color 1.0s linear !important;
-webkit-transition: color 1.0s linear !important;
/* dont edit above this line */
}
a:hover {
color: #0ff !important;
}
Please let me know if this code worked for you, if not i will fix it.
Last edited by Sir. Mayo on May 20th 2015, 12:09 am; edited 1 time in total (Reason for editing : added info)
Re: how make a colored text fade into another using a hover code? (using css transitions)
Nvm it didnt work even when I didn't change it. It completely removed every fade code I had already now it doesn't do anything when you hover :\
Last edited by Ace 1 on May 20th 2015, 12:16 am; edited 1 time in total
Re: how make a colored text fade into another using a hover code? (using css transitions)
What on them are you changing? Just change the numbers, the rest is need to make sure it works on all browsers.
Re: how make a colored text fade into another using a hover code? (using css transitions)
I was gonna change linear to "ease-in-and-out" cuz I wanna ease up in there and then ease out of there.
Re: how make a colored text fade into another using a hover code? (using css transitions)
Post what you changed it to if you still have it
You may not have removed enough.
You may not have removed enough.
Re: how make a colored text fade into another using a hover code? (using css transitions)
- Code:
a {
color: #fff !important;
/* dont edit bellow this line */
transition: color 1.0s linear !important;
-o-transition: color 1.0s linear !important;
-moz-transition: color 1.0s linear !important;
-webkit-transition: color 1.0s linear !important;
/* dont edit above this line */
}
Ace 1 wrote:Ok, but I'm changing the code behind the line
Nvm it didnt work even when I didn't change it. It completely removed every fade code I had already now it doesn't do anything when you hover :\
Re: how make a colored text fade into another using a hover code? (using css transitions)
Does this do it for you:
sorry for taking so long, i had no idea about the ease in , ease out effect and was reading up on it.
Here is the Minified version:
- Code:
a {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
color:#fff;
}
a:hover, a:focus, a:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
color:#0ff;
}
sorry for taking so long, i had no idea about the ease in , ease out effect and was reading up on it.
Here is the Minified version:
- Code:
a{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent;-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:color;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;color:#fff}a:active,a:focus,a:hover{-webkit-transform:scale(1.1);transform:scale(1.1);color:#0ff}
Re: how make a colored text fade into another using a hover code? (using css transitions)
Try this:
- Code:
a:link:hover, a:link:focus {
text-decoration: none !important;
text-shadow: 0 0 0.9em red, 0 0 0.9em red, 0 0 0.9em red;
}
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: how make a colored text fade into another using a hover code? (using css transitions)
@SLGray @Sir. Mayonnaise
That's cool and all, but... All I wanted was for all of my links to turn blue. For example, click here and hover over "Application Template".
This turns blue.
Then go back to the link and hover over "Pivot-Son #1".
See the difference? Idk why this happens this way. Because in the other forums (like this one) it hovers fine between the Announcements and Topics.
That's cool and all, but... All I wanted was for all of my links to turn blue. For example, click here and hover over "Application Template".
This turns blue.
Then go back to the link and hover over "Pivot-Son #1".
See the difference? Idk why this happens this way. Because in the other forums (like this one) it hovers fine between the Announcements and Topics.
Re: how make a colored text fade into another using a hover code? (using css transitions)
That is weird. It hovers correctly when you open the topic.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: how make a colored text fade into another using a hover code? (using css transitions)
I thought maybe there could be a code that does this for all forum links
Re: how make a colored text fade into another using a hover code? (using css transitions)
The code we gave you should work on all links.
I was wrong. Add this to your CSS:
I was wrong. Add this to your CSS:
- Code:
a.topictitle:link:hover, a.topictitle:link:focus {
Add the same code I gave for links
}
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: how make a colored text fade into another using a hover code? (using css transitions)
@Ace 1
There are types of links that can be changed in the css.
there is just plain a {} which is for all links on the fourm
there is a:hover {} which shows the values when you hover the link
then there is a:visited {} which shows up on links you have visited. I Will see if i can figure out a code to do what you wanted just give me a little time.
Best wishes Sir.Mayo
EDIT:
IT appears that you Topic title is a span tag with a color code in the html,
<span style="color:#FFFFFF;text-decoration:none;">Pivot-son #1</span>
See the style=color:#FFFFFF; That is causing the css for that span to be over written.
I think if you go to your acp and right before the CSS tab is a colors tab where you can change link colors see if what you want can be done in there But i doubt it
Now, the only other thing i can say is it may be your topics_list_box template or something similar to that.
Could you post your topics_list_box template here so i can have a look at it.
There are types of links that can be changed in the css.
there is just plain a {} which is for all links on the fourm
there is a:hover {} which shows the values when you hover the link
then there is a:visited {} which shows up on links you have visited. I Will see if i can figure out a code to do what you wanted just give me a little time.
Best wishes Sir.Mayo
EDIT:
IT appears that you Topic title is a span tag with a color code in the html,
<span style="color:#FFFFFF;text-decoration:none;">Pivot-son #1</span>
See the style=color:#FFFFFF; That is causing the css for that span to be over written.
I think if you go to your acp and right before the CSS tab is a colors tab where you can change link colors see if what you want can be done in there But i doubt it
Now, the only other thing i can say is it may be your topics_list_box template or something similar to that.
Could you post your topics_list_box template here so i can have a look at it.
Last edited by Sir. Mayo on May 20th 2015, 11:12 pm; edited 2 times in total (Reason for editing : added info)
Re: how make a colored text fade into another using a hover code? (using css transitions)
The standard syntax would be :
If you wanted to have better CSS3 support for older browsers, prefixing transition is the way to go.
Normally when a style doesn't take effect, adding the !important flag should override the style that wasn't changing to begin with. However, in Ace's case, it appears that the topic title is being colored by a span tag. I'm assuming you have the ability to color topic titles enabled.
Anyway, you can override this style with the following rule :
Change the red hexadecimal color to whatever you want.
- Code:
/* DEFAULT DISPLAY */
a {
color:#FF0;
transition:500ms;
}
/* HOVER DISPLAY */
a:hover { color:#F00 }
If you wanted to have better CSS3 support for older browsers, prefixing transition is the way to go.
- Code:
-webkit-transition:500ms;
-moz-transition:500ms;
-o-transition:500ms;
Normally when a style doesn't take effect, adding the !important flag should override the style that wasn't changing to begin with. However, in Ace's case, it appears that the topic title is being colored by a span tag. I'm assuming you have the ability to color topic titles enabled.
Anyway, you can override this style with the following rule :
- Code:
a.topictitle:hover span { color:#F00 !important }
Change the red hexadecimal color to whatever you want.
Re: how make a colored text fade into another using a hover code? (using css transitions)
Thanks for clearing that up Ange, i thought i missed something and knew of an easier way to do this.Ange Tuteur wrote:The standard syntax would be :( You can also use a:link for default links, a:visited for visited, and a:active for active links )
- Code:
/* DEFAULT DISPLAY */
a {
color:#FF0;
transition:500ms;
}
/* HOVER DISPLAY */
a:hover { color:#F00 }
If you wanted to have better CSS3 support for older browsers, prefixing transition is the way to go.( that would be added to the first rule )
- Code:
-webkit-transition:500ms;
-moz-transition:500ms;
-o-transition:500ms;
Normally when a style doesn't take effect, adding the !important flag should override the style that wasn't changing to begin with. However, in Ace's case, it appears that the topic title is being colored by a span tag. I'm assuming you have the ability to color topic titles enabled.
Anyway, you can override this style with the following rule :
- Code:
a.topictitle:hover span { color:#F00 !important }
Change the red hexadecimal color to whatever you want.
But yea @Ace 1 What Ange posted should work, no need for the template now.
Re: how make a colored text fade into another using a hover code? (using css transitions)
No problem.
Topic archived
Topic archived
Similar topics
» fade slow on hover over main buttons phpBB2 forum
» help in this code . the effect on code > add button to Put under the colored writing
» How to fade background image so links/text is visible? (USING jQuery)
» HTML Colored text will not show.
» Hover Code for PhBB3
» help in this code . the effect on code > add button to Put under the colored writing
» How to fade background image so links/text is visible? (USING jQuery)
» HTML Colored text will not show.
» Hover Code for PhBB3
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum