Grow your CSS skills. Land your dream job.

Replacing letters with images.. looking for best current method.

  • # May 14, 2012 at 2:46 pm

    I have a client that wants some nice 3d letters as a page title banner for each page. The letters do need to be full color so a font really doesn’t work. I’m thinking of rendering out the letters as a sprite for the whole alphabet and maybe using php to figure out the letter value and shift the sprite image accordingly. I also though I might be reinventing the wheel here. I’m reading up on about a dozen techniques, I’m looking for recommendations.
    Thanks!

    # May 14, 2012 at 4:17 pm

    I think what I would do is use php to wrap each letter in a span tag with a class for each lower and upper case letter. And make a sprite for the alphabet like you said. Then the css would look like:


    h3 span { background-image: url(alphabet.png); }
    h3 span.a { background-position:0 0;}
    h3 span.b { background-position:0 20;}
    h3 span.etc {...}

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".