Text Shadows

Elements can be given a text shadow by applying the .textshadow CSS class to an element. The default behavior will assume a white background and generate a 10% darker shadow.

Nested rules are available for use with existing UNM color CSS rules to create text shadows on colored background. The use of a CSS text shadow can only be used on solid background as opacity is not supported.

Text shadows only have 200px length. Ideally they should only be used in containers that will allow the text-shadow to stop at the edge of the container. Such containers should have overflow set to hidden.

Please note that using a boxshadow on an element that contains a textshadow can be problematic if more complex nesting is not used.

CSS Code

This CSS rule is included automatically in the default UNM template.

.textshadow {
   text-shadow: 
       	#E6E6E6 1px 1px, 
   	#E6E6E6 2px 2px, 
   	#E6E6E6 3px 3px, 
   	...
   	#E6E6E6 200px 200px;
}    

*the text shadow is created by layering 1px shadows over a distance of 200px. The color used for the shadow should a darkend variaion of the background color used in the same content area.

Examples

<div class="unm-teal callout">
    <h3 class="textshadow">UNM Teal</h3>
    <p>text shadow example</p>
</div>

*this example makes use of a CSS class .callout which adds additional styles to the examples below. The "unm-color" values can be modified to generate any of the following examples.