4

Possible Duplicate:
Glowing Text (HTML CSS)

So I'm looking for a 100% css solution for a text glow effect. I tried text-shadow but I couldn't get it looking how I wanted. I was able to achieve the effect with box-shadow. However, that only glows around the outside of the elements edges, and leaves the inside blank. Here is a picture:

enter image description here

How do I get a nice looking outer glow like above, without the blank inside?

my code is just a simple <li><a></a></li> , with hover css on both the li, and a tags.

Thanks in advance.

Community
  • 1
  • 1
Brian Peters
  • 297
  • 1
  • 3
  • 17

3 Answers3

16
a:hover { text-shadow: 0 0 5px #ff0000; }
Kevin Boucher
  • 16,426
  • 3
  • 48
  • 55
  • If you read above, I state that text-shadow is not the effect i'm looking for. Unless it is able to be as large as what my picture shows.. – Brian Peters Oct 11 '12 at 17:38
  • Well, your image wasn't there when I posted this answer, but if you research text-shadow you will quickly learn that you can play with the size, blur and color to achieve the effect you are looking for. – Kevin Boucher Oct 11 '12 at 17:40
  • Thanks, honestly that wasn't working too well before. I finally figured it out though. I just applied the shadow 3 times at 15px; Thanks again. – Brian Peters Oct 11 '12 at 18:08
2

what about a text-shadow on hover

like this 

<li>
  <a></a>
</li>

css

li a:hover {
  text-shadow: 2px 2px 10px #000000;

  filter: dropshadow(color=#000000, offx=2, offy=2);
}

FIDDLE HERE

Generate your css 3 properties HERE

Simon Dragsbæk
  • 2,367
  • 3
  • 30
  • 53
  • The community dont just give you have to work some self what about going to the generator i made and make your glow like you want it and then add it with in the css i posted – Simon Dragsbæk Oct 11 '12 at 18:19
0

You can do this with an extra element

jsfiddle example (or fullscreen)

HTML

<ul id="nav">
    <li><span></span><a href="#">Home</a></li>
    <li><span></span><a href="#">Products</a></li>
    <li><span></span><a href="#">Really Long Nav Item</a></li>
</ul>

CSS

#nav {background-color:#000;overflow:hidden;}
#nav li {float:left;position:relative;}
#nav a {display:block;background:transparent;color:#fff;font-weight:bold;text-decoration:none;padding:20px;position:relative;}

#nav li:hover span {
    position:absolute;
    left:50%;top:50%;
    margin-left:-35%;
    width:70%;height:0px;
    box-shadow:0 0 20px 12px rgba(150, 180, 200, .6);
    border-radius:10px 6px;
}

Potentially you could skip the extra <span> element and do this with the :before pseudo-element on the anchor or list item ​

MikeM
  • 27,227
  • 4
  • 64
  • 80