I have come across a site that some how has anti-aliased text. if you goto <!-- m --><a class="postlink" href="http://www.sprintpcs.com/">http://www.sprintpcs.com/</a><!-- m --> and look down in the middle. The text "Start with plans & coverage" is in an <h2><span> tag. How do they do this?Originally posted by mikeyzc
I have come across a site that some how has anti-aliased text. if you goto <!-- m --><a class="postlink" href="http://www.sprintpcs.com/">http://www.sprintpcs.com/</a><!-- m --> and look down in the middle. The text "Start with plans & coverage" is in an <h2><span> tag. How do they do this? It is just a background image with the text hidden.
<!-- m --><a class="postlink" href="http://www.sprintpcs.com/hpAssets/i/h3-startWithPlansCoverage.gif">http://www.sprintpcs.com/hpAssets/i/h3- ... verage.gif</a><!-- m -->
#startWithPlansCoverage{ background: url(i/h3-startWithPlansCoverage.gif) no-repeat; height:15px; margin:0px 0px 4px 0px; padding:0px; }
#startWithPlansCoverage span{display:none;}
That way it is readable by screen readers and look great with css capable browsers and looks OK with browsers that can not import a css. Props for sprintpcs.com!that's pretty slickOriginally posted by mikeyzc
that's pretty slick Yes, yes it is.
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fir/">http://www.alistapart.com/articles/fir/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/dynatext/">http://www.alistapart.com/articles/dynatext/</a><!-- m -->
I have come across a site that some how has anti-aliased text. if you goto <!-- m --><a class="postlink" href="http://www.sprintpcs.com/">http://www.sprintpcs.com/</a><!-- m --> and look down in the middle. The text "Start with plans & coverage" is in an <h2><span> tag. How do they do this? It is just a background image with the text hidden.
<!-- m --><a class="postlink" href="http://www.sprintpcs.com/hpAssets/i/h3-startWithPlansCoverage.gif">http://www.sprintpcs.com/hpAssets/i/h3- ... verage.gif</a><!-- m -->
#startWithPlansCoverage{ background: url(i/h3-startWithPlansCoverage.gif) no-repeat; height:15px; margin:0px 0px 4px 0px; padding:0px; }
#startWithPlansCoverage span{display:none;}
That way it is readable by screen readers and look great with css capable browsers and looks OK with browsers that can not import a css. Props for sprintpcs.com!that's pretty slickOriginally posted by mikeyzc
that's pretty slick Yes, yes it is.
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fir/">http://www.alistapart.com/articles/fir/</a><!-- m --><!-- m --><a class="postlink" href="http://www.alistapart.com/articles/dynatext/">http://www.alistapart.com/articles/dynatext/</a><!-- m -->