CSS3 の text-shadow を使って文字を強調したり装飾したり

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

久々に CSS3 についてのエントリーです.

以前書いた, 『CSS3 の display:box; を使ったフレキシブルな段組みレイアウト』 が大変好評だったので, CSS3 関連のエントリーもちょくちょく投稿していこうかなと思います.

今回は, text-shadow についてまとめました. text-shadow はその名の通りテキストに影をつけるプロパティです.

しかし, そんな単純なプロパティだったらわざわざエントリーにしません. text-shadow プロパティはオフセット値やぼかし具合が指定可能であることはよく知られています. が, なんとこれいくらでも指定できちゃうんです!! コンマ区切りで!

複数の text-shadow を指定することで文字をぼかしたり強調したり光らせたり燃やしたりといったさまざまな装飾が簡単に行えます.

そんな活用例をサンプルとしてまとめましたのでよかったら参考にしてください.

sample

View Demo Download

About

活用例をひと通り並べて見ました.

コードはダウンロードできるので色々とイジって遊んでみてください.

Tips

text-shadow の使い方

基本は下記のように指定します.

text-shadow: X値オフセット Y値オフセット ぼかし具合 影の色

例) 右に2px, 下に2px, 2px ほど緑色にぼかす.

text-shadow: 2px 2px 2px #0f0;

text-shadow 複数指定

コンマ区切りで複数指定することができ, 全ての影が重なって表示されます.

text-shadow:
    0 0 20px #fefc00,
    0 0 20px #fefc00,
    0 -10px 30px #fecc00,
    0 -10px 40px #feac00,
    0 -20px 50px #fe8c00,
    0 -40px 60px #ff4000,
    0 -40px 80px #ff0000;

Reference

参考にさせていただいたサイトです.

最近は gl.enchant.js にハマっていたので, HTML5 や CSS3 系の下書きエントリーが溜まっちゃって溜まっちゃって. ちゃんと消化していかないとなぁ.

それと, 『CSS3 の display:box; を使ったフレキシブルな段組みレイアウト』で 「サンプルはダウンロード出来ないんですか?」というメールを何件か頂いたのでダウンロードできるようボタンを追加しておきました. よかったらこちらの方も見てみてくださいな♪

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT