Web Hosting Talk







View Full Version : Blured text


Skot
12-20-2004, 05:03 PM
Does anyone know the CSS what is used to blur the text when a link is hovered over?

I know it is placed in the

a:hover

part of the css file, but I can't remember what it is.

Anyhelp is appreciated

:)

the_pm
12-20-2004, 05:30 PM
I'm afraid it's not possible through straight CSS. You could do background image replacement and create your text as images, but that's something different all together. In terms of a CSS filter, unless you're talking about some proprietary crap that only one browser offers or something in CSS3 that's not supported yet, images are the only way to go for this one. Sorry :(

Skot
12-20-2004, 05:41 PM
i think it could of been filter...

It allows you to set how much you want your text to blur and in which angle.

the_pm
12-20-2004, 05:50 PM
The only thing I can think of is this: http://www.w3.org/TR/REC-CSS2/text.html#text-shadow-props - which allows you to apply blur to a shadow, and through some trickery you could probably make the text itself disappear. According to TopStyle Pro, it is not supported in any browser it checks, though I haven't updated my software, so it might be supported in some current release software. Count on reliability to be low on this one. That's all I can find that isn't browser specific. I won't even bother with proprietary styles. In today's world, there's little point ;)

meth0
12-20-2004, 06:25 PM
a:hover { filter:Blur(Direction=x, Strength=y) }

x=direction in degrees
y=amt of blur

caution: IE only filter.

Skot
12-20-2004, 09:30 PM
cheers :-D

**edit**

Just tried that and it doesn't work for me in IE6 on xp...

Amy ideas?

meth0
12-20-2004, 09:44 PM
try a JS work around with 2 css classes.

.linkRest { whatever }
.linkHover { whatever + filter:Blur(Direction=x, Strength=y) }

<div class="linkRest" onMouseOver="className='linkHover'" onMouseOut="className='linkRest'" onClick="location.href='#'" >TEXT LINK</div>

ps - add cursor: hand to .linkHover for usability