www.webdeveloper.com
Results 1 to 9 of 9

Thread: Html CSS Styled Text Assistance

Hybrid View

  1. #1
    Join Date
    Feb 2014
    Posts
    21

    Html CSS Styled Text Assistance

    Can anybody tell me what I did wrong here?

    HTML Code:
    <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>
    The shadow and font color works but not the glow.
    If I changed it to this the glow works but not the font color
    HTML Code:
    <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>

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    986
    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:
    HTML Code:
    <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>
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Feb 2014
    Posts
    21
    Quote Originally Posted by Sup3rkirby View Post
    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:
    HTML Code:
    <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>
    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)
    http://i.imgur.com/hiyq9m0.png

  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    986
    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/fi...oft.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.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  5. #5
    Join Date
    Feb 2014
    Posts
    21
    Quote Originally Posted by Sup3rkirby View Post
    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/fi...oft.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.
    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.

  6. #6
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    986
    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 Glow and Text-Shadow filters in IE do the same thing as 'box-shadow' and 'text-shadow' 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.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  7. #7
    Join Date
    Feb 2014
    Posts
    21
    Quote Originally Posted by Sup3rkirby View Post
    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 Glow and Text-Shadow filters in IE do the same thing as 'box-shadow' and 'text-shadow' 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.
    I'm looking to give the text a black outline.

  8. #8
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    986
    If that's the case then you are looking for something more like this:
    HTML Code:
    <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>
    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.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  9. #9
    Join Date
    Feb 2014
    Posts
    21
    Quote Originally Posted by Sup3rkirby View Post
    If that's the case then you are looking for something more like this:
    HTML Code:
    <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>
    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.
    Perfect, thank you

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles