CSSの枠線は薄っすらシャドウで影を付けるボーダーデザインが素敵

css-shadow

CSSだけで再現できる影付きボーダーはフラットデザインでは中々表現しにくい高級感を出したり、フラットを勘違いした古臭さを除去できるとっても優秀なデザインですよね。ほんの少しCSSで影をつけただけなのに、まったく別の印象になるのは興味深いです。やっぱり、人間は立体で認識する生き物なので、急にリアリティが湧くのかもしれません。

SPONSORED LINK

枠線に薄っすらシャドウ

フラットデザインには枠線を用いることは少ないです。カラーで区切る手法が多かったりしますよね。でも薄っすらシャドウを使えばサイト構成で便利だけど単調になってしまう枠線ボーダーにちょっと厚みを出せます。通常のborderだけのnoneと比較してみます。

none

影だけの枠線

影だけでボーダーを表現しているので、カッチリしすぎないさりげない区切りを演出できます。シンプルに仕上げたいけどボーダーだとクッキリしすぎる時に使えそう。

.panel1 {
box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
-webkit-box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
-moz-box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
}
panel1

ボーダーと影の枠線

さっきよりも控えめに強調したい区切りになります。通常のボーダーに足すことで印象を変えられますね。

.panel2 {
border:1px solid #EEE;
box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
-webkit-box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
-moz-box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
}
panel2

内側にシャドウの枠線

シャドウを内側に向けると、隣り合うボックスとの境がはっきりしたり、集中線効果で内側のコンテンツに目を向ける作用もありますね。

.panel3 {
border:1px solid #EEE;
box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px inset;
-webkit-box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px inset;
-moz-box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px inset;
}
panel3

非対称な影の枠線

ボーダー幅の調整でなく、非対称にすることでより浮かび効果が増しますね。

.panel4 {
border:1px solid rgb(238, 238, 238);
box-shadow:rgba(238, 238, 238, 0.509804) 9px 9px 10px -4px;
-webkit-box-shadow:rgba(238, 238, 238, 0.509804) 9px 9px 10px -4px;
-moz-box-shadow:rgba(238, 238, 238, 0.509804) 9px 9px 10px -4px;
}
panel4

マスキング的な枠線

マスキングしてスプレーしたような抜け感を同色背景同士で表現できます。コンテンツ全体の枠線に採用するとクッキリさせずに区切りを強調できると思います。

.panel5 {
box-shadow:rgba(238, 238, 238, 0.360784) 0px 0px 24px 20px;
-webkit-box-shadow:rgba(238, 238, 238, 0.360784) 0px 0px 24px 20px;
-moz-box-shadow:rgba(238, 238, 238, 0.360784) 0px 0px 24px 20px;
}
panel5

まとめ

今回はあくまで薄っすらデザインにこだわってみました。
これ全部box-shadow一行で再現できるのが嬉しいですね。よく見ると違いがそこまでなさそうでもパッみると印象が変わる不思議な効果があります。
似たような構成のサイト同士でもあっちの方が綺麗に見えるなんていう場合には、シャドウがうっすら効いているケースが多かったので、もしかしたらアノサイトもシャドってるかも!

今日も知識欲は止まらない。

SPONSORED LINK
トップへ戻る