0

I am trying to recreate the font border I used in the middle section of my site ("Call today for your free estimate") in my Footer widget titles. I used a text-shadow but now it just looks funny. Is there any way I can make it look like the text I created in Photoshop?

http://www.mrsteamers.com/

WsMom
  • 51
  • 2
  • 8

1 Answers1

0

Try this: CSS Font Border?

It uses multiple shadows to make the shadow thicker.

Here's the code again

text-shadow: 1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000,
    0px 1px 0 #000,
    0px -1px 0 #000,
    -1px 0px 0 #000,
    1px 0px 0 #000,
    2px 2px 0 #000,
    -2px 2px 0 #000,
    2px -2px 0 #000,
    -2px -2px 0 #000,
    0px 2px 0 #000,
    0px -2px 0 #000,
    -2px 0px 0 #000,
    2px 0px 0 #000,
    1px 2px 0 #000,
    -1px 2px 0 #000,
    1px -2px 0 #000,
    -1px -2px 0 #000,
    2px 1px 0 #000,
    -2px 1px 0 #000,
    2px -1px 0 #000,
    -2px -1px 0 #000;
Community
  • 1
  • 1
  • When I use this code, it looks perfect on my laptop! But when looking on my desktop, the border doesnt look smooth. Maybe its just my computer? – WsMom Feb 11 '14 at 23:40
  • Which OS and browser are you using? Maybe the font is not optimized for web (might cause chunky edges). You can also play with the font rendering `-webkit-font-smoothing: antialiased;`and `-moz-osx-font-smoothing: grayscale;` –  Feb 11 '14 at 23:43
  • I am actually using Chrome on both computers. But, my desktop (the one where it looks wrong) is a PC and my laptop is a Mac. – WsMom Feb 12 '14 at 03:29
  • Then it's due to the font rendering. Read this article: http://blog.webink.com/why-fonts-suck-windows-hinting/. It might also be due to the pixel density. higher density = smoother fonts. On my MBP-Retina everything looks perfect while often it doesn't for customers or colleagues. So I always double check on other devices. –  Feb 12 '14 at 09:16