text with sharp shadow around

Question

I want to achieve the text appearance like in the pictures below:

Now I'm working on shadow around the letters and I can't figure out how to do that.

What I've tried so far:
- The solution with:

label.shadowColor = [UIColor blackColor];
label.shadowOffset = CGSizeMake(1, 2);

gives a nice sharp shadow, but it doesn't fit my needs by two reasons:

1. It gives a shadow only from one side, set up by shadowOffset, whereas I need a "wrapping" shadow;
2. This solution doesn't give the soft part of the shadow (gradient) as there is in the pictures;

-The solution with:

label.layer.shadowOffset = CGSizeMake(0, 0);
label.layer.shadowRadius = 5.0;
label.layer.shouldRasterize = YES;
label.layer.shadowOpacity = 1;
label.layer.shadowColor = [UIColor blackColor].CGColor;
label.layer.masksToBounds = NO;

Works great, but it gives too soft shadow even though the shadowOpacity is set to 1 and the shadowColor is set to black:

Obviously it's not enough and I already think about drawing in labels' context. But it is not clear to me how would I achieve the goal even through context drawing.

Any idea would be much appreciated.

Answer 1

Try this Create a Custom UILabel SubClass and Override the following method

- (void)drawTextInRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);

    CGContextSetShadow(context, CGSizeMake(0.0, 0.0), 10);
    CGContextSetShadowWithColor(context, CGSizeMake(0.0, 0.0), 10, [UIColor blackColor].CGColor);

    [super drawTextInRect:rect];

    CGContextRestoreGState(context);
}

and this bottomColorLayer to the Label

CALayer *bottomColorLayer = [CALayer layer];
bottomColorLayer.frame = CGRectMake(0, labelRect.size.height/2, labelRect.size.width, labelRect.size.height/2);
bottomColorLayer.backgroundColor = [[UIColor colorWithWhite:0 alpha:.5] CGColor];
[label.layer insertSublayer:bottomColorLayer above:(CALayer *)label.layer];

or If you want Gradient

CAGradientLayer *bottomGradient = [CAGradientLayer layer];
bottomGradient.frame = CGRectMake(0, labelRect.size.height/2, labelRect.size.width, labelRect.size.height/2);
bottomGradient.cornerRadius = 0.0f;
bottomGradient.colors = @[(id)[[UIColor colorWithWhite:1 alpha:.5] CGColor], (id)[[UIColor colorWithWhite:0 alpha:.5] CGColor]];
[label.layer insertSublayer:bottomGradient above:(CALayer *)label.layer];

Answer 2

Use an explicit shadow path that's the shape you want. It sounds like you want a shadow the same shape as your text, but larger, with each shadow-letter centered on its corresponding letter. Once you have that, use the shadow radius to soften the edges of the shadow to whatever degree you want.

The code you have relies on the shadow radius alone to make the shadow larger than the text, which removes your ability to control the softness.

Answer 3

Try with the code below :-

  [_testLable setText:@"TION ERRO"];
    [_testLable setTextColor:[UIColor whiteColor]];

    [_testLable setFont:[UIFont boldSystemFontOfSize:22] ];
    _testLable.layer.shadowOffset = CGSizeMake(0, 0);
    _testLable.layer.shadowRadius = 10.0;
    _testLable.layer.shouldRasterize = YES;
    _testLable.layer.shadowOpacity = 1;
    _testLable.layer.shadowColor = [UIColor blackColor].CGColor;
    _testLable.layer.masksToBounds = NO;

    CGPathRef shadowPath = CGPathCreateWithRect(_testLable.bounds, NULL);
    _testLable.layer.shadowPath = shadowPath;
    CGPathRelease(shadowPath);

Its output is like this:-