CSS: glowing text with glow very wide and high

P

3

2

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:

enter image description here

HOVER:

enter image description here

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.

Plug answered 1/10, 2012 at 12:26 Comment(0)

M

1

Why not use CSS3's gradients?

Take a look at this fiddle.

You can generate your own gradients here or here.

Melanosis answered 1/10, 2012 at 12:42 Comment(2)

This seems to be what I needed. I'm going to test soon... I will give you the credits! While I work with it, I searched gradient CSS in w3schools to see its compatibility with cross browser. It seems non existent, how cross-browser friendly is it? – Plug 1/10, 2012 at 14:23

As you can see here: caniuse.com/css-gradients it's supported by most browsers, but not by IE9 or less. That's a shame. – Melanosis 1/10, 2012 at 14:41

B

3

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/ -

Brazil answered 1/10, 2012 at 12:36 Comment(0)

P

2

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/

Pirogue answered 1/10, 2012 at 12:43 Comment(0)

M

1