CSSのborder（枠線）を使って、写真画像を盛り上げたように見せる方法を考えました。
↑の写真が
↓こうなります。
どうも！LSSです！！
ちょっと思いついた事があって試してみたところ、うまく出来ました^^
コード
<div style="
width: 300px; height: 225px;
background-size: 100% 100%;
background-origin: border-box;
border: 15px #80808080 outset;
border-radius: 10px;
background-image: url('画像ファイルのURL');
"> </div>
上記コードをコピペして、画像ファイルのURLの部分を表示したい画像ファイルのURLに書き換えます。
また２行目の
width: 300px; height: 225px;
の300pxを表示したいサイズの横幅、225pxを表示したいサイズの高さに変更できます。（縦横の比率が元の画像とあってないと間延びした画像になっちゃったりします^^;）
なお、はてなブログの場合、HTML編集画面に貼り付ける事になりますが、コピペしてプレビューした後にコード中の改行が削除されたり、 が赤い点に変更されたりしますが、そこは動作に支障ないので気にしなくてOKです。
コード解説
style=" "の中身がCSSのコードですが、やってる事は
- 表示したいサイズを指定する
- 背景画像サイズを↑で指定したサイズの枠いっぱいに拡大縮小する
- 背景画像の表示位置をborder-box（枠線を含めたサイズ）とする（重要）
- border（枠線）を半透過した灰色で表示する（重要）
- 角をちょっと丸くする
といった感じです。
ひとつづつ見ていきます。
width: 300px; height: 225px;
div要素のサイズを指定しています。
自由に指定サイズを変更できますが、ここで指定した縦横の比率に従って画像が表示されるので、元の画像の縦横比にあうように指定したほうが良いですね。
background-size: 100% 100%;
背景画像のサイズを縦横どちらも100%、つまりめいっぱいのサイズで表示させる指定です。
background-origin: border-box;
背景画像の表示位置を、border-boxに指定しています。
background-originの既定値はpadding-boxですが、それだと枠線の部分に画像がかからないので、border-boxを指定する必要があります。
border: 15px #80808080 outset;
枠線を指定している部分です。
15pxが太さ（自由に変更できます！）。
#80808080が色、この#＋8桁で指定すると、#+6桁の表示色と最後の２桁で不透過度を指定した事になります。
この場合、#808080の色（灰色）を80の不透過度（半分ぐらい透過）で表示する、という指定になります。
outsetが枠線の表示スタイルを「盛り上がったように見せる」という指定です。
（例えばここを inset に変更すると、くぼんだような表示になります。）
半透過で指定しているため、その背面にある画像部分が透けて見える、というのが今回のネタの最重要ポイントですｗ
border-radius: 10px;
角をちょっとだけ丸くしている指定です。
数値を大きくすると、より角が丸くなります。
盛り上げたように見せる、と言いつつ…
フチの部分に半透過の枠線がついているだけなので、リアルな盛り上がりではないですが、ちょっとそれっぽく見えますよね？ｗ
あと、outsetの部分を他のものに変更した例をいくつかあげると…
inset
ridge
groove
double
solid
…といった感じになります。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
