ボタンのデザインなどするとき、少し浮き上がらせて文字を見せたい時などに便利なtext-shadow。
影をつけるためだけに使うのは勿体無い。
text-shadowには影を付ける以外にも様々な使い方ができるんです。
今回はtext-shadowの基本的な使い方からトリッキーな使い方までご紹介いたします。
目次
text-shadowとは
テキストに影をつけるためのCSSプロパティです。
影を単純につけるだけでなく、水平、平行方向の指定はもちろん、影のぼやけ方まで指定できます。
text-shadow:水平方向の距離 平行方向の距離 影のぼかし半径と指定します。
更に、影は１つだけでなく、カンマで区切ることで２つ指定することもできます。
アイデア次第でデザインの幅を広げることができるプロパティです。
text-shadowアイデア帳
ここでは実際のサンプルを元に解説していきます。
1.text-shadowなし
デフォルトではtext-shadowはnoneになっています。
そのため何も影などは付きません。
2.text-shadowあり
ここではとてもシンプルにtext-shadow:1px 1px 2px white;を指定しています。
私は黒に白の影を落とすのが好きです。
3.text-shadow ２色
先程説明下通り、text-shadowは２色指定することができます。
２色でなくても、同じ色を２箇所に配置するという使い方も良いかもしれませんね。
ここでは、分かりやすく、赤と青の２色をずらして配置してみました。
4.Text shadow hover
text-shadowの２色指定できるというのを利用し、hoverアニメーションにtext-shadowを応用します。
マウスホバーすると、左右にテキストが分身する可愛いアニメーション。
cssをちょっと書いてあげるだけで簡単に実現することができます。
p.shadow-hover{
transition:.5s;
&:hover{
text-shadow: 100px 0px 0px blue , -100px -0px 0px red;
}
}
たったこれだけのコードでこんな可愛いアニメーションが！
知っているとなんてことはないのですが、知らないとアッと驚くアニメーションです。
5.Text shadow glitchアニメーション
ネオン管のような、アンダーグラウンドな雰囲気をtext-shadowで再現します。
keyframeでブレを表現してあげるだけで、簡単にネオン管風のアニメーションを作ることができます。
更に作り込んで行けばglitch風のアニメーションにも作り変えていくことが出来ます。
アンダーグラウンドやサイケなデザインに合うのではないでしょうか。
text-shadowで遊んでみよう。
テキストに影を落とすだけではなく、様々な使い方できるtext-shadowを是非活用してみて下さい。
