ボタンや画像の内側にシャドウを入れる方法

ボタンや画像の内側にシャドウを入れる方法

ボタンやイメージとして配置する画像にシャドウを入れる際は、box-shadowを指定すれば再現できますが、画像の内側にシャドウを入れて凹んだ感じにしたい場合、box-shadowプロパティの「inset」を指定してもシャドウは出来ません・・・。

image-sample

実際には、画像の後ろ側にシャドウが回り込んでしまうため見えなくなってしまっています

後ろに回り込んでしまうサンプル

そこで、「inset」を使った違う方法で再現します。

デモサンプル

それでは見ていきましょう。




HTMLを記述

サンプルとして、下のようなhtmlを用意しました。

「btn1.jpg」「btn2.jpg」「btn3.jpg」「btn4.jpg」「btn5.jpg」「btn6.jpg」の6つのボタン画像をliタグで配置しています。

CSSを記述

liタグに対して、「position:relative」「display:inline-block」を指定しています。そして、li::after擬似要素として「position:absolute」「top:0; right:0; bottom:0; left:0;」「content””;」「box-shadow:inset 01px 5px rgba(0,0,0,0.5);」を指定し、シャドウだけの要素を追加することで、画像に対してシャドウがのっているような表現になります。

これでOKです。

image-sample2

DEMO

このように、内側にシャドウが入っているのが確認できると思います。ぜひ一度お試しください。

 

 

タイトルとURLをコピーしました