CSS：text-shadowを使用し、文字に影や縁取りをする | raining

テクノロジーカテゴリーの変更を依頼記事元:

raining.bear-life.com

21 usersがブックマークコメント

記事へのコメント5件

注目コメント
新着コメント

bukumatouroku 背景とタイトル色のコントラストが悪く、文字色がはっきりしない時にすごく重宝しました！　ありがとうございました<(_ _)>

2019/06/19 リンク

bukumatouroku 背景とタイトル色のコントラストが悪く、文字色がはっきりしない時にすごく重宝しました！　ありがとうございました<(_ _)>

2019/06/19 リンク

takahiro_kihara 適当に真似したら影ついた。

2018/05/25 リンク

mtart 影

css
文字

2014/04/11 リンク

gachamania なるほどー　参考になりました！

2014/01/28 リンク

razokulover “text-shadow: 5px 5px 1px #999999;”

2013/12/30 リンク

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=http%3A%2F%2Fraining.bear-life.com%2Fcss%2Ftext-shadow%25E3%2582%2592%25E4%25BD%25BF%25E7%2594%25A8%25E3%2581%2597%25E3%2580%2581%25E6%2596%2587%25E5%25AD%2597%25E3%2581%25AB%25E5%25BD%25B1%25E3%2582%2584%25E7%25B8%2581%25E5%258F%2596%25E3%2582%258A%25E3%2582%2592%25E3%2581%2599%25E3%2582%258B" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="http://raining.bear-life.com/css/text-shadow%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%80%81%E6%96%87%E5%AD%97%E3%81%AB%E5%BD%B1%E3%82%84%E7%B8%81%E5%8F%96%E3%82%8A%E3%82%92%E3%81%99%E3%82%8B">CSS：text-shadowを使用し、文字に影や縁取りをする | raining</a><a href="https://b.hatena.ne.jp/entry/raining.bear-life.com/css/text-shadow%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%80%81%E6%96%87%E5%AD%97%E3%81%AB%E5%BD%B1%E3%82%84%E7%B8%81%E5%8F%96%E3%82%8A%E3%82%92%E3%81%99%E3%82%8B">はてなブックマーク - CSS：text-shadowを使用し、文字に影や縁取りをする | raining</a></div></iframe>

プレビュー

規約違反を報告

CSS：text-shadowを使用し、文字に影や縁取りをする | raining

CSS3のtext-shadowを使用すれば、画像で作ったように文字を装飾することができます。 text-shadowを使用... CSS3のtext-shadowを使用すれば、画像で作ったように文字を装飾することができます。 text-shadowを使用して、文字に影を付けたり、縁取り（アウトライン）をする方法をメモします。 text-shadowは文字に影を付けるプロパティです。 [text-shadow] text-shadow: 横方向縦方向ぼかし影の色; 使用例は下記のように指定します。 text-shadow: 5px 5px 1px #999999; 設定する値を複数指定したい場合は下記のように’,’区切りで指定します。 text-shadow: 5px 5px 1px #999999, -5px -5px 1px #999999; noneを指定した場合、影は付きません。 ■ 文字に影を付ける場合【CSS】 .test { color: #000; font-size: 50px; font-w