すぐに試せる!1分でブログを立体的に。divに影を追加する方法
”最近ちょっと流行り気味なdivにシャドウを付けて立体的に見せるアレ、実装してみました。”
divに影を付けて立体感をブログに与えるシャドウ処理。画像を用意するわけでもなくCSSで処理しますので1分で出来ちゃいます。
画像で処理すると画像の準備や、CSSの調整など大変ですが、CSSひとつ1分で流行りに乗れるのであれば、いつ乗るか?「今でしょ!!」
と各方面の流行りに乗ってみましたが…早速シャドウ処理の紹介です。
01 . これだけでOK
まずは元の状態を御覧ください。通常のラインだけのものです。これはこれでスッキリしていて好きなのですが、これにシャドウを加え立体感を出してみます。
追加する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>
先の画像がこんな感じに変わります。
02 . box-shadowプロパティ
box-shadowは名前の通りボックスに影をつけるプロパティです。上の例では数値を4つ指定していますが、2つから4つの数値を与えることができます。
最初の2つは、水平方向と垂直方向になります。1つ目が水平方向でプラスの数値を指定すると右方向へ、マイナスの数値を指定すると左方向へ影をつけます。2つ目が垂直方向でプラス値が下方向、マイナス値が上方向になります。
.shadow{ box-shadow: 3px 3px #999999; }
右下に向けて3px影を付けますのでこのようになります。
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; }
こうすると、こんな感じになります。
04 . 立体感が生まれる
ちょっとした指定でブログに立体感が生まれますね。上の写真では説明用に色を濃い目にしていますが、今は実際にブログで見てもらっている状態です。メイン側を濃く、サイドバーを少し薄くしてメインコンテンツを強調してみました。
CSS、HTMLに数行追加するだけで出来ますのでお試しください。
Comments