Implementing glow tags?

bluestarultor · 11-03-2010, 07:41 PM

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:

Code:

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

Code:

<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 · 11-03-2010, 08:04 PM

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 · 11-03-2010, 08:15 PM

Quote:

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 · 11-03-2010, 08:34 PM

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 · 11-03-2010, 08:48 PM

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:

Code:

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

Code:

<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 · 11-03-2010, 08:59 PM

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

In all seriousness, cool stuff.

Nikose Tyris · 11-05-2010, 12:01 AM

one sec, I've got the blink text down pat, I think.

Code:

<blink> </blink>

There, that should work.

/endarguement.

Edit:
Protip- Marquee is the same thing.

bluestarultor · 11-05-2010, 12:45 AM

Quote:

Originally Posted by Nikose Tyris

one sec, I've got the blink text down pat, I think.

Code:

<blink> </blink>

There, that should work.

/endarguement.

Edit:
Protip- Marquee is the same thing.

Marquee still works, but blink doesn't in IE, which is what the argument was over. I know from experience it takes Javascript to implement.

The issue is that Synk said it would be desirable if it worked across all browsers. Personally, I don't see why anyone still uses IE, since my experience with IE8 has been utter shit when I've been forced to use it, but if the demand is to support it on the forum, it'll take more work.

Edit: Apparently you can add the functionality to the tag itself in the CSS through a script as of IE5, unless it's been changed. On a break from homework ATM.

Flarecobra · 11-05-2010, 01:21 AM

Well, Firefox ain't the say-all for everyone. I've had some very bad exparances with FF, that I have not had with IE.

bluestarultor · 11-05-2010, 08:19 AM

Quote:

Originally Posted by Flarecobra

Well, Firefox ain't the say-all for everyone. I've had some very bad exparances with FF, that I have not had with IE.

That still leaves Opera, Chrome, and Safari.

In all seriousness, though, my main gripe with Explorer is as a developer due to its terrible CSS compliance. Microsoft sees fit to duplicate half of standard CSS in inane custom code. Heck, even basic things like margins vs. padding, which is used in literally every text element. It's fine to want to do your own thing, but that thing should at least be in addition to the standard, not to thumb your nose at it and make developers write two sets of code just to accommodate you at a basic level.

11-03-2010, 08:04 PM	#2
synkr0nized synk-ism Join Date: Nov 2003 Location: throughout the Wired Posts: 6,857	That won't be abused. :D 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). __________________ Find love.

11-03-2010, 08:34 PM	#4
synkr0nized synk-ism Join Date: Nov 2003 Location: throughout the Wired Posts: 6,857	or if there already is an IE stylesheet 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. __________________ Find love.*

11-03-2010, 08:59 PM	#6
rpgdemon Not a Taco Join Date: May 2005 Posts: 3,313	While we're shooting for some nice 90s-esque look, can I suggest implementing blink, too? :P In all seriousness, cool stuff. __________________ I did a lot of posting on here as a teenager, and I was pretty awful. Even after I learned, grew up, and came to be on the right side of a lot of important issues, I was still angry, abrasive, and generally increased the amount of hate in the world, in pretty unacceptable ways. On the off chance that someone is taking a trip down memory lane looking through those old threads, I wanted to devote my signature to say directly to you, I'm sorry. Thank you for letting me be better, NPF.

11-05-2010, 01:21 AM	#9
Flarecobra Burn. Join Date: Dec 2003 Location: Classified Posts: 11,017	Well, Firefox ain't the say-all for everyone. I've had some very bad exparances with FF, that I have not had with IE. __________________ "Only the fool wishes to go into battle to beat someone for the satisfaction of beating someone." -A Thousand Sons Rules. Read them, know them, love them.