Practice with Text Shadows

Practice with Text Shadows

0 13635
Practice with Text Shadows

Text shadows – today we are going to investigate in depth the text-shadow css3 property. You probably know, that besides the text-shadow, there is another similar property – ‘box-shadow’. Both the properties are defined in two different modules, however, both properties identically. Thus, if you are already familiar with the box-shadow property, it will be easy for you to learn the ‘text-shadow’. Before all, in order to understand difference, we will read a bit of theory, browser support, and then we will start practicing.

Browser Support

Both properties (text-shadow and box-shadow) are supported by majority of modern browsers ( > Chrome 4.0, > Firefox 3.5, > Safari 4.0, > Opera 9.6, > IE10).

Difference between ‘text-shadow’ and ‘box-shadow’

text-shadow

Syntax of box-shadow is the following:

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

Syntax of text-shadow is the following:

text-shadow: h-shadow v-shadow blur color|none|initial|inherit;

Here are only few differences: first — you can not create an inner shadow for text, second – there is no spread distance for text-shadow. However, you still can create multiple shadows (displayed on top of each other).

Practice with ‘text-shadow’

color and offsets

In the following examples we define horizontal and vertical offsets with custom colors

color and offsets

text-shadow:10px 10px;
text-shadow:-5px -5px; color:blue;
text-shadow:-1px -1px white; color:blue; background:#888;
text-shadow:1px 1px rgba(255,255,255, 0.5); color:blue; background:#eee;

Note, that positive offset value moves the shadow to the right/bottom, negative value moves the shadow opposite – to the left/top

The shadow color is optional, if the color is missed, it is inherited from parent’s color. However, you should pay attention that it can acts differently in different browsers, so I recommend to define the color (rgb / rgba / hsla etc).

blur

In the following examples we define various blurring

blur

The blur is optional param, it defines distance of blurring. It should be a positive value (because 0 means – no blur). The following image explains how it works:

blur logic

element {
text-shadow:5px 5px 3px darkred; color:red;
}
element {
text-shadow:4px -4px 10px red; color:azure;  background:#333;
}
element {
text-shadow:0px 0px 4px ;
}
parent {
color:red;
}
element {
text-shadow:0px 0px 4px ;
}
parent {
color:lightgray; background:#333;
}

First two examples use different blur distance, for last two examples we didn’t set the color, but we applied different colors (and background color) for their parents.

Expansion and contraction

Similarly to ‘box-shadow’, the ‘spread’ property is going to be added in CSS4. Currently, it is known, that it is supported in IE10 (probably in more modern browsers). This is forth number parameter for ‘text-shadow’ property. You can use this param to expand or contract the shadow.

spread

text-shadow:5px 5px 0px 3px lightgreen; color:green;
text-shadow:8px 8px 2px -3px darkgreen; color:green; font-weight:900;
text-shadow:0 0 0 3px rgba(128, 255, 0, 0.75); color:green;  background:#333;

Positive value increases the shadow, negative – decreases. Zero value can be used to outline the text (third example).

Multiple shadow

As we explained before, you can apply multiple shadows to the text:

multiple shadows

Simple outlining (4.1):

text-shadow: 0 0 0 3px white, 0 0 0 4px gray; color:magenta; /* example 1: basic outlining */
text-shadow: 3px 3px 4px 2px rgba(255,255,255,0.35),   /* example 2 */
6px -6px 4px 2px rgba(255,255,255,0.25),  
-3px -3px 4px 6px rgba(255,0,255,0.15);
text-shadow: 0 0 0 3px white,   /* example 3: neon - 1 */
0 0 2px 6px magenta, 
0 0 1px 9px white, 
0 0 6px 12px magenta;
color:magenta;
text-shadow: 0 0 2px #fff,    /* example 4: neon 2 */
0 0 4px 2px rgba(255,255,255,0.5), 
0 0 6px 6px #f0f, 
0 0 4px 7px #fff, 
0 0 3px 15px #222, 
-4px 0 2px 9px #f0f, 
4px 0 2px 9px #f0f, 
0 -4px 2px 9px #f0f, 
0 4px 2px 9px #f0f;
color:white;
text-shadow: 0 -3px 3px 15px white, 0 1px 2px 9px; /* example 5: text underlining */
color:magenta;

Emulating expansion

expansion

It was already described (that ‘spread’ is supported only in CSS4), however you still can emulate it with CSS3:

text-shadow: 0px 0px 0px 4px magenta;
/* is similar to: */
text-shadow: magenta 0px 2px,  
magenta 2px 0px,  
magenta -2px 0px,  
magenta 0px -2px,  
magenta -1.4px -1.4px,  
magenta 1.4px 1.4px,  
magenta 1.4px -1.4px,  
magenta -1.4px 1.4px;

Additional examples

Here are other custom examples:

Twin shadow

twin shadow

text-shadow: 0 0 2px 2px white, 
2px 0 2px 5px #222, 
3px 0 3px 6px #933, 
5px 0 2px 14px #222, 
6px 0 5px 16px #533;
background-color:#222;
color:white;
‘Letter-press’

letter-press

text-shadow: 0px 2px 3px #555;
background-color:#333;
Rainbow

rainbow

text-shadow: 0 0 2px 3px yellow, 
0 0 2px 6px orange, 
0 0 2px 9px red, 
0 0 2px 12px lime, 
0 0 2px 15px blue, 
0 0 2px 18px violet;
3D

3d text

text-shadow: 0 0 1px #999, 
1px 1px 1px #888, 
2px 2px 1px #777, 
3px 3px 1px #666, 
4px 4px 1px #555, 
5px 5px 1px #444;
background-color:#333;
color:white;
Retro / Vintage effect

vintage

text-shadow: 2px 2px #fff, 
3px 3px #666;
First-letter-only shadow (pseudo-class ::first-letter)

First-letter-only

.text { 
text-shadow:0 0 5px; 
} 
.text::first-letter { 
color:azure; 
text-shadow:0 0 5px, 0 0px 6px 3px blue, 0 -2px 6px 6px cyan, 0 -4px 9px 9px lightblue ; 
}
Flame

flame

Please, consider unlocking the code of the last example using the form below:

SIMILAR ARTICLES

jQuery Mobile Lesson 6

0 55
jQuery Mobile Lesson 5

0 75

NO COMMENTS

Leave a Reply