clover.blue

border-imageをbefore,after擬似要素で使うとRetina対応もできて便利

Data
2014/09/26
Tag

site: http://develo.org/border-image-after

ボックスの周りに装飾として画像を置きたい場合に背景画像で対応するのもいいのですが
3つに切って・・。真ん中を繰り返しして・・。
さらに透過だった場合どこのタグに背景をいれるか工夫したりするのが大変だなぁと思っていました。

そういう場合はborder-imageを使ったりしていたのですが
border-imageを使うとborder-width分コンテンツが内側によっちゃいますよね・・。
まぁborderなので当たり前ですが・・。
しかも普通にやると画像だけ1/2にすることができないので、Retina対応とかできないんです。

でもこれafterとかbeforeに指定したらborder-widthとか気にせずに使えるんじゃない！？
と思って試してみたらめちゃめちゃ便利！しかもRetina対応もできちゃうし！

みなさんも是非使ってみてください。

DEMO

イメージとしてはafterかbeforeをつかってborder-imageをabsoluteのwidth,heightともに100%にしてコンテンツの上にかぶしちゃおうという感じです！

ただしかぶしちゃうと中のリンクがきかなくなっちゃうので、中身のほうがz-indexが高くなるように設定してあげればよいかと思います。

さらにさらに、zoomを0.5にすることによってRetinaにも対応出来ちゃいます！

いいコトづくしじゃん！

HTML

<div>
    <h2>normal</h2>
    <p>...</p>
</div>

CSS

通常

.normal {
    border-width: 100px;
    -moz-border-image: url(http://jsrun.it/assets/n/T/2/b/nT2bz.png) 100 repeat;
    -webkit-border-image: url(http://jsrun.it/assets/n/T/2/b/nT2bz.png) 100 repeat;
    -o-border-image: url(http://jsrun.it/assets/n/T/2/b/nT2bz.png) 100 repeat;
    border-image: url(http://jsrun.it/assets/n/T/2/b/nT2bz.png) 100 fill repeat;
    box-sizing: border-box;
}

afterを使った場合

.after {
    position: relative;
}

.after:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-width: 100px;
    -moz-border-image: url(http://jsrun.it/assets/n/T/2/b/nT2bz.png) 100 repeat;
    -webkit-border-image: url(http://jsrun.it/assets/n/T/2/b/nT2bz.png) 100 repeat;
    -o-border-image: url(http://jsrun.it/assets/n/T/2/b/nT2bz.png) 100 repeat;
    border-image: url(http://jsrun.it/assets/n/T/2/b/nT2bz.png) 100 fill repeat;
    box-sizing: border-box;
    zoom: 0.5; /* Retina対応 */
}

.after > * {
    position: relative;
    z-index: 1;
}

border-imageってなんかいまいち使いづらいなぁと思っていたので、これを思いついてからすごい使いやすくなった気がします！

border-imageを使って作業を楽にしちゃいましょー。

ちなみにジェネレーターはborder-image-generatorを使うと簡単に設定できちゃいます。