読者です 読者をやめる 読者になる 読者になる

Aqutras Members' Blog

株式会社アキュトラスのメンバーが、技術情報などを楽しく書いています。

box-shadowを使った柔軟な縁取り

こんにちは、joniyです。
今回はCSS3のbox-shadowを使った柔軟な縁取り方法について触れます。

基本事項

box-shadowには、6つの値が設定できます。

box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color> <inset>

また、コンマ区切りで複数のbox-shadowを設定でき、前に記述されたものから上に描画されます。
指定するボックスがborder-radiusを使って角を丸くしていても追従します。

offset-x offset-y

offset-xは水平方向を指定します。
正の値を指定すると下に移動し、負の値を指定すると上に移動します。
offset-yは垂直方向を指定します。
正の値を指定すると右に移動し、負の値を指定すると左に移動します。
両方とも0を指定すると、要素と重なるようにbox-shadowが適用されます。

例1

.shadow {
    box-shadow: 5px 0px 0px 5px black;
}

f:id:joniy_joniy:20160409093408p:plain

例2

.shadow {
    box-shadow: -5px 0 0px 5px black;
}

f:id:joniy_joniy:20160409093455p:plain

例3

.shadow {
    box-shadow: 0 5px 0px 5px black;
}

f:id:joniy_joniy:20160409093533p:plain

例4

.shadow {
    box-shadow: 0 -5px 0px 5px black;
}

f:id:joniy_joniy:20160409093606p:plain

例5

.shadow {
    box-shadow: 10px 10px 0px 5px black;
}

f:id:joniy_joniy:20160409093636p:plain

blur-radius

値に比例して、ぼかしの範囲が広くなります。
負の値は指定できません。指定が無かった場合は0として処理されます。

例1

.shadow {
    box-shadow: 0 0 5px 0px black;
}

f:id:joniy_joniy:20160409093820p:plain

例2

.shadow {
    box-shadow: 0 0 20px 0px black;
}

f:id:joniy_joniy:20160409093854p:plain

spread-radius

box-shadowの幅が指定した値に応じて太くなります。
負の値は指定できません。指定が無かった場合は、0として処理されます。

例1

.shadow {
    box-shadow: 0 0 0px 5px black;
}

f:id:joniy_joniy:20160409094020p:plain

例2

.shadow {
    box-shadow: 0 0 0px 10px black;
}

f:id:joniy_joniy:20160409094024p:plain

inset

指定しているとボックスの内側にbox-shadowを適用します。

例1

.shadow {
    box-shadow: -10px -10px 0px 5px black inset;
}

f:id:joniy_joniy:20160409094159p:plain

例2

.shadow {
    box-shadow: 10px 10px 0px 5px black inset;
}

f:id:joniy_joniy:20160409094255p:plain

多重線

コンマ区切りで複数のbox-shadowを指定することができます。

例1

.shadow {
    box-shadow:
    0px 0px 0px  4px lightblue inset,
    0px 0px 0px  8px blue inset,
    0px 0px 0px 12px blueviolet inset,
    0px 0px 0px  4px green,
    0px 0px 0px  8px yellow,
    0px 0px 0px 12px orange,
    0px 0px 0px 16px red,
    3px 3px 7px 16px black;
}

f:id:joniy_joniy:20160409090608p:plain

例2
先に記述したものが上に表示されるため、順番を間違えると他の色を塗りつぶしてしまいます。

.shadow {
    box-shadow:
    0px 0px 0px 12px blueviolet inset,
    0px 0px 0px  4px lightblue inset,
    0px 0px 0px  8px blue inset,
    0px 0px 0px 16px red,
    0px 0px 0px  4px green,
    0px 0px 0px  8px yellow,
    0px 0px 0px 12px orange,
    3px 3px 7px 16px black;
}

f:id:joniy_joniy:20160409090935p:plain

border-radius使用時

例1

.shadow {
    box-shadow: 2px 2px 3px 0px black;
}

f:id:joniy_joniy:20160409093019p:plain

例2

.shadow {
    box-shadow: 0px 0px 5px 1px black;
}

f:id:joniy_joniy:20160409093042p:plain

終わりに

box-shadowについて紹介しました。
ついつい最低限の機能を実装して満足してしまい、
見た目を整えることを後回しにしてしまいがちですが、
枠線をつけたり、影をつけたりしてよりわかりやすく
見やすいものにすることを常に意識していきたいですね。

参考

以下のサイトを参考にさせていただきました。
CSS3リファレンス|box-shadow
MDN|box-shadow
CSSで複数のボーダを付ける方法