CSSだけで再現できる影付きボーダーはフラットデザインでは中々表現しにくい高級感を出したり、フラットを勘違いした古臭さを除去できるとっても優秀なデザインですよね。ほんの少しCSSで影をつけただけなのに、まったく別の印象になるのは興味深いです。やっぱり、人間は立体で認識する生き物なので、急にリアリティが湧くのかもしれません。
枠線に薄っすらシャドウ
フラットデザインには枠線を用いることは少ないです。カラーで区切る手法が多かったりしますよね。でも薄っすらシャドウを使えばサイト構成で便利だけど単調になってしまう枠線ボーダーにちょっと厚みを出せます。通常のborderだけの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;
}
ボーダーと影の枠線
さっきよりも控えめに強調したい区切りになります。通常のボーダーに足すことで印象を変えられますね。
.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;
}
内側にシャドウの枠線
シャドウを内側に向けると、隣り合うボックスとの境がはっきりしたり、集中線効果で内側のコンテンツに目を向ける作用もありますね。
.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;
}
非対称な影の枠線
ボーダー幅の調整でなく、非対称にすることでより浮かび効果が増しますね。
.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;
}
マスキング的な枠線
マスキングしてスプレーしたような抜け感を同色背景同士で表現できます。コンテンツ全体の枠線に採用するとクッキリさせずに区切りを強調できると思います。
.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;
}
まとめ
今回はあくまで薄っすらデザインにこだわってみました。
これ全部box-shadow一行で再現できるのが嬉しいですね。よく見ると違いがそこまでなさそうでもパッみると印象が変わる不思議な効果があります。
似たような構成のサイト同士でもあっちの方が綺麗に見えるなんていう場合には、シャドウがうっすら効いているケースが多かったので、もしかしたらアノサイトもシャドってるかも！
今日も知識欲は止まらない。
