[CSS3] background-clipの実例紹介

【CSS Property Advent Calendar 2013 —　22日目】

最近background-clipを愛用しているので何ができるのか実例を紹介。

background-clipとは

background-clipは背景の適用範囲を指定するプロパティです。
指定は至ってシンプルなもので、
要素にborderとpaddingとbackgroundが設定されている場合に
backgroundをどこに表示するか決めることしかできません。

border-box
背景をボーダーボックスに適用する（初期値）
borderに重なる位置からコンテントボックスにかけて

padding-box
背景をパティングボックスに適用する
borderを避けてpaddingの位置からコンテントボックスにかけて

content-box
背景をコンテントボックスに適用する
borderとpaddingを避けてコンテントボックスだけに

参考：CSS3リファレンス

backgroundプロパティなのでカンマ区切りで複数指定することができます。

1. 画像を枠線として表示する

background-imageで枠線にしたい画像と背景にするグラデーションを重ねる。
background-clipで枠線にしたい画像をborder-box、背景のグラデをcontent-boxに指定する。

これは枠線を表現するbackground-imageに背景を表現するbackground-imageを重ねるので、
線＝不透明、背景＝透明〜半透明というデザインは再現できない。

.box{
    position: relative;
    margin:10px;
    padding: 10px;
    height:100px;
    background: linear-gradient(to bottom, #fff 0%, #fff 100%), 
        url(border.png);
    background-clip: content-box, border-box;
}

枠線を画像にするのはborder-imageでも同じ事が出来ます。

こちらだと線＝不透明、背景＝透明〜半透明というデザインは再現できるが、
border-imageにはborder-radiusが効かないので、角丸を作りたい場合はboder-imageに使用する画像を角丸で作る必要がある。

border-image:url(border.png) 10 round;
border-width:10px;

2. グラデーションを枠線として表示する

これもborder-imageでほぼ同じことができます。

.box2 {
    padding:2px;
    width:200px;
    height:40px;
    line-height:40px;
    background-image: linear-gradient(to bottom, #45484d 0%,#000000 100%),
           linear-gradient(135deg,#c19e67 0%,#f3e2c7  24%,#b68d4c 46%,#f3e2c7 73%,#c19e67 100%);
    background-clip:content-box, border-box;
    box-shadow:0 0 6px #000;
    border-radius:8px;
    color:#fff;
    text-align:center;
}

3. 立体的な枠線

枠線と背景のグラデの分だけbackground-imageとbackground-clipを指定するのは１と同じ。
box-shadowでハイライトと影、ドロップシャドウを付ける。
（ルートは外側、疑似要素は内側）

.box2 {
    padding: 5px;
    border-radius: 6px;
    background-clip: content-box,border-box;
    background-image:linear-gradient(to bottom, #fff 0%, #fff 100%),
         linear-gradient(to bottom, rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%);
    box-shadow: inset 1px 1px 1px #e0f3fa, inset -1px -1px 1px #b8e2f6,1px 1px 6px #000;
}

.box2::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    bottom: 5px;
    right: 5px;
    border: solid 1px rgba(0,0,0,0.6);
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2),inset 0 0 8px rgba(0,0,0,0.3),0 0 2px rgba(0,0,0,0.3),1px 1px 1px #e0f3fa;
    border-radius: 4px;
}

これもborder-imageでほぼ同じ事が出来るんですが、
border-imageにはbox-shadowのinsetが重ならないのでbackground-clipのとは様子が変わる。

.border-image2 {
    border-radius: 6px;
    border-image: linear-gradient(to bottom, rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%) 5 round;
    border-width:5px;
    box-shadow: inset 2px 2px 0 #e0f3fa, inset -2px -2px 0 #80B8D3,1px 1px 6px #000;
}

 .border-image2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: solid 1px rgba(0,0,0,0.6);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),inset 0 0 8px rgba(0,0,0,0.3),0 0 2px rgba(0,0,0,0.3),2px 2px 0 #e0f3fa, -2px -2px 0 #80B8D3;
    border-radius: 4px;
 }

4. ２重枠線

ピグファンタジアのボタンががこういうデザインだった。
１要素につき3重(border, padding-box, content-box)、before, afterまで含めると9重に出来る。

.box3 {
    height: 50px;
    padding: 5px;
    border-radius: 25px;
    background: linear-gradient(to bottom, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%),
         linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
    border: solid 5px #000;
    background-clip: content-box,border-box;
    text-align:center;
    color: #fff;
    font-weight:bold;
    line-height:50px;
}

5. プログレスバー風

.box5 {
    margin:10px;
    height:20px;
    padding:3px;
    border-radius:10px;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0%, 
        rgba(255, 255, 255, 0.3) 25%, 
        rgba(255, 255, 255, 0) 26%, 
        rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3) 51%, 
        rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0) 76%, 
        rgba(255, 255, 255, 0) 100%), 
        linear-gradient(-45deg, #BFE8F9 0%, #2AB0ED 100%),
        linear-gradient(to bottom, #A9A9A9 0%,#A9A9A9 100%);
    background-clip: content-box,content-box,border-box;
    background-size:20px 20px, auto, auto;
    border: solid 1px #336281;
}

実動サンプル