/    Sign up×
Community /Pin to ProfileBookmark

Html CSS Styled Text Assistance

Copy linkTweet thisAlerts:
Mar 06.2014

Can anybody tell me what I did wrong here?

[code=html]
<head>
<style type=”text/css”>
.shadowed {
text-shadow: #ffff00 -2px 2px 5px;
}
</style>
</head>
<center><h1><p class=”shadowed”><font style=”color:#00cc00; filter:Glow(color=red,strength=20)”>Welcome Fellow Guardians!</font></p></h1></center>[/code]

The shadow and font color works but not the glow.
If I changed it to this the glow works but not the font color

[code=html]
<head>
<style type=”text/css”>
.shadowed {
text-shadow: #ffff00 -2px 2px 5px;
}
</style>
</head>
<center><h1><p class=”shadowed”><font style=”font-color:#00cc00; filter:Glow(color=red,strength=20)”>Welcome Fellow Guardians!</font></p></h1></center>
[/code]

to post a comment
HTML

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@Sup3rkirbyMar 06.2014 — There are a couple of things I feel I must point out here. Firstly, you're using some deprecated html tags, which you'll want to avoid if cross-browser support and web standards matter to you in this case. Both the <font> and <center> tags should be avoided and their purposes can be handled via CSS.

The second thing is the glow filter in general. It's an IE filter so you must realize anyone not using IE (most users) will never see it. And it became deprecated in IE9 for that matter so it's really not something that's recommended. At best it serves as a 'fallback' for CSS effects that aren't available in IE8 and lower. This filter also behaves differently between those different lower versions of IE so once more, it's probably something you should be avoiding altogether.

Apart from those two notes, you might end up with something like this:
[code=html]
<style type="text/css">
.center { text-align: center; }
.shadowed {
color: #0C0;
text-shadow: #FF0 -2px 2px 5px;
filter:progid:DXImageTransform.Microsoft.Glow(Color=#FF0000, Strength=20);
}
</style>
<h1 class="center"><p class="shadowed">Welcome Fellow Guardians!</p></h1>
[/code]
Copy linkTweet thisAlerts:
@KankuroauthorMar 06.2014 — There are a couple of things I feel I must point out here. Firstly, you're using some deprecated html tags, which you'll want to avoid if cross-browser support and web standards matter to you in this case. Both the <font> and <center> tags should be avoided and their purposes can be handled via CSS.

The second thing is the glow filter in general. It's an IE filter so you must realize anyone not using IE (most users) will never see it. And it became deprecated in IE9 for that matter so it's really not something that's recommended. At best it serves as a 'fallback' for CSS effects that aren't available in IE8 and lower. This filter also behaves differently between those different lower versions of IE so once more, it's probably something you should be avoiding altogether.

Apart from those two notes, you might end up with something like this:
[code=html]
<style type="text/css">
.center { text-align: center; }
.shadowed {
color: #0C0;
text-shadow: #FF0 -2px 2px 5px;
filter:progid:DXImageTransform.Microsoft.Glow(Color=#FF0000, Strength=20);
}
</style>
<h1 class="center"><p class="shadowed">Welcome Fellow Guardians!</p></h1>
[/code][/QUOTE]

Using the code you provided I ended up with the exact same out come.

Top is your code, bottom is mine. I still can't see the glow effect (Using Firefox)

[img]http://i.imgur.com/hiyq9m0.png[/img]
Copy linkTweet thisAlerts:
@Sup3rkirbyMar 06.2014 — I feel like perhaps you didn't read my post but instead just copied the code and tested it out.

Here's a useful link: http://www.browsersupport.net/CSS/filter%3Aprogid%3ADXImageTransform.Microsoft.Glow%28%29

You aren't going to see Microsoft's glow filter in Firefox. The standards in CSS replaced any possible need for it with the 'text-shadow' and 'box-shadow' properties, which Microsoft later adopted thus eliminating the support for glow in IE10 and 11.
Copy linkTweet thisAlerts:
@KankuroauthorMar 06.2014 — I feel like perhaps you didn't read my post but instead just copied the code and tested it out.

Here's a useful link: http://www.browsersupport.net/CSS/filter%3Aprogid%3ADXImageTransform.Microsoft.Glow%28%29

You aren't going to see Microsoft's glow filter in Firefox. The standards in CSS replaced any possible need for it with the 'text-shadow' and 'box-shadow' properties, which Microsoft later adopted thus eliminating the support for glow in IE10 and 11.[/QUOTE]

So it's impossible to add a glow effect while having a color text?

I had the glow effect before I added the color to the text, but lost it after.
Copy linkTweet thisAlerts:
@Sup3rkirbyMar 06.2014 — It's impossible to add the glow filter to any browsers other than IE, period. The glow filter only works in IE and both the [I]Glow[/I] and [I]Text-Shadow[/I] filters in IE do the same thing as '[B]box-shadow[/B]' and '[B]text-shadow[/B]' in the regular CSS standard.

I still don't think I understand why you are trying to use glow and text-shadow when they would be producing the same effect really.
Copy linkTweet thisAlerts:
@KankuroauthorMar 06.2014 — It's impossible to add the glow filter to any browsers other than IE, period. The glow filter only works in IE and both the [I]Glow[/I] and [I]Text-Shadow[/I] filters in IE do the same thing as '[B]box-shadow[/B]' and '[B]text-shadow[/B]' in the regular CSS standard.

I still don't think I understand why you are trying to use glow and text-shadow when they would be producing the same effect really.[/QUOTE]
I'm looking to give the text a black outline.
Copy linkTweet thisAlerts:
@Sup3rkirbyMar 06.2014 — If that's the case then you are looking for something more like this:
[code=html]
<style type="text/css">
.center { text-align: center; }
.shadowed {
font-family: sans-serif;
color: #0C0;
text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, -2px 2px 5px #FF0;
}
</style>
<h1 class="center"><p class="shadowed">Welcome Fellow Guardians!</p></h1>
[/code]

I'm not sure if you wanted the extra yellow glow on there or not, but it was in your original CSS so I left it on.

Unfortunately outlined text in CSS is a bit of a trick in which you set 4 text-shadows, each spanning 1 pixel in a different direction, giving an outlined effect. I should also note I added the 'font-family' because the outline effect didn't look too great (in my opinion) on a serif font.
Copy linkTweet thisAlerts:
@KankuroauthorMar 06.2014 — If that's the case then you are looking for something more like this:
[code=html]
<style type="text/css">
.center { text-align: center; }
.shadowed {
font-family: sans-serif;
color: #0C0;
text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, -2px 2px 5px #FF0;
}
</style>
<h1 class="center"><p class="shadowed">Welcome Fellow Guardians!</p></h1>
[/code]

I'm not sure if you wanted the extra yellow glow on there or not, but it was in your original CSS so I left it on.

Unfortunately outlined text in CSS is a bit of a trick in which you set 4 text-shadows, each spanning 1 pixel in a different direction, giving an outlined effect. I should also note I added the 'font-family' because the outline effect didn't look too great (in my opinion) on a serif font.[/QUOTE]

Perfect, thank you ?
×

Success!

Help @Kankuro spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.8,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...