CSS: glowing text with glow very wide and high

问题

I'm investigating since some days box-shadow and text-shadow. I'm trying to gain the following effect. I want a glow come out from the text of the <a> once hovered. Simple, this should be easy as I explored using text-shadow. Ok, but it works with small glows, I mean, once the glow is bigger you just cannot see the glow due to its high blur. There has to be a solution for this. An image will explain better than 100 words.

This is what I want to gain:

LINK:

HOVER:

This is the code I've used for

#projectBox a:LINK{
    background-image: url('../_img/showcase/projectTabs/link.png');
}

#projectBox a:HOVER{
    background-image: url('../_img/showcase/projectTabs/link.png');
    color:#fa0000;
    text-shadow: 0 0 80px white;
}

I know I can use background image again for the hover but I want to avoid this. The problem is that if you add more blur it doesnt appear anymore, as its too blur. the other two properties dont help too much, as I want the glow to begin from the middle.

Lets work out this together and see how we can do with CSS a wide and high glow effect.

回答1:

Why not use CSS3's gradients?

Take a look at this fiddle.

You can generate your own gradients here or here.

回答2:

You can add multiple text-shadows:

text-shadow: 
-3px 0px 10px #FFF,
3px 0px 10px #FFF,
0px 0px 10px #FFF,
-3px -3px 10px #FFF,
3px -3px 10px #FFF,
0px -3px 10px #FFF,
-3px 3px 10px #FFF,
3px 3px 10px #FFF,
0px 3px 10px #FFF;

This would give you a wider, fuller glow, as there are 9 separate shadows surrounding the text. Adjust the values to get the intensity you're looking for.

(the values are a random guess - untested as I'm on my phone) :)

http://jsfiddle.net/pzMmC/ -

回答3:

You can overlay concentric shadows to multiply the effect:

a:hover {
    text-shadow: 0 0 80px white,
                 0 0 70px white,
                 0 0 60px white,
                 0 0 50px white,
                 0 0 40px white,
                 0 0 30px white;
}

I've written a test: http://jsfiddle.net/simbirsk/DnHKk/

来源：https://stackoverflow.com/questions/12673240/css-glowing-text-with-glow-very-wide-and-high

标签

css

hover

css3

glow