CSSで影を付ける text-shadow と box-shadow

CSSでボックスに影をつけることで、デザインに深みと立体感を加えることができます。ここでは、影の方向やぼかし具合、影の広がり方など、さまざまな設定を行う方法を紹介します。

最初に、ボックスの影を指定する box-shadow でいろいろな指定方法を、次にテキストの影を指定する text-shadow を紹介していきます。２つは似ていますが、少し指定方法が異なるので、順にみていきます。

ボックスに影を作る

ボックスに影を作るには、まず影の方向を指定してあげる必要があります。

影の方向は、左右の向きをX座標として、上下の指定をY座標として指定しています。同時に影の色も同時に指定します。

左右の座標と上下の座標は、並べて書く必要がありますが、色の指定はその前後どちらに書いても表示されます。ただし数値と数値の間に色を入れるとCSSが無効になってしまいます。

box-shadow: 10px 10px gray;
box-shadow: 0 10px gray;
box-shadow: -10px 10px gray;
box-shadow: -10px -10px gray;

次に、影にぼかしを追加してみましょう。

指定方法は、X座標、Y座標、ぼかしの度合いと数値を３つ並べて指定し、色はその前後に指定します。

座標２つを０にし、ぼかしの度合いのみを０以外の数値で表すと、ボックスが浮いたように見えます。

box-shadow: 10px 10px 10px gray;
box-shadow: 0 0 15px gray;

影の拡大と縮小も追加してみましょう。

指定方法は、X座標、Y座標、ぼかしの度合い、拡縮と４つ並べて指定し、色はその前後に指定します。

box-shadow: 10px 10px 10px 5px gray;
box-shadow: 10px 10px 10px -5px gray;

今まで影は外側に表示されましたが、内側に表示させることもできます。

内側に表示させるには、色と同じように数値の前後どちらかに指定します。

inset と色は、一緒に前に書いても、後ろに書いても構いません。また、前に inset 後ろに色といった具合に別々に書いても構いません。

box-shadow: inset 10px 10px 10px skyblue;
box-shadow: inset -10px -10px 10px skyblue;

これまでは１つの方向に対してのみ、影を指定してきましたが、カンマ（ , ）で区切ることで、複数指定することもできます。

box-shadow: 10px 10px 10px black, inset 10px 10px 10px skyblue;
box-shadow: inset 10px 10px 10px skyblue, inset -10px -10px 10px skyblue;
box-shadow: 10px 10px 10px black, -10px -10px 10px black;

テキストに影を作る

テキストにも影を付けることが出来ますが、ボックスの時と違って、こちらには拡縮と内側指定はありません

指定方法は、左右のX座標、上下のY座標、ぼかしの度合いを３つ並べて、色はその前後に指定します。

３つめの数値を省略すると、テキストをぼかし無しで表示します。

text-shadow: 10px 10px gray;
text-shadow: 10px 10px 3px gray;
text-shadow: 10px 10px 10px gray;

テキストの影の場合の重ね合わせも、( , )で区切って指定できます。

text-shadow: 10px 10px 10px gray, -10px -10px 10px skyblue;

まとめ

影をうまく使うことで、デザインに深みと立体感を加えることができます。ボックスに影をつけることで、要素が浮き上がって見える効果を得られます。

• 影の方向 (X, Y): 影の方向を指定します。X軸は左右の向き、Y軸は上下の向きを示します。
• 影のぼかし: 影のぼかし具合を指定します。ぼかしの値を大きくするほど、影が柔らかくなります。
• 影の広がり: 影の広がりを設定することで、影の範囲を調整できます。広がりの値を大きくすることで、影が広がります。

色や影の位置、大きさなどを変えてみて、デザインを作り上げてみましょう。