
問題39:文字に影をつけてみよう
文字に影をつけてみましょう!
見本画像を参考にしてCSSに記述してください。
見本画像を参考にしてCSSに記述してください。
あらかじめエディタに書くコード
<p style="color:red;font-size:24px;font-weight:bold;">この文字にテキストシャドーをつけてみよう!</p>
¥HTML¥
期待する画面

解答ソースコード
<p style="color:red;font-size:24px;font-weight:bold;">この文字にテキストシャドーをつけてみよう!</p>
¥HTML¥
p {
text-shadow: 5px 5px 5px #000;
}
¥CSS¥
補足
text-shadowは見出しなど強調したい部分に使用すると効果的です。
ただ影をつけるだけではなく、影の距離感やぼかし具合、影の色まで細かく指定することができます。
また、text-shadowはカンマ「,」で区切ることでひとつの文字に対して複数の影を付けることもできます。
例えば、「text-shadow:2px 2px 0 #93f, 3px 3px 0 #00d」のように指定すると、2色の色が入り混じった立体的なデザインを作り上げることができます。
他にも少し窪んだような文字表現など、様々な表現ができるようになります。
色々試してみたい場合は「text-shadowジェネレーター」と検索すると便利なツールが出てくるので使ってみてください。
ただ影をつけるだけではなく、影の距離感やぼかし具合、影の色まで細かく指定することができます。
また、text-shadowはカンマ「,」で区切ることでひとつの文字に対して複数の影を付けることもできます。
例えば、「text-shadow:2px 2px 0 #93f, 3px 3px 0 #00d」のように指定すると、2色の色が入り混じった立体的なデザインを作り上げることができます。
他にも少し窪んだような文字表現など、様々な表現ができるようになります。
色々試してみたい場合は「text-shadowジェネレーター」と検索すると便利なツールが出てくるので使ってみてください。
完了にする!
活動記録をTweetする
1.HTMLの宣言をしてみよう
text-shadowというプロパティを付与します。
使用する際は以下のように記述します。
text-shadow:水平方向の距離, 垂直方向の距離, 影のぼかし半径, 影の色