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.

Daniel Ramirez-Escudero
  • 3,877
  • 13
  • 43
  • 80

3 Answers3

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

Nw167
  • 169
  • 5
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/

albertedevigo
  • 18,262
  • 6
  • 52
  • 58
1

Why not use CSS3's gradients?

Take a look at this fiddle.

You can generate your own gradients here or here.

Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239
  • 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? – Daniel Ramirez-Escudero Oct 01 '12 at 14:23
  • As you can see here: http://caniuse.com/css-gradients it's supported by most browsers, but not by IE9 or less. That's a shame. – Bram Vanroy Oct 01 '12 at 14:41