↑こうだったのが
↓こうなります！
どうも！LSSです！！
昨日、写真画像をCSSで「ちょっと変わった見せ方」をする方法を思いつき、記事にしていました。
昨日のコードを使用すると、
↑こんな感じに、枠部分が透けて見えつつ、盛り上がったような形状で表示させる事ができます。
が、実は試していた時点からちょっと気になっていた部分はありました。
枠線（border）にoutsetを指定した場合
borderのstyleにoutsetを指定した場合、盛り上がったように見えます…が、これは「上と左を明るく、下と右を暗く」表示させる事でそのように見えてるんですね。
それによって、画像右上の角と左下の角にエッジが立っているのが気に入りました（自画自賛系ｗ）
が、そうなると気になるのは…左上と右下！
２角だけエッジが立っていて、あと２角はのっぺりしてるんですね。
ただし、これはoutsetの仕様で、例えばシンプルに
<div style="border: 15px lightgreen outset;"> </div>
というコードだと
となり、やはり２角しかエッジが立ちません。
四辺の色を自分で指定してみました
なので、outsetには頼らずにsolidで、四辺の色を個別に設定すれば出来るんじゃないか？
と思いつき、やってみたのが↓こちら！
無事、四つの角にエッジが立ちました！
コード
<div style="
width: 300px; height: 225px;
background-size: 100% 100%;
background-origin: border-box;
border: 15px solid;
border-color: #d0d0d080 #60606080 #20202080 #b0b0b080;
border-radius: 10px;
background-image: url('画像ファイルのURL');"> </div>
オレンジ色の部分が四辺の色を指定している部分です。
このように border-color に色指定を4つ書くと、「上 右 下 左」の順に適用されます^^
※時計の12時方向から時計回りの順、ですね。
あとがき
今回のを思いついたのは、昨日の記事にいただいた
のコメントで、「影のバランスや色…CSSでも調整はできそう」と思ったところから、「あ！それだとエッジも四つの角に立たせる事もできるんじゃ！？」と思い至りました^^
421miyako様、いつもありがとうございます！
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
良いですね。画像加工ソフトでもこの機能はありますが、影のバランスとか色がちょっと変わってしまうとか調整が難しいです。