Chad Weider

While it’s best to avoid, sometimes it you must duplicate the appearance of UIToolbar items. Unfortunately, UIKit doesn’t appear to provide any means for achieving the etched look that it adds on each item it has control over so, for custom UIBarButtonItems you must do it manually.

In my case, I needed to present some information on the toolbar, but needed it to be non-interactive, have a special layout, and use some existing vector images. To that end, here are some category methods that made it straight forward: [https://gist.github.com/2465637](https://gist.github.com/2465637).

Given that, etching can be had with a few lines. It’s not efficient, but it is easy.

[[[[UIImage ct_imageWithPDFNamed:@"time" size:CGSizeMake(26, 26)]
  ct_imageWithOverlayColor:[UIColor colorWithRed:112/255. green:119/255. blue:123/255. alpha:1]]
  ct_imageWithInnerShadowOffset:CGSizeMake(0, 1) color:[UIColor colorWithWhite:0 alpha:.6]]
  ct_imageWithShadowOffset:CGSizeMake(0, 1) blur:0 color:[UIColor colorWithWhite:1 alpha:.6]]

Late last week a little app of mine made its way onto the App Store. So congratulations to me! but, uh, a minesweeper clone? that would *not* be very original. Nope, it’s not very original, but it is *better*.

It is my weak protest against the [garish](http://itunes.apple.com/us/app/minesweeper-*****/id407768156?mt=8) implementations that litter the App Store. It’s not something I’d plan to profit from (game development has always seemed to be an inevitably feral existence), but an argument for quality in the App Store, where barring a [few](http://carcassonneapp.com/) [exceptions](http://cocoastuff.com/products/deepgreen) it can seem like there is so little.

…It was also fun to do.

…How many times have I heard *that* said before?

While working on [this page](http://halfworking.com/mines), I discovered just how awful the web can look on the the the iPhone and iPad with their “retina” screens. In native applications, normal resolution images are scaled without anti-aliasing, but in Mobile Safari images are scaled _with_ anti-aliasing, and as a consequence, many important pixels can get badly blurred.

This isn’t an unrecognized problem and it has been solved [elsewhere](http://flowz.com/2010/07/css-image-replacement-for-iphone-4-high-dpi-retina-display/), but the accepted approach seems require JavaScript and class names, which strikes me as unnecessary – CSS declarations alone should suffice.

To that end, the approach I use is [this](https://gist.github.com/2394800):

@media only screen and -webkit-min-device-pixel-ratio:2 {
  img[src="images/icon.png"] {
    content: url("images/icon@2x.png");
  }
  img[src="images/store_small.png"] {
    content: url("images/store_small@2x.png");
  }
  img[src="images/screen_fail.png"] {
    content: url("images/screen_fail@2x.png");
  }
  img[src="images/screen_play.png"] {
    content: url("images/screen_play@2x.png");
  }
}

*I swear I read about content negotiation for this at some point, but all I can find is an old, unresolved [discussion](https://lists.webkit.org/pipermail/webkit-dev/2007-June/001923.html) at [webkit.org](http://webkit.org).