画像の内側にボーダーを使って飾するとき、Photoshopなどで1枚ずつ加工することってあると思います。
画像の外側であれば、CSSでやってしまおうとすぐに思いつくのですが、画像の内側にボーダーを入れたいときは、
画像加工で対応しがちだと思います。
最近ではCMS化されたホームページも多く、クライアントが更新したり外部SNSサイトから画像を取得したりもします。
少し装飾したいなー、でも外側ボーダーにはもう飽きた！画像加工せずに内側にボーダーを引きたい！
そんな時に使えるサンプルを紹介します。
使用するclass名
.photoFrame：画像に枠を追加します。
.outset：画像の外側に追加します。
.inset：画像の内側に追加します。
View
Source
1 2 | <span class="photoFrame outset"><img src="/-cmsadm-/wp-content/uploads/2016/09/sample.jpg" alt=""></span> <span class="photoFrame inset"><img src="/-cmsadm-/wp-content/uploads/2016/09/sample.jpg" alt=""></span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | .photoFrame { display: inline-block; } .photoFrame.outset img { border: 3px solid #cccccc; background: #ffffff; padding: 1px; } .photoFrame.inset { position:relative; line-height:0; } .photoFrame.inset:before { content:""; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box; display:inline-block; position:absolute; top:2%; left:1.5%; border:3px solid rgba(255,255,255,0.5); width:97%; height:96%; box-sizing:border-box; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | .photoFrame { display: inline-block; &.outset { img { border: 2px solid #cccccc; background: #ffffff; padding: 2px; } } &.inset { position:relative; line-height:0; &:before { content:""; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box; display:inline-block; position:absolute; top:2%; left:1.5%; border:3px solid rgba(255,255,255,0.5); width:97%; height:96%; box-sizing:border-box; } } small { display: block; font-size: 0.75rem; .right {text-align:right;} .center {text-align:center;} } } |