1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

No More Ugly Header

Discussion in 'White Hat SEO' started by flexnds, Jan 12, 2012.

  1. flexnds

    flexnds Power Member

    Joined:
    Jan 4, 2010
    Messages:
    643
    Likes Received:
    681
    Occupation:
    Internet Marketing, Web development, Internet Repu
    Location:
    AZ
    Ok, I'm sure most of us know that your header is prime real estate for your main keyword, especially on an EMD.

    Typical problem, you make a nice header then lay text over it only to find out you can't find a good text color that will be readable. Then you figure out text shadow in css only to find out that IE does not support it, well, unless you wanna get technical with javascript and all sorts of other sh*t. Quick way to get text shadow working in FF, Chrome, and IE. Only tested in IE9 so far. If you get the chance to test in another version post here.

    I know there are literally hundreds of ways to add shadow, but this one it quite nice with just a few lines of css. Sample below:

    HTML:
    #header h1 {
    font-size: 50px;
    color:#fff;
    padding-top: 50px;
    padding-left: 50px;
    filter: glow(color=#333333,strength=3);
    text-shadow:
    		 1px -1px 5px rgba(0, 0, 0, 0.2),
    		-1px  1px 5px rgba(0, 0, 0, 0.2),
    		 1px  1px 5px rgba(0, 0, 0, 0.2),
    		-1px -1px 5px rgba(0, 0, 0, 0.2),
    		 0px  1px 5px rgba(0, 0, 0, 0.2),
    		 0px -1px 5px rgba(0, 0, 0, 0.2),
    		 1px  0px 5px rgba(0, 0, 0, 0.2),
    		-1px  0px 5px rgba(0, 0, 0, 0.2);
    }
     
  2. lelesius

    lelesius Newbie

    Joined:
    Jan 9, 2012
    Messages:
    1
    Likes Received:
    0
    Thanks bro, I`m going to try it.
     
  3. ShadeDream

    ShadeDream Elite Member

    Joined:
    Nov 27, 2008
    Messages:
    2,209
    Likes Received:
    5,237
    Location:
    He who laughs last, laughs longest.
    Welcome to CSS3. ;)

    I don't think this works with IE9? Does it? IE9 doesn't support text shadow?
     
  4. flexnds

    flexnds Power Member

    Joined:
    Jan 4, 2010
    Messages:
    643
    Likes Received:
    681
    Occupation:
    Internet Marketing, Web development, Internet Repu
    Location:
    AZ
    This part is for IE

    HTML:
    filter: glow(color=#333333,strength=3);
     
  5. khanna_rohit

    khanna_rohit BANNED BANNED

    Joined:
    Dec 15, 2011
    Messages:
    936
    Likes Received:
    69
    sounds great will try it
     
  6. ShadeDream

    ShadeDream Elite Member

    Joined:
    Nov 27, 2008
    Messages:
    2,209
    Likes Received:
    5,237
    Location:
    He who laughs last, laughs longest.
    I didn't see that. :eek:

    I wouldn't use this though, I'd rather make a banner and put it up as an image.
     
    Last edited: Jan 12, 2012
  7. mahaliking901

    mahaliking901 Newbie

    Joined:
    Dec 16, 2011
    Messages:
    28
    Likes Received:
    2
    great codes but most of now are using CMS website because it no need for coding
     
  8. flexnds

    flexnds Power Member

    Joined:
    Jan 4, 2010
    Messages:
    643
    Likes Received:
    681
    Occupation:
    Internet Marketing, Web development, Internet Repu
    Location:
    AZ
    Not really a relevant post.. Yes, most of us use Wordpress, no reason you can't throw this code in your style sheet. Whether you use CMS or not you can use this code.