border-image + drop-shadow でおしゃれな枠線を実装する

デザイナーから、大きさが可変のイメージをおしゃれな枠線で囲んだデザインが上がってきたので、border-image +  drop-shadow で実装することにしました。

border-imageの実装

このような9分割できる素材を用意しましょう。

（ぼかしはCSSでいれようと思っているので素材にはいれていません）

CSS

body {
    background: #272822;
}

img {
    display: block;
    margin: 20px auto;
    border-style: solid;
    border-width: 10px;
    -webkit-filter: drop-shadow(0 0 5px rgba(233, 186, 27,  .8));
}

.stretch {
     border-image: url(http://jsrun.it/assets/W/g/z/9/Wgz9x.png) 20 stretch;
}

.round {
     border-image: url(http://jsrun.it/assets/W/g/z/9/Wgz9x.png) 20 round;
}

.repeat {
     border-image: url(http://jsrun.it/assets/W/g/z/9/Wgz9x.png) 20 repeat;
}

.space {
     border-image: url(http://jsrun.it/assets/W/g/z/9/Wgz9x.png) 20 space;
}

HTML

<img class="stretch" src="http://jsrun.it/assets/K/t/b/O/KtbOr.jpeg" width="250" height="250" />
<img class="round" src="http://jsrun.it/assets/K/t/b/O/KtbOr.jpeg" width="250" height="250" />
<img class="repeat" src="http://jsrun.it/assets/K/t/b/O/KtbOr.jpeg" width="250" height="250" />
<img class="space" src="http://jsrun.it/assets/K/t/b/O/KtbOr.jpeg" width="250" height="250" />

DEMO

 border-image-repeat は round が良さそうです。

※ Chromeでご観覧ください

 

drop-shadowでぼかす

box-shadow ではなく drop-shadow をつかってぼかします。

kimizuka.hatenablog.com

CSS

body {
    background: #272822;
}

img {
    display: block;
    margin: 20px auto;
    border-style: solid;
    border-width: 10px;
    -webkit-filter: drop-shadow(0 0 5px rgba(233, 186, 27,  .8));
}

.stretch {
     border-image: url(http://jsrun.it/assets/W/g/z/9/Wgz9x.png) 20 stretch;
}

.round {
     border-image: url(http://jsrun.it/assets/W/g/z/9/Wgz9x.png) 20 round;
}

.repeat {
     border-image: url(http://jsrun.it/assets/W/g/z/9/Wgz9x.png) 20 repeat;

.space {
     border-image: url(http://jsrun.it/assets/W/g/z/9/Wgz9x.png) 20 space;
}

DEMO

※ Chromeでご観覧ください

だいたい再現できました。