SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text-Shadow Great in Firefox, But Horrid Elsewhere

    I tried adding text-shadow to create a smooth font effect on some of my larger texts. It looks amazing in Firefox, but I just tested in Chrome, Safari and IE and it looks horrible.

    Here is what I have:

    text-shadow: 0px 0px 1px rgba(205,10,17,.8);

    Looks awesome in Firefox, but either doesn't exist or goes to **** in every other browser.

    Any suggestions on how to make the look Firefox is creating more cross-browser compatible?

    Cheers!
    Ryan
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,283
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    There's not much you can do about it as that's the way it has been implemented in those browsers. To my mind Chrome/safari (PC) look better than the Firefox version which looks slightly blurred and more like 2px than 1px. I expect there will be similar differences on the MAC system also as text always looks different there.

    IE9 has no support for text-shadow but will be available in IE10 (don't be tempted to use the IE filters as they do more harm than good).

  3. #3
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for response. Yeah, I read that IE10 will have text-shadow working, so figured none of that filter nonsense.

    The odd part is that Safari/Chrome look like there is no shadow at all. If I removed text-shadow entirely the text looks the same in Safari/Chrome. Like something is interfering with the attribute.

    I've attached two screenshots. One shows how the texts look in Firefox (smooth), and how they look in Chrome/Safari (not so smooth)

    It's odd to me

    Chrome: text-shadow-chrome.png

    Firefox: text-shadow-firefox.png

    Thanks
    Ryan
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,283
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by casbboy View Post
    Thanks for response.

    It's odd to me
    If I blow those screenshots up 800% I can see the shadow in Chrome but it is much fainter but definitely there. Maybe you could try a slightly darker shadow and see if it makes a difference. Is this a PC or mac screenshot?

    It may help if you post all the relevant css and html so we can replicate that effect exactly with colours and backgrounds etc.

  5. #5
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is on PC (windows 7).

    Here is the css that's applied to "a" link:

    font-size:16px; font-weight:normal; font-family: Arial, Helvetica, sans-serif; text-shadow: 0px 0px 1px rgba(205,10,17,.8); color:#CD0A11; text-decoration:none;

    Cheers!
    Ryan
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  6. #6
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, changing the text-shadow to 0px 0px 1px rgba(205,10,17,1) (so no transparency at all) made a huge difference. Definitely smoother now. But it does look a bit thick in Firefox now.
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,283
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Chrome is fainter but if you put the normal and shadow versions of chrome side by side you can clearly see the difference.
    gradient.gif

    The normal text in chrome renders slightly lighter than Firefox anyway so probably accounts for the difference.

    As a last resort you could hack it (but I seldom like to do this) and give webkit a 2px shadow.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .test {
    	font-size:16px;
    	font-weight:normal;
    	font-family: Arial, Helvetica, sans-serif;
    	text-shadow: 0px 0px 1px rgba(205,10,17,.8);
    	color:#CD0A11;
    	text-decoration:none;
    }
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    .test {
    	text-shadow: 0px 0px 2px rgba(205,10,17,.8);
    }
        
    }
    </style>
    </head>
    
    <body>
    <p class="test">Lorem ipsum dolor sit amet</p>
    </body>
    </html>
    But unfortunately that will hit safari as well which renders darker so its a losing battle. I think you'll just have to live with it.

  8. #8
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Going from .8 to 1 did make a heckuva difference, but let me give this a whirl! Thanks so much for you help, btw.

    Cheers!
    Ryan
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    The differences look more to me like the weights of the fonts than a problem with text-shadow itself.
    Firefox does render a heavier weight than others I've seen.

    You might also be able to increase legibility with this in webkit browsers.
    http://maxvoltar.com/archive/-webkit-font-smoothing

  10. #10
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I added webkit text stroke to make Chrome/Safari look cleaner and it worked. Though differently in both Chrome and Safari, both saw improvements in smoothness.

    -webkit-text-stroke:.2px #CD3421 !important;

    The color I chose was because the glow is typically on top of that green, so I saw what the #CD0A11 would become #CD3421 with 80% opacity on the green. So simulated the transparency effect a bit with the help of photoshop.

    It's still a bit short of Firefox's ability to render the font, but close enough.

    Cheers!
    Ryan
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,283
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Glad you managed to get something closer working


Bookmarks

Posting Permissions

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