ローディング中

text-shadowの使い方

ボタンのデザインなどするとき、少し浮き上がらせて文字を見せたい時などに便利なtext-shadow。
影をつけるためだけに使うのは勿体無い。

text-shadowには影を付ける以外にも様々な使い方ができるんです。
今回はtext-shadowの基本的な使い方からトリッキーな使い方までご紹介いたします。

目次

text-shadowとは

テキストに影をつけるためのCSSプロパティです。
影を単純につけるだけでなく、水平、平行方向の指定はもちろん、影のぼやけ方まで指定できます。

text-shadow:水平方向の距離 平行方向の距離 影のぼかし半径と指定します。
更に、影は1つだけでなく、カンマで区切ることで2つ指定することもできます。

アイデア次第でデザインの幅を広げることができるプロパティです。

text-shadowアイデア帳

ここでは実際のサンプルを元に解説していきます。

1.text-shadowなし

デフォルトではtext-shadowはnoneになっています。
そのため何も影などは付きません。

2.text-shadowあり

ここではとてもシンプルにtext-shadow:1px 1px 2px white;を指定しています。
私は黒に白の影を落とすのが好きです。

3.text-shadow 2色

先程説明下通り、text-shadowは2色指定することができます。
2色でなくても、同じ色を2箇所に配置するという使い方も良いかもしれませんね。
ここでは、分かりやすく、赤と青の2色をずらして配置してみました。

4.Text shadow hover

text-shadowの2色指定できるというのを利用し、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を是非活用してみて下さい。

ホームページ・デザイン制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.