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

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

関連トピック

css

サイト全体がずれる css スクロールバー ページの高さが長い場合

ページの高さが長い場合にスクロールバーが表示され、 サイト全体がずれる現象の対処方法メモ 一画面で収まる内容のセンタリングされたペー

font-family

CSSのfont-familyで流行で主流の設定はコレだ!

現時点のベストfont-familyだとを色々なサイトを参考に考察してみます。 そんなに急激に変わるものではないですが、常に最新のfo

liquid-layout

リキッドレイアウト作成方法と簡易テンプレート

可変カラムに対応したリキッドレイアウトの作り方と超簡易テンプレートです。 「レスポンシブかリキッドで悩んでいる」という意見は半分間違い

html

仮バナー・模擬バナーを設置してサイズ確認しながらコーディング

サイトデザインで、この部分にこのサイズの画像を置いたらどういう配置なるかな? という場面で好きな画像サイズを即配置できる便利サイト。

Lined

CSSでボックスを横並びでグリッドデザインしちゃう方法まとめ

CSSで横並びを実現する方法はいくつもありますが、ちょっとした挙動の違いや注意点も含めて見ていきます。利用箇所に合わせて適切なCSSを選

breakpoint

レスポンシブのブレイクポイントを設定する前に知っておくべきこと

Googleも推奨するレスポンシブウェブデザインですが、最初の設計がしっかりしていれば将来性も上がってメンテナンスにも有利なサイト運営が

css

スマホでoverflow:auto;を手軽に実装する

スマホでoverflow:auto;を手軽に実装するには、 Android2.X系のバグとか色々あってとっても面倒です。 最近はAn

公開日:2014/07/12