How to use CSS3 text-shadow

How to use CSS3 text-shadow

How to use CSS3 text-shadow

One of the more interesting CSS3 elements is the text-shadow parameter. Text shadows can be used to add depth to text and provide a contrast between text and backgrounds of similar colours. Currently text and box shadows are supported by all modern browsers, with the exception of Internet Explorer 9.

To enable the text shadow effect you target elements in exactly the same way as if you were using other CSS properties.

text-shadow: (parameters)

The text shadow property has up to 4 parameters of which two are optional

text-shadow: y-offset x-offset blur-spread blur-colour;

The larger the offset values (which are┬ácompulsory) the further away the shadow is projected from the text. The larger the blur spread the larger and ‘thinner’ the shadow gets. To produce an effective text shadow a grey blur colour is usually adopted.

Shadows can be stacked by separating each shadow element with a coma. For example:

text-shadow: 1px 1px 1px #000, 3px 3px 5px blue;

Would produce this!

Below are some other examples using the CSS3 text-shadow property:

text-shadow: 0px 2px 3px #666;font-weight:bold;

Another example

text-shadow: 3px 3px 0 #ffd217, 6px 6px 0 #5ac7ff, 9px 9px 0 #ffd217, 12px 12px 0 #5ac7ff;font-size:50px;font-weight:bold;color:#FFF;

And another

text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);


Website Design Services

Copyright © 2004 - 2018 Designaweb (BSE) Ltd, All rights reserved