Alfred’s CSS3 Notes – Text Properties

Text Shadow

text-shadow: 1px 1px 5px #BCBCBC, -1px -1px 3px #FF0000;

In this example, we have two shadows separated by commas. The first element is the horizontal offset, the second, the vertical offset; the third is the blur; and finally, the colour.

Text Stroke

Only available in Webkit. Draws a border around the text.

-webkit-text-stroke: 1px #000;

Also comes with text fill:

-webkit-text-fill-color: #fff;

This overrides the color attribute in Webkit.

RGBA Colour Opacity

Same as rgb() colour, but adds a fourth parameter for opacity. The opacity parameter is between 0 and 1, inclusive; where 0 is fully transparent, and 1 is fully opaque.

background-color: rgba(255,255,255, 0.5);

rgba() is available in all standards compliant browsers, and IE 9+. There is a workaround for dealing with the wrong-headed browsers:

color: #aaa;
color: rgba(200, 200, 200, 0.5);

As you can see we declare two values. In the case of standards compliant browsers, the rgba() declaration, which comes second, overwrites the first, and we get the benefit of the transparency. For the ludicrous browsers, the second declaration will be ignored, and they get the first declaration color.

We can also use a transparent png for backgrounds.

background: transparent url(bg.png);
background: rgba(255, 255, 255, 0.5);

This will not work with IE6, but anything after that will be OK. I encourage dropping support for IE6, to motivate individuals and corporations to upgrade, or better yet, switch to standards compliant browsers.

Leave a Reply

Your email address will not be published. Required fields are marked *