Re: Possible text-shadow enhancements

OK, try this (an image illustrating the points):

http://www.bradclicks.com/cssplay/text-shadows.png

In the first row, it is just a blur, with a kind of large offset.

In the second row, it is the exact same settings, but with a spread too. Note that this allows the shadow color to be darker, and the thin strokes not blown out (in the cursive, for example), because the blur is encroaching less.

In the third row, there is no spread, and I am trying to have enough shadow to show on all sides of the letters, but also to have some noticeable offset. But the more I offset, the more I have to blur to get it to extend to the other side of the letters, and the more I blur the more diffuse it gets, so it is a game of diminishing returns, and the shadow shapes become blurry clouds.

In the fourth row, I actually have less offset and less blur, but the effect is more like what I wanted, because of the spread. I could even go with a more transparent color (I didn't change the color or transparency in that example).

The last row is a bit more whimsical and over the top. But it shows6 shadow layers. The topmost is an inner shadow with 1px of blur and 1px of spread. Under that are layers of outer shadows with spread but no blur, with each lower shadow using more spread (yellow above the red above the white above the green. One more layer of green below that has the same spread as the previous one, but also has offset.


On Mar 1, 2011, at 7:59 PM, Brian Manthos wrote:

> Some example renderings with specific fonts -- especially serif vs. sans serif fonts -- would be great to help visualize.
> 
> -Brian
> 
> -----Original Message-----
> From: Brad Kemper [mailto:brad.kemper@gmail.com] 
> Sent: Tuesday, March 01, 2011 7:56 PM
> To: Simon Fraser
> Cc: Brian Manthos; Jordan OSETE; www-style@w3.org
> Subject: Re: Possible text-shadow enhancements
> 
> 
> On Mar 1, 2011, at 5:36 PM, Simon Fraser wrote:
> 
>>> http://dev.w3.org/csswg/css3-text/
>>> http://www.w3.org/TR/css3-text/#text-shadow
>>> 
>>> These two drafts agree: "<shadow> is the same as defined for the 'box-shadow' property except that the 'inset' keyword is not allowed."
>>> 
>>> Simon, are you suggesting that the current text-shadow spec should be reconsidered *or* that text-outline should stay alive because of the distinction? (Or both?)
>> 
>> I think spread is problematic (if convenient) in the context of box-shadow, and, although I see the benefit of keeping text-shadow and box-shadow similar, I question the utility of spread for text-shadow.
> 
> I would say that spread is considerably more important on text than on rects. Text is full of thin strokes of 1 or 2 pixels (until you get to larger font sizes). If you do a couple or more pixels of blur, you lose the shape. With spread, you can beef it up a little bit so that the letter is still letter shaped after the blur. You don't have to completely lose the shape in order to get the shadow to stick out far enough to be noticable.
> 
>> I also have no idea how to implement spread on non-rounded-rect shapes, and whether it's possible in a way that has the same behavior as box-shadow's spread in terms of corner rounding.
> 
> The way it is defined for box-shadow is pretty box-specific, in terms of defining "cheats" that work for those shapes. For other shapes, you would either have to do a true vector stroke (see how Adobe Illustrator does path stroking, for instance, with limits on how pointy a corner can get), or live with the rounding. I feel rounding of the corners of the text shadow is not that bad, if that is what is required to get spread. It is not that noticeable if the effect is being used to simulate a drop shadow. If you are using it to get a thick outline, then that doesn't work as well.
> 
>> So my preference would be to drop spread everywhere, but it's probably too late for that for box-shadow.
>> 
>> I don't like text-outline, because it's doing blurring but doesn't have 'shadow' in the name.
> 
> It doesn't do corners either. With text-shadow and spread, it isn't needed (especially if we can add a fill, the way Jordan suggested). With sharp corners, it would be even better to take over text-outline, but that's secondary in my view.
> 
>

Received on Wednesday, 2 March 2011 06:15:28 UTC