2013年03月12日 category : Web WordPress tags : ,

すぐに試せる!1分でブログを立体的に。divに影を追加する方法

このエントリーをはてなブックマークに追加

shadow

”最近ちょっと流行り気味なdivにシャドウを付けて立体的に見せるアレ、実装してみました。”

divに影を付けて立体感をブログに与えるシャドウ処理。画像を用意するわけでもなくCSSで処理しますので1分で出来ちゃいます。

画像で処理すると画像の準備や、CSSの調整など大変ですが、CSSひとつ1分で流行りに乗れるのであれば、いつ乗るか?「今でしょ!!」

と各方面の流行りに乗ってみましたが…早速シャドウ処理の紹介です。

01 . これだけでOK

まずは元の状態を御覧ください。通常のラインだけのものです。これはこれでスッキリしていて好きなのですが、これにシャドウを加え立体感を出してみます。

shadow-01

追加するCSSはこれだけ。数値や色はサイトに合わせて調整してみてください。

.shadow{
    box-shadow: 0px 0px 18px 3px #999999;
}

これをCSS(ワードプレスの場合はstyle.css)に追加してサーバーにアップロードします。最初のドットはクラス名という意味ですね。idのように1箇所だけでなく複数箇所に使いますのでclassとしています。

あとは使いたい場所のdivにclassを追加してあげれば出来上がり。

<div id="main" class="shadow">
	<p>ほにゃらら</p>
</div>

先の画像がこんな感じに変わります。

shadow-02

02 . box-shadowプロパティ

box-shadowは名前の通りボックスに影をつけるプロパティです。上の例では数値を4つ指定していますが、2つから4つの数値を与えることができます。

最初の2つは、水平方向と垂直方向になります。1つ目が水平方向でプラスの数値を指定すると右方向へ、マイナスの数値を指定すると左方向へ影をつけます。2つ目が垂直方向でプラス値が下方向、マイナス値が上方向になります。

.shadow{
    box-shadow: 3px 3px #999999;
}

右下に向けて3px影を付けますのでこのようになります。

shadow-03

3つ目の数値はぼかしの距離です。数値が大きいほどぼかしが強くなります。4つ目の数値は広がりを意味します。整数値を指定することで全方向へ影が広がることになります。

3つ目、4つ目は省略すると数値は0として扱われます。ですので最初の画像に使ったCSSでは3つ目、4つ目の値を指定したいため、1つ目、2つ目の引数に0を指定し、3つ目のぼかしに18px、4つ目の広がりに3pxと指定しています。

03 . こんなことも出来る

box-shadowプロパティにはinset属性というのもあります。これは内側方向に影をつけることができます。CSSはこんな感じ。

.shadow{
    box-shadow: 0px 0px 18px 3px #999999 inset;
}

こうすると、こんな感じになります。

shadow-05

04 . 立体感が生まれる

ちょっとした指定でブログに立体感が生まれますね。上の写真では説明用に色を濃い目にしていますが、今は実際にブログで見てもらっている状態です。メイン側を濃く、サイドバーを少し薄くしてメインコンテンツを強調してみました。

CSS、HTMLに数行追加するだけで出来ますのでお試しください。

HOME >>  Web > すぐに試せる!1分でブログを立体的に。divに影を追加する方法