CodeZine(コードジン)

特集ページ一覧

「ドロップシャドウ」
~マンガでプログラミング用語解説

マンガで分かるプログラミング用語辞典(90)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/12/22 14:00

解説

 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>
出力結果
出力結果
フィードバックお待ちしております!

 ご感想、解説して欲しい用語、解説内容のアドバイスなどございましたら、FacebookTwitterなどでお気軽に編集部までお寄せください。よろしくお願いいたします。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:マンガで分かるプログラミング用語辞典

もっと読む

著者プロフィール

  • 柳井 政和(ヤナイ マサカズ)

    クロノス・クラウン合同会社 代表社員 http://crocro.com/ オンラインソフトを多数公開。 プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。 「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5