解説
CSS3の「text-shadow」「box-shadow」のように、描画する対象に影を落とす効果は多いです。このような、効果を、ドロップシャドウや、シャドウなどと呼びます。画像処理としては、比較的簡単なものです。自分で画像処理のプログラムを書く際も、簡単に実装できます。
このように、ずらして描画するというのは、単純ですが応用範囲が広いです。複数回影を落とすことで縁を作ったり、立体風にしたり、さまざまな応用ができます。シンプルですが、役に立つ描画方法です。
サンプル
text-shadowを利用して、さまざまな効果を体験するHTMLを書いてみます（※このソースコードはUTF-8形式で保存してください）。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>「ドロップシャドウ」のサンプル</title>
<style>
div {
font-size: 24px;
font-weight: bold;
font-family: Meiryo, sans-serif;
}
.s1 {
text-shadow: 2px 1px 3px #888;
}
.s2 {
color: #fff;
text-shadow: 1px 1px 0px #000,
0px 1px 0px #000,
-1px 1px 0px #000,
-1px 0px 0px #000,
-1px -1px 0px #000,
0px -1px 0px #000,
1px -1px 0px #000,
1px 0px 0px #000;
}
.s3 {
color: #aaa;
text-shadow: 1px 1px 0px #444,
0px 1px 0px #444,
-1px 1px 0px #ddd,
-1px 0px 0px #ddd,
-1px -1px 0px #ddd,
0px -1px 0px #ddd,
1px -1px 0px #ddd,
1px 0px 0px #444;
}
.s4 {
text-shadow: 1px 1px 0px #a0a0a0,
2px 2px 0px #a8a8a8,
3px 3px 0px #b0b0b0,
4px 4px 0px #b8b8b8,
5px 5px 0px #c0c0c0,
6px 6px 0px #c8c8c8,
7px 7px 0px #d0d0d0,
8px 8px 0px #d8d8d8,
9px 9px 0px #e0e0e0,
10px 10px 0px #e8e8e8;
}
</style>
</head>
<body>
<div class="s1">CodeZine</div>
<div class="s2">CodeZine</div>
<div class="s3">CodeZine</div>
<div class="s4">CodeZine</div>
</body>
</html>
