CSSで要素に影をつけるテクニックまとめ【重ねがけもできる】
cssで要素に影をつける方法は
- box-shadow
- filter:drop-shadow
- text-shadow
があります。
これらにはそれぞれ特徴があり、うまく使い分けることで表現に幅が出るので、ぜひ覚えておきましょう。
3つとも条件の指定方法は同じです。指定する順番は
{左右の向きpx 上下の向きpx ぼかし 色;}
です。
上下左右の向きは指定が必須ですが、その他の条件は省略可能です。
また、box-shadowは広がりと内側指定ができるので、
{左右の向きpx 上下の向きpx ぼかし 広がり 色 内側指定;}
となります。
box-shadow
box要素に影をつけます。
box-shadowの特徴は、「inset」で要素の内側に影をつけることができることと、影の広がりを指定できるところです。透過処理のしてある画像などはうまくいきません。
box-shadow: 0 0 5px 10px #333;
box-shadow: 4px 4px #333 inset;
filter:drop-shadow
透過処理してあるpng画像に影をつけることができます。しかしIEには対応していないので注意。
filter: drop-shadow(0 0 6px #dc143c);
text-shadow
テキストに影をつけます。
text-shadow: 2px 2px 2px #FFE600;
ぼかしのない影をつける
ぼかしのない影をつける場合は左右の向きと上下の向きの指定のみすればOKです。
box-shadow: 5px 5px;
影の色を変える
カラーコードを追記すればOK。
box-shadow: 5px 5px #ff6347;
影の位置を変える
マイナスの値にすれば影のかかる向きが変わります。
{
box-shadow: -6px -6px #e9967a;
background-color: #ffc0cb;
}
「,」で区切って記述すれば、1つの要素に複数指定することもできます。
例えばテキストのシャドウのかかりが弱い時。
p{
text-shadow: 0 0 4px #c71585,
0 0 4px #40e0d0,
0 0 4px #c71585;
}
内側と外側にかければ、このような装飾にもできます。
{
box-shadow: 4px 4px #e9967a inset,
4px 4px 8px 1px rgba(218,165, 32, 0.5)
}
よかったら参考にしてください。
関連記事
