Tweet

Pocket

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

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

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

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

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

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

View Demo Download

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

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

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;

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

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