Tag: <span>pixel</span>

Pixel Precision with Diagnostic CSS

Pixel Precision with Diagnostic CSS

Here’s a little CSS trick I started using a while ago that has really helped me to achieve pixel precision when converting Photoshop PSD (or Fireworks PNG or whatever) design comps into (X)HTML and CSS web standards goodness. The idea is to take the page that you’re developing in HTML and CSS and overlay it on top of the design mockup you’re working from. And you can do this inside of any browser. The idea borrows upon the spirit of “Diagnostic Styling” evangelized by Eric Meyer by using a few extra classes. First I take the design file and save it (save for web) as a flat PNG-32 into a directory that’s easily accessed by the css file I’m developing.  Then I open the HTML…