CSS3 の text-shadow を使って文字を強調したり装飾したり
久々に CSS3 についてのエントリーです.
以前書いた, 『CSS3 の display:box; を使ったフレキシブルな段組みレイアウト』 が大変好評だったので, CSS3 関連のエントリーもちょくちょく投稿していこうかなと思います.
今回は, text-shadow についてまとめました. text-shadow はその名の通りテキストに影をつけるプロパティです.
しかし, そんな単純なプロパティだったらわざわざエントリーにしません. text-shadow プロパティはオフセット値やぼかし具合が指定可能であることはよく知られています. が, なんとこれいくらでも指定できちゃうんです!! コンマ区切りで!
複数の text-shadow を指定することで文字をぼかしたり強調したり光らせたり燃やしたりといったさまざまな装飾が簡単に行えます.
そんな活用例をサンプルとしてまとめましたのでよかったら参考にしてください.
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; を使ったフレキシブルな段組みレイアウト』で 「サンプルはダウンロード出来ないんですか?」というメールを何件か頂いたのでダウンロードできるようボタンを追加しておきました. よかったらこちらの方も見てみてくださいな♪
画像を使ってちまちまと作る時代はお~わり♪♪
css3 でじゃんじゃんサイトを着飾りましょう.
『CSS3 の text-shadow を使って文字を強調したり装飾したり』
http://t.co/24d28x0l
https://t.co/YPV1sEaT
#web #css3
[…] CSS3 の text-shadow を使って文字を強調したり装飾したり […]
昔のエントリーだけど見出し装飾関連なので改めて紹介
[css][css] / “CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life” http://t.co/3Sq8W6ru
[css][css3][装飾]昔のエントリーだけど見出し装飾関連なので改めて紹介 / “CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life” http://t.co/3Sq8W6ru
CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life 久々に CSS3 についてのエントリーです. 以前書いた, 『CSS3 の display:box; を使ったフレキシブルな段組みレイ… http://t.co/fh0ohgyn
CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life: 久々に CSS3 についてのエントリーです. 以前書いた, 『CSS3 の display:box; を使ったフレキシブルな段組… http://t.co/iWzyEyZj
CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life: 久々に CSS3 についてのエントリーです. 以前書いた, 『CSS3 の display:box; を使ったフレキシブルな段組… http://t.co/lASK6aej
CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life http://t.co/V6kela7t #web #html5jp
CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life http://t.co/nYWp2ekU
“CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life” http://t.co/I0DXMvj0
CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life http://t.co/HiiyzAc1
[css][css3][装飾]昔のエントリーだけど見出し装飾関連なので改めて紹介 / “CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life” http://t.co/3Sq8W6ru
CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life
http://t.co/zDgpNjWg
【はてブ新着IT】 CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life http://t.co/wqNdbWEN
CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life http://t.co/nAjQ9k1C
CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life http://t.co/Gnp9CjeH #css #web
#css #css3 RT @tmlife_jp: [css][css3][装飾]昔のエントリーだけど見出し装飾関連なので改めて紹介 / “CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life” http://t.co/B9E84twt
CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life: 7 users http://t.co/FUoE7T4b
“CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life” http://t.co/laOurhC9
“CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life” http://t.co/XG5eaDLO
CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life http://t.co/LAEvSUqe
CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life http://t.co/F6jlOPxx
CSS3 の text-shadow を使って文字を強調したり装飾したり http://t.co/y2Sw5a0Y @phi_jpさんから
PS等使わなくても良くなってる。圧縮すれば良さげ? “ikeay: CSS3 の text-shadow を使って文字を強調したり装飾したり http://t.co/IxhDikYb phi_jpさんから”
CSS3 の text-shadow を使って文字を強調したり装飾したり http://t.co/dQWul0nK @phi_jpさんから
[*css][CSS3][*tips] / “CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life” http://t.co/tl5gKE3d
[…] CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life http://tmlife.net/web/css3/css3-text-shadow-emphasis-decoration.html […]