{"id":44,"date":"2010-05-05T22:32:43","date_gmt":"2010-05-06T06:32:43","guid":{"rendered":"http:\/\/bynomial.com\/blog\/?p=44"},"modified":"2010-05-05T22:32:43","modified_gmt":"2010-05-06T06:32:43","slug":"drop-shadows-on-text","status":"publish","type":"post","link":"http:\/\/bynomial.com\/blog\/?p=44","title":{"rendered":"Drop shadows on text"},"content":{"rendered":"

UILabel is built with a handy shadow feature, but it doesn’t always look the way you might want – in this post I’ll describe the<\/p>\n

ShadowedLabel<\/div><\/div>\n

subclass which draws nicer shadows. \u00c2\u00a0(Code links below.)<\/em><\/p>\n

Default UILabel shadows<\/h2>\n

This code:<\/p>\n

\"\"<\/p>\n

generates a shadow that looks like this:<\/p>\n

\"\"<\/p>\n

It’s not the end of the world, but it’s still kind of a butter shadow. \u00c2\u00a0I use these more for relatively subtle accents on labels in buttons. \u00c2\u00a0For example, you can improve the appearance of a label on a button by making the text look more embossed:<\/p>\n

\"\"<\/p>\n

I think the text on the left, with the shadow slightly above the text, makes it appear depressed into the surface, which is more visually appealing than the plain text on the right. \u00c2\u00a0Apple consistently works with their highlights and shadows in iPhone OS as if there is a global light source directly above the device, so users are likely to interpret shadows according to a straight-above light.<\/p>\n

ShadowedLabel<\/h2>\n

The<\/p>\n

ShadowedLabel<\/div><\/div>\n

is a drop-in replacement of<\/p>\n

UILabel<\/div><\/div>\n

(a subclass of it) which automatically draws dark, slightly-translucent, shadows beneath all text. \u00c2\u00a0This code:<\/p>\n

\"\"<\/p>\n

generates this:<\/p>\n

\"\"<\/p>\n

Much nicer!<\/p>\n

The color, position, and blur can all be adjusted. \u00c2\u00a0For example, you could use the same class, with slightly changed parameters, to get this result:<\/p>\n

\"\"<\/p>\n

ShadowedLabel<\/div><\/div>\n

works by overriding the<\/p>\n

drawTextInRect:<\/div><\/div>\n

method of<\/p>\n

UILabel<\/div><\/div>\n

, along with the<\/p>\n

CGContextSetShadowWithColor<\/div><\/div>\n

function. \u00c2\u00a0Say goodbye to butter shadows!<\/p>\n

Code and References<\/h2>\n

ShadowedLabel.h<\/a><\/p>\n

ShadowedLabel.m<\/a><\/p>\n

Related stackoverflow question<\/a><\/p>\n

Quartz 2D shadow reference<\/a><\/p>\n

UILabel drawTextInRect: reference<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

UILabel is built with a handy shadow feature, but it doesn’t always look the way you might want – in this post I’ll describe the ShadowedLabel subclass which draws nicer shadows. \u00c2\u00a0(Code links below.) Default UILabel shadows This code: generates a shadow that looks like this: It’s not the end of the world, but it’s […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[14,9],"tags":[50,51],"_links":{"self":[{"href":"http:\/\/bynomial.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/44"}],"collection":[{"href":"http:\/\/bynomial.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/bynomial.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/bynomial.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/bynomial.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=44"}],"version-history":[{"count":0,"href":"http:\/\/bynomial.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/44\/revisions"}],"wp:attachment":[{"href":"http:\/\/bynomial.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=44"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/bynomial.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=44"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/bynomial.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=44"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}