2015年04月27日

陰を付けられるとは知らなかった〜CSS3

 知りませんでした。CSS3で陰を付けられるのでした。
 見やすくするために(かつ、一般的な背景として)、白い背景で表示することにします。



 まず、<div>を使った普通のボックスです。

 CSS3のテスト


ソース:
<div style="border:#666 thin solid; width:10em;"> CSS3のテスト</div>

 これに、box-shadowを付け加えます。



 CSS3のテスト


ソース:
<div style="border:#666 thin solid; width:10em; box-shadow: 5px 5px 5px #aaa;"> CSS3のテスト</div>

box-shadow: (垂直方向の陰サイズ)(水平方向の陰サイズ)(ぼかしレベル)(色)
という定義です。
さらに、
box-shadow: (垂直方向の陰サイズ)(水平方向の陰サイズ)(ぼかしレベル)(ぼかし広がり)(色)
と、指定を加えられます。(ぼかしレベル)を10pxに増加し、(ぼかし広がり)5pxを加えてみます。

 CSS3のテスト


ソース:
<div style="border:#666 thin solid; width:10em; box-shadow: 5px 5px 10px 5px #aaa;"> CSS3のテスト</div>

 陰の範囲が広がり、ボケの程度が強まりました。

 その結果、上辺・左辺も浮き上がって見えるようになったので、ボックスの境界線を無くすこともできそうです。

 CSS3のテスト


ソース:
<div style="width:10em; box-shadow: 5px 5px 10px 5px #aaa;"> CSS3のテスト</div>

陰が目立ち過ぎなので、控え目にしてみます。

 CSS3のテスト


ソース:
<div style="width:10em; box-shadow: 4px 4px 8px 3px #aaa;"> CSS3のテスト</div>

さて、これまで文字を囲むボックスに陰を付けましたが、画像にも陰が付けられるのでしょうか。



 当ブログで使うことを前提に、通常のグレーの背景に戻します。

apricot02.jpg


 できました。ソースは次の通りです。

<div style="text-align: center; box-shadow: 10px 4px 8px 3px #666;"><a href="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/apricot02.jpg" target="_blank"><img border="0" alt="apricot02.jpg" src="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/apricot02-thumbnail2.jpg" width="400" height="264"></a></div>

 写真らしいイメージにするために、borderで白い縁取りを付けてみます。

apricot02.jpg


ソース:
<div style="text-align: center; box-shadow: 10px 4px 8px 3px #666; border: #fff solid 5px; width:300px;"><a href="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/apricot02.jpg" target="_blank"><img border="0" alt="apricot02.jpg" src="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/apricot02-thumbnail2.jpg" width="300" height="196"></a></div>

 ブログのCSSが、記述幅を制限しているので、白の縁取りが横方向へ充分に取れないようです。

 では、画像の横幅を狭くしてみます。横方向の陰も小さくします。

apricot02.jpg


ソース:
<div style="text-align: center; box-shadow: 4px 4px 8px 3px #666; border: #fff solid 5px; width:300px;"><a href="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/apricot02.jpg" target="_blank"><img border="0" alt="apricot02.jpg" src="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/apricot02-thumbnail2.jpg" width="300" height="196"><;/a></div>

 今までは画像を入れている<div>に陰やborderの指定をしましたが、最後に、画像そのものに指定をしてみたいと思います。

オリジナル画像:
thistle_s.jpg


css3で縁取りと陰:
thistle_s.jpg


ソース:
<div style="text-align: center"><a class="fancybox-pad8" data-fancybox-group="gallery" href="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/thistle_l.jpg" target="_blank"><img style="box-shadow: 4px 4px 8px 3px #666; border: #fff solid 5px;" alt="thistle_s.jpg" src="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/thistle_s.jpg" width="300" height="199"></a></div>

 うまくできました。
タグ:CSS CSS3
posted by kewpie at 07:32| Comment(0) | TrackBack(0) | ファイル作成
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/123765894
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
コメントの投稿について
○お名前とコメント欄の記入は必須です。
○メールアドレスは任意です。記入されても公開はされません。管理人のみに知らされます。
○スパム防止のため、
・ホームページアドレス欄への記入はできません。
・コメント欄にURLは記入できません。
・スパムと思われる語を記入できません。
 これらをしようとすると、最終的に投稿完了できません。
○投稿完了後に、管理人の判断でスパムと判断した投稿は削除させていただきます。