Text-Shadow Demo

by Johnny Lee

HTML

<p id="p2">(2) Oh I see!</p>
<p id="p3">(3) Oh I see!</p>
<p id="p4">(4) Oh I see!</p>
<p id="p5">(5) Oh I see!</p>
<p id="p6">(6) Oh I see!</p>
<p id="p7">(7) Oh I see!</p>
<p id="p8">(8) Oh I see!</p>
<p id="p9">(9) Oh I see!</p>
<p id="pa">(a) Oh I see! (IE10)</p>
<p id="pb">(b) Oh I see! (IE10)</p>
<p id="pc">(c) Oh I see! (IE10)</p>
<p id="pd">(d) Oh I see! (IE10)</p>
<p id="pe">(e) Oh I see! (IE10)</p>
<p id="pf">(f) Oh I see!</p>
<p id="pg">(g) Oh I see! (IE10)</p>
<p id="ph">(h) Oh I see!</p>

CSS

p
{
    font-family: 微軟正黑體, Arial;
    font-size: 3em;
    font-weight: bold;
}

#p2
{
    color: #a00;
    text-shadow: 3px 3px 1px #555; 
}
#p3
{
    color: #a00;
    text-shadow: -3px -3px 1px #555; 
}
#p4
{
    background-color: Black;
    color: #a00;
    text-shadow: -1px -1px 1px #fff;
}
#p5
{
    color: #a00;
    text-shadow: 2px 2px 1px rgba(20,20,20,0.5);
}
#p6
{
    color: Red;
    text-shadow: 4px 4px 3px DarkRed;

}
#p7
{
    background-color: Black;
    color: Yellow;
    text-shadow: -2px -4px 15px Red;

}
#p8
{
    color: Red;
    text-shadow: 0 0 6px Red;

}
#p9
{
    background-color: #333;
    color: White;
    text-shadow: 0 0 8px LightGray;

}
#pa
{
    color: #a00;
    text-shadow: 3px 3px 2px 5px #555; 
}
#pb
{
    color: #f0f;
    text-shadow: 0 0 3px 10px #a00
}#pc
{
    color: #f0f;
    text-shadow: 0 0 3px 5px Black,
0 0 3px 10px #a00;
}
#pd
{
    color: #f0f;
    text-shadow: 
        0 0 0 3px White,
        0 0 2px 6px #f0f,
0 0 1px 9px White,
0 0 3px 10px #f0f;
}
#pe
{
    color: #f0f;
    text-shadow: 0 0 2px 4px yellow,
             0 0 2px 8px orange,
             0 0 2px 12px red,
             0 0 2px 16px lime,
             0 0 2px 20px blue,
             0 0 2px 24px violet;
}
#pf
{
    background-color: Black;
    color: #eee;
    text-shadow: 
             0 1px 2px #999,
             1px 2px 2px #888,
             2px 3px 2px #777,
             3px 4px 2px #666,
             4px 5px 2px #555,
             5px 6px 2px #444;
}
#pg
{
    background-color: Black;
    color: #222;
    text-shadow: 
             0 0 2px #eee,
             0 0 4px 2px #fff,
             0 -2px 4px 2px #ff3,
             2px -4px 6px 4px #fd3,
             -2px -6px 11px 6px #f80,
             2px -8px 18px 8px #f20;
}
#ph
{
    background-color: Black;
    color: #222;
    text-shadow: 
             0 0 2px #eee,
             0 0 4px #fff,
             0 -2px 4px #ff3,
             2px -4px 6px #fd3,
             -2px -6px 11px #f80,
            ...