[Pro] Would like text to glow when mouse over

Is there a way that if you hover your mouse over a text that it starts to glow?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

A CSS3 text shadow in the color of your desired glow should work. You’ll need to use the Extended dialog to add this attribute, but something like this will do the trick:

text-shadow: #74aefd 0 0 12px;

That makes a subtle blue glow around whatever text it’s applied to.

If you add this name/value pair to the Hover attribute of your Link Style for the container element (or the page) then links will glow when you hover over them. You’ll have to use the Extended sub-dialog in the Edit Style dialog to add this. If you haven’t done this before, you put everything left of the colon in the Name field, and everything right of the colon (but not the trailing semicolon) in the Value field. You also leave out the colon all together. Freeway re-formats it back to match the code block above.

This has pretty wide browser support – I think even IE >=8 can handle it.

Walter

On Sep 20, 2012, at 11:24 AM, DTP2 wrote:

Is there a way that if you hover your mouse over a text that it starts to glow?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

For an extra little sizzle you can add CSS3 keyframes so the glow animates when the mouse hovers over the text;
http://www.freewayactions.com/test/glowing-text/

Watch out for the vendor specific CSS which will invalidate your stylesheet. The good news is it should work in most modern browsers - even IE 10!
Regards,
Tim.

On 20 Sep 2012, at 16:24, DTP2 wrote:

Is there a way that if you hover your mouse over a text that it starts to glow?


Experienced Freeway designer for hire - http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks to both of you!

The first already worked like a charm and the second one is nice to try and play with.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think Walter is having some dyslexia moments tonight as the text-shadow property should end with the color declaration ie text-shadow: 2px 2px #ff0000;

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I believe you, but what he said already worked :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 20 Sep 2012, 5:24 pm, Tim Plumb wrote:

For an extra little sizzle you can add CSS3 keyframes so the glow animates when the mouse hovers over the text;
Glowing text

Watch out for the vendor specific CSS which will invalidate your stylesheet. The good news is it should work in most modern browsers - even IE 10!
Regards,
Tim.

That’s pretty cool Tim. However, there seems to be quite a bit of delay. Is the delay adjustable?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Certainly. It is all adjustable. The glow ramps up from white to purple and back to white again in three seconds. If you look at the source code for the page you can see these three stages in the ‘glow’ animation as well as the animation duration defined in the styles.
Personally the only thing I don’t like is the harsh snap back to no glow when you mouse out of the text. Maybe I can remedy this with its own CSS3 transition. I’ll have to have a play.
Regards,
Tim.

On 22 Sep 2012, at 19:47, RavenManiac wrote:

That’s pretty cool Tim. However, there seems to be quite a bit of delay. Is the delay adjustable?


FreewayStyle.com - Free Freeway templates and parts to download, use and explore - http://www.freewaystyle.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options