CSS Text Blur

Well I have been given a challenge by a new client and I am stumped. What they want is to have a blurred shadow behind the text, sort of like a drop shadow but more blurred. This has to work on text not an image. I have found and done shadows on images, but never text. Is it possible with css? If not css maybe with a combination css, javascript, or maybe server side php?

Thoughts?

 

You can kinda do it. I once used the effect on a nav of mine.

You can create an elliptical glow centered as the bg of a <a> by just using a standard image. The downfall is that it does not change shape or size depending on how much text you have in the <a>.

 

http://www.hypergurl.com/cssshadowfilter.html

but this will only work in ie =[

 

your best bet is to make images for the text, and then use an image replacement technique.

http://www.mezzoblue.com/tests/revised-image-replacement/

 

Hmm... thanks for the suggestions. I have seen the hypergurl one...only ie is a problem. Needs to work across all of them. I will have to read the mezzoblue page more, but the eliptical bg image might work for me. I'll maybe give it a try first.

If anyone else has any other ideas please post.

Thanks.

 

Text shadow is a css3 draft property. To my knowledge, only Konqueror and perhaps Safari support it at this time. If you want fuzzy shadows, the previously suggest image is the way to go.

cheers,

gary

 

just ran into this...

http://kryogenix.org/code/browser/aqdropshadow/

not sure if you can make it "blurrly" though

 

also to note, that that method fails miserably when the text is resized (ctrl +/-)

 

Hmm - more to the point maybe you should be advising your client that this is not a good idea? At best it will look tacky and dated at worst it will mean that the text amy be hard to read and may fail disabilities guidelines (or laws) that are relevant in your country.

Cw

 

CanaryWolf...That was the first thing I did....but sometimes you do what they ask and wait. I think I have come up with a solution that is not to bad and still gives them the look that they want. Not my favourite choice but oh well.

 

Hmm... one possible solution would be to create a cgi that generates a image of the text in realtime. The problem with images is they are static - you have to go in and make a new image every time you want to change the text - which is the only real reason for 'no images' to be their concern.

Just make a php that generates a image based on the text... though I would probably use image replacement techniques as well so that when images are off, or in search engines there's actually something to 'look at'.