CSSのtext-shadowを徹底解説

はじめに

今日はCSSのtext-shadow の使い方とtext-shadow を使うことによってどういったことができるのかを徹底的に解説します。

最初のところでは以外と忘れがちな文法の解説をし、その後に具体的なユースケースをあげて、どういったことができるのかをご紹介していきます！

text-shadowの使い方

まずはtext-shadowの文法とその使い方をご紹介します。

例

p {
    text-shadow: 1px 2px 3px #000000;
}

解説

最初の２つの値は<水平方向の距離> <垂直方向の距離>の値を入れます。今回の例の場合は、<水平方向の距離>が1px<垂直方向の距離>が2pxに設定されているので、下記の図のような状態になります。

３つ目の値には <影のぼかし半径> を、４つ目の値には<影の色>を指定します。

複数のtext-shadowをかける

CSS3では、１つのテキストに複数のtext-shadowをかけることができます。

例

p {
    text-shadow: 1px 1px 1px black, 2px 2px 2px blue;
}

このようにカンマで繋ぐことによっていくつもシャドウを追加していくことができます。

text-shadowの文法は以上です！
そんなに難しくはないですが、値がたくさんあるため少し忘れがちですね。

text-shadowで文字にボーダーをつける

それでは、次にtext-shadowのいくつかのユースケースを見ていきましょう。
まず、現在のCSSに「文字にボーダーをつけるため」のプロパティはありません。

ですが、文字に枠線をつけることでアイキャッチの文字を目立たせたりできるので実際には欲しい機能でしょう。

実は完璧ではありませんが、text-shadowで文字にボーダーをつける、ということができます。

text-shadowで文字にボーダーをつける

See the Pen CSSのtext-shadowを徹底解説 by Ayaka Sasaki (@ayausaspirit) on CodePen.

こちらは4つのtext-shadowを組み合わせて、「TEST」という文字の周りにボーダーをつけています。

コードはこのようなものです。

See the Pen CSSのtext-shadowを徹底解説1 by Ayaka Sasaki (@ayausaspirit) on CodePen.

大事なのはこちらの部分なので、こちらを解説していきます。

text-shadow:
3px 3px 0px black,
3px -3px 0px black,
-3px 3px 0px black,
-3px -3px 0px black;

このボーダーは４つのシャドウでできています。全て、ボーダーのようにくっきりとさせるため、ぼかしは0に設定しています。

このままだとどのシャドウがどのような役割を果たしているのかわかりにくいので、1つ1つ色を変えて見てみましょう。

最初のシャドウを赤にし、他のシャドウを一回消してみます。
※文字が白だと見えにくいので、グレーに変更します。

See the Pen CSSのtext-shadowを徹底解説2 by Ayaka Sasaki (@ayausaspirit) on CodePen.

最初のシャドウ (3px 3px 0px red,) はテキストの右下に付いています。

See the Pen CSSのtext-shadowを徹底解説3 by Ayaka Sasaki (@ayausaspirit) on CodePen.

次のシャドウ (3px -3px 0px blue) はテキストの右上につけ、右全体が覆われるようにしています。

あとはだいたい同じような要領ですが、

See the Pen CSSのtext-shadowを徹底解説4 by Ayaka Sasaki (@ayausaspirit) on CodePen.

次のシャドウ (-3px 3px 0px green) をテキストの左下につけています。

See the Pen CSSのtext-shadowを徹底解説5 by Ayaka Sasaki (@ayausaspirit) on CodePen.

これで最後の左上の穴を埋めて完了です！

お気づきかもしれませんが、こちらの手法は角などで少し荒く映ります。

このように完璧ではないです。

なので、大きいサイズの文字で、かつボーダーを1px程度に抑えられ、角の荒さがあまり目立たない時に使ってください。

text-shadowで文字にボーダーをつける1

小さい文字にボーダーを使いたい時はどうしたらいいの？という時ですが、こちらはぼかしをうまく使い、text-shadowを重ね合わせることである程度再現することができます。

See the Pen CSSのtext-shadowを徹底解説6 by Ayaka Sasaki (@ayausaspirit) on CodePen.

こちらはぼかしをかけているので、やはり少しぼやっとした印象にはなりますが、先ほどのものよりもくっきりしていないため粗が目立ちにくく、複数の色のボーダーをつけたいときなどに使えます。

コードとしては、先ほどご説明したボーダーの作り方にぼかしを1pxや2px程度加えて作っていきます。

See the Pen CSSのtext-shadowを徹底解説6 by Ayaka Sasaki (@ayausaspirit) on CodePen.

くっきりとシャドウを出していくために、なんどもなんども繰り返しシャドウをかけると綺麗に仕上がることが多いです。

複数の色のボーダーの例

See the Pen CSSのtext-shadowを徹底解説6 by Ayaka Sasaki (@ayausaspirit) on CodePen.

このようにぼかしが少ないものには白、ぼかしが多いものにはピンクと分けるとボーダーが２つついてるかのようなエフェクトを生み出すことができます。

コード

複数の色のボーダーの例のコードはこちらです。

See the Pen CSSのtext-shadowを徹底解説6 by Ayaka Sasaki (@ayausaspirit) on CodePen.

以上、テキストシャドウでボーダーを作るというユースケースでした。

text-shadowで文字にロングシャドウをつける

テキストシャドウのもう１つのユースケースはロングシャドウです。
例えばこのようなものが作れます。

See the Pen CSSのtext-shadowを徹底解説7 by Ayaka Sasaki (@ayausaspirit) on CodePen.

コード

See the Pen CSSのtext-shadowを徹底解説7 by Ayaka Sasaki (@ayausaspirit) on CodePen.

こちらもコードが長く、とても難しそうに見えますが、法則性を理解してしまえばとても簡単です。

<影のぼかし>は必ず0に設定します。また、<影の色>はお好きな色を設定していただければ良いので、重要なのは<水平方向の距離> <垂直方向の距離>、こちらの2つだけです。

まずは、 1px 0 から始めます。そのあとに0 1pxというように<水平方向の距離> <垂直方向の距離>をひっくり返します。

See the Pen CSSのtext-shadowを徹底解説8 by Ayaka Sasaki (@ayausaspirit) on CodePen.

ちょっとわかりにくいですが、これで右下にシャドウができます。

あとは、このシャドウを右下に伸ばしていきます。
右に伸ばすために、<水平方向の距離> に +1, 下に伸ばすために <垂直方向の距離> に +1します。

先ほど 1px 0 からはじめたので、両方の値に１をプラスし、2px 1pxにします。そのあとに先ほどと同じように<水平方向の距離> <垂直方向の距離>をひっくり返し1px 2pxにします。

See the Pen CSSのtext-shadowを徹底解説8 by Ayaka Sasaki (@ayausaspirit) on CodePen.

これで少しづつシャドウが見えてきました。
あとは好きな長さになるまでこのルールを繰り返すだけです！

振り返り

ロングシャドウを作るためのステップをまとめました。

おしゃれなtext-shadowの使い方4選

この解説の例のみだと少しシンプルすぎて実際の業務に使うイメージがわかないかもしれません。

そんな方のために、codepenから今日ご紹介した技術を使ったおしゃれな例をいくつかピックアップしました。

個人的に、Mandy Michaelさんの作品がとても面白いので、彼女の作品を中心にご紹介します。

彼女の作品をすごいところは文字を全て編集できることです。

See the Pen CSS only 3D paper fold text effect by Mandy Michael (@mandymichael) on CodePen.

これとか、画像だと思うじゃないですか？
ぜひ、皆さんもぜひこのサンプルをクリックして編集してみてください！

こちらの２つのサンプルは編集できますが日本語だとフォントの情報がないので、少し見た目は変わってしまいます。英語だと良い感じに編集できますね！

See the Pen Lines and layered css text effects by Mandy Michael (@mandymichael) on CodePen.

See the Pen Spotty layered CSS text effects by Mandy Michael (@mandymichael) on CodePen.

こちらだけは編集できないようですが、このテキストシャドウを使い方は非常に勉強になりますね。

See the Pen “Draw In” Text Effect with Decovar by Mandy Michael (@mandymichael) on CodePen.

まとめ

以上、今回はCSSのtext-shadow の使い方とtext-shadow を使うことによってどういったことができるのかを徹底的に解説しました。

CSSじゃできないよ、と諦めていたことも実際はCSSでできたりするので、今回の記事で少しでも皆さんが今まで画像で作っていたものがCSSでできるようになれば幸いです。