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を是非活用してみて下さい。

PR

Instagram Feed

Something is wrong.
Instagram token error.
Load More

Instagram

WEB DIRECTOR

m.k

2016年より株式会社AWESOMEにてWEB開発とコンテンツ制作を担当しております。SEO対策と記事執筆が得意分野です。

他の投稿を見る →