Implementing glow tags?

[bluestarultor]

I was just futzing around on FF Wiki playing with CSS and was once more reminded of the ability to put a glow effect on text. I've had the idea bumping around for ages, but every time it came to mind, I never asked. Implementing the tags would be pretty easy and the best part is the text and glow colors can be entirely separate.

I have an example set up on FF Wiki using both our post background colors: http://finalfantasy.wikia.com/wiki/U...andbox#For_me:

The code is pretty simple. All you need for a proper glow on NPF is four passes with the same color. The code I used is here:

<span style="color:white; text-shadow: 0 0 0.2em #0080FF, 0 0 0.2em #0080FF, 0 0 0.2em #0080FF, 0 0 0.2em #0080FF">This is a glow test.</span>

In a more general sense, the needed code to implement it here would be:

<span style="text-shadow: 0 0 0.2em {color}, 0 0 0.2em {color}, 0 0 0.2em {color}, 0 0 0.2em {color}">[text goes here]</span>

I just thought I'd throw that out there.


As a warning, it doesn't work in Explorer. IE has some other, much more complex, means of getting the same effect. I assume it works in most other browsers, though, since they're more CSS-compliant.

[synkr0nized]

Do you know the CSS required for IE to render this as well? I truly hate providing formatting that is not visible regardless of browsers, so if we had both and could drop in CSS that will handle it correctly depending on the client's browser that would be better (in my opinion).

[bluestarultor]

Originally Posted by synkr0nized

Do you know the CSS required for IE to render this as well? I truly hate providing formatting that is not visible regardless of browsers, so if we had both and could drop in CSS that will handle it correctly depending on the client's browser that would be better (in my opinion).

I'll have to do some research. I know it's possible from my classes, but I don't know if I still have the code bumping around somewhere. I'll post an edit.

[synkr0nized]

I know I have come across some CSS in pages that would have a section like "/* LOL IE Fix */ <some non-standard CSS here>", but those are often hacks.

I wonder if we do have or could make a conditional in our stylesheet declarations that adds an additional CSS file if the browser is IE. Anything redeclared in this file would overwrite the styles in the default CSS (if I am remembering this correctly) but only for IE.

Of course, that's a lot of fussing for just glowing text and would best help if we had a few different style discrepancies.

[bluestarultor]

Well, I found the code. Only issue is that it's Microsoft-specific and Wikia doesn't seem to play nicely with it, so I can't get it to show there. I CAN get it to show just making an HTML page, though.

https://dl.dropbox.com/u/466762/glowtest.html

Hopefully Dropbox fares better in that department.

Edit: Mind you, I did it in two span tags just because that didn't break my Wikia code. What I used was:

<SPAN STYLE="color: white; filter:progid:DXImageTransform.Microsoft.Glow(Color=#0080FF, Strength=2.75); height=1px"><span style="color:white; text-shadow: 0 0 0.2em #0080FF, 0 0 0.2em #0080FF, 0 0 0.2em #0080FF, 0 0 0.2em #0080FF">This is a glow test.</span></span>

BTW: Having that height thing in there is very important. It won't work without it.



Edit: HOKAY, looks like I've got it figured out!

<span style="text-shadow: 0 0 0.2em {color}, 0 0 0.2em {color}, 0 0 0.2em {color}, 0 0 0.2em {color}; filter:progid:DXImageTransform.Microsoft.Glow(Color={color}, Strength=3); height=1px">{text}</span>

The above generalized code should work in all instances. Also, I tweaked it from the example shown to look a bit better in Explorer.


Edit: And I updated the example for good measure. Yes, the radius is bigger in Explorer, but that's because there's no way to layer IE glows. The last one just overrides all the others. It's therefore darker and needs the extra pixel of radius to be more visible. Standard is actually five. I'm being generous space-wise with three, since the IE glow is treated as a solid object around the letters. I haven't tested what it'll do in-line in IE, but the method all other browsers use works out just fine, since the glow is treated as a separate object underneath the text. I'll be playing with it more.

[rpgdemon]

While we're shooting for some nice 90s-esque look, can I suggest implementing blink, too? :P

In all seriousness, cool stuff.

[bluestarultor]

Originally Posted by rpgdemon

While we're shooting for some nice 90s-esque look, can I suggest implementing blink, too? :P

In all seriousness, cool stuff.

I'm sure there's a way to do it, but I personally dislike blinking text because it makes it more of a hassle to read.

Marquees are pretty annoying, too.

[rpgdemon]

Originally Posted by bluestarultor

I'm sure there's a way to do it, but I personally dislike blinking text because it makes it more of a hassle to read.

Marquees are pretty annoying, too.

That is the point.

They actually deimplemented the blink tag, because of how obnoxious it was.

[bluestarultor]

Just to reiterate in case my numerous edits were missed late last night, here's code that should work:

<span style="text-shadow: 0 0 0.2em {color}, 0 0 0.2em {color}, 0 0 0.2em {color}, 0 0 0.2em {color}; filter:progid:DXImageTransform.Microsoft.Glow(Color={color}, Strength=3); height=1px">{text}</span>

Whether implementing it is a good idea or not is up to you guys. Like I said, I just wanted to throw it out there.

Heck, while I'm at it, I could throw together buttons for that, [glitter], and anything else you might want. I've gotten pretty efficient at that. XD

[rpgdemon]

If you're gonna be making all these, PLEASE, write up one for blink. I don't care how you go about implementing it, I want me some blink.