Search code examples
cocoacore-animationcalayer

How can I draw a bezel border or text using a CALayer?


I would like to have a 3d look, even if it is a light 3d look to some text and borders that I am doing with Core Animation.

Right now I am just creating a CALayer that has a corner radius, but I may eventually replace that with a bezier curve. But I have no idea how even begin with bezelled text. I can see some tutorials with illustrator or photoshop, so I think it is probably possible here — yet it is hard to find anything.


Solution

  • Use a shadow. Either a light text color and dark shadow color, or the other way around, plus a one-point offset (which direction should reflect which way you have the colors and which way you want the text to look) and no blur.

    CALayer has four properties you can use to set this up.

    Just make sure it's still readable, especially to users with low vision. Don't make the contrast too low, and don't cause the text to look blurry instead of raised or carved.

    And remember, in the Mac OS X interface, the light source is directly above, so shadows are cast straight down. For carved-in text, the shadow(ed side of the text) should be above the (light side of the) text; for raised text, it should be below.