Making it easier to generate single retina-pixel (hairline) images

Screen Shot 2014-03-09 at 8.01.19 PMtldr; you can create razor-thin lines for retina displays using CSS, but it takes some hackery. retinahairlinegenerator.com is a site I built for quickly selecting a color and getting the CSS code for a retina hairline.

Last year Thomas Fuchs published a detailed look at how to create a web app that looks like a native iOS7 app. He revealed a great trick for creating single-retina-pixel “hairline” images. These razor-thin lines can be used as section dividers, to underline headings, to draw boxes, and much more.

The approach is beautiful in its simplicity: 1px in CSS represents two retina (real) pixels, therefore we can create an image in PhotoShop that is 2 x 1 pixels. We make one of those pixels transparent, and set the other to the color we need for our hairline. Once we’ve got our image, we can save it as a PNG, and then inline it as a base64-encoded image in our CSS.

This works great, and the code to generate the above is easy for a one-off.

But if you get feedback and need to change the shade or color of the line, you have to redo all that work from the start again: fire up PhotoShop, edit that image, save it out again, fire up ruby (or get hold of another programmer’s tool) and re-base64-encode the image. Finally, paste in the base64 data into the exact background CSS properties, (and don’t forget the data URI prefix).

Wouldn’t it be better if you could use a color visually and interactively, see how it looks on screen, and copy the final CSS in one click? That’s why I built retinahairlinegenerator.com, to help you quickly generate and regenerate a retina hairline for your mobile sites, emails or retina MacBooks. Enjoy!

UPDATE 3/16/2014: @smfr reports that WebKit nightlies can now do hairline borders directly in CSS! Use border-width: 0.5px for a retina-sharp pixel.

If you have other awesome retina CSS hacks, please share them in the comments below.

Advertisements
This entry was posted in CSS, Tools. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s