ボタンやイメージとして配置する画像にシャドウを入れる際は、box-shadowを指定すれば再現できますが、画像の内側にシャドウを入れて凹んだ感じにしたい場合、box-shadowプロパティの「inset」を指定してもシャドウは出来ません・・・。
実際には、画像の後ろ側にシャドウが回り込んでしまうため見えなくなってしまっています。
そこで、「inset」を使った違う方法で再現します。
それでは見ていきましょう。
HTMLを記述
サンプルとして、下のようなhtmlを用意しました。
1 2 3 4 5 6 7 8 |
<ul class="imgBox"> <li><img src="images/btn1.jpg" class="shadow-in"/></li> <li><img src="images/btn2.jpg" class="shadow-in"/></li> <li><img src="images/btn3.jpg" class="shadow-in"/></li> <li><img src="images/btn4.jpg" class="shadow-in"/></li> <li><img src="images/btn5.jpg" class="shadow-in"/></li> <li><img src="images/btn6.jpg" class="shadow-in"/></li> </ul> |
「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);」を指定し、シャドウだけの要素を追加することで、画像に対してシャドウがのっているような表現になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.imgBox li{ position:relative; display:inline-block; line-height:0; overflow:hidden; border-radius:5px; } .imgBox li::after { content:""; position:absolute; top:0; right:0; bottom:0; left:0; box-shadow:inset 0 1px 5px rgba(0,0,0,0.5); border-radius:5px; } |
これでOKです。
このように、内側にシャドウが入っているのが確認できると思います。ぜひ一度お試しください。