枠に影をつける (box-shadowプロパティを利用) - CSS
ブロック要素に影をつけるコードを紹介します。
概要
ブロック要素に影を付ける場合は、
box-shadow プロパティを利用します。
書式
box-shadow の書式は以下です。
box-shadow: (横方向の距離) (縦方向の距離) (影のぼかし) (影のサイズ) (影のカラー) (影の方向);
(影のぼかし) (影のサイズ) (影のカラー) (影の方向)は省略可能なため、下記の書式も利用できます。
box-shadow: (横方向の距離) (縦方向の距離);
box-shadow: (横方向の距離) (縦方向の距離) (影のぼかし);
box-shadow: (横方向の距離) (縦方向の距離) (影のぼかし) (影のサイズ);
box-shadow: (横方向の距離) (縦方向の距離) (影のぼかし) (影のカラー);
box-shadow: (横方向の距離) (縦方向の距離) (影のぼかし) (影のサイズ) (影のカラー);
box-shadow: (横方向の距離) (縦方向の距離) (影のぼかし) (影のカラー) (影の方向);
記述例
box-shadow: 5px 5px 3px 1px #000000 inset;
プログラム例1:シンプルな表示例
下記のHTMLファイルとCSSファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="SimpleShadow.css" />
</head>
<body>
<div class="SimpleFrame">テストです。</div>
</body>
</html>
body {
background-color:#C0C0C0;
}
.SimpleFrame {
background-color: #FFFFFF;
margin-left: 128px;
margin-top: 64px;
width: 128px;
height: 220px;
box-shadow: 4px 4px 5px #404040;
}
表示結果
上記のHTMLをWebブラウザで表示します。下図の画面が表示されます。DIVの枠にドロップシャドウの効果がつき、影が表示されます。
プログラム例2: 影のぼかしサイズを指定した場合
上記のCSSファイルのCSSを下記に変更します。
body {
background-color:#C0C0C0;
}
.SimpleFrame {
background-color: #FFFFFF;
margin-left: 128px;
margin-top: 64px;
width: 128px;
height: 220px;
box-shadow: 4px 4px 0px #808080;
}
”box-shadow: 4px 4px 0px #808080;” を記述した場合の表示結果
”box-shadow: 4px 4px 4px #808080;” を記述した場合の表示結果
”box-shadow: 4px 4px 16px #808080;” を記述した場合の表示結果
大きい数値を指定するほど、影の輪郭がぼやけ、柔らかい影の表示になります。
プログラム例3: 影のサイズを指定した場合
cssファイルを下記に変更します。
body {
background-color:#C0C0C0;
}
.SimpleFrame {
background-color: #FFFFFF;
margin-left: 128px;
margin-top: 64px;
width: 128px;
height: 220px;
box-shadow: 4px 4px 5px 10px #404040;
}
表示結果
影のサイズを指定すると外側に指定したサイズだけ広く影が表示されます。
プログラム例4: 影の方向を"inset"に指定した場合
cssファイルを下記に変更します。
body {
background-color:#C0C0C0;
}
.SimpleFrame {
background-color: #FFFFFF;
margin-left: 128px;
margin-top: 64px;
width: 128px;
height: 220px;
box-shadow: 4px 4px 5px #404040 inset;
}
表示結果
枠の内側に影が表示されます。
プログラム例5: 影にカラーを設定した場合
box-shadow の影のカラーを指定します。
cssファイルを下記に変更します。
body {
background-color:#C0C0C0;
}
.SimpleFrame {
background-color: #FFFFFF;
margin-left: 128px;
margin-top: 64px;
width: 128px;
height: 220px;
box-shadow: 2px 2px 10px #ff6a00;
}
表示結果
HTMLファイルをWebブラウザで表示すと下図の画面が表示されます。影に色がついて表示されます。
参考: 影の無い場合
box-shadow を設定しない場合です。
body {
background-color:#C0C0C0;
}
.SimpleFrame {
background-color: #FFFFFF;
margin-left: 128px;
margin-top: 64px;
width: 128px;
height: 220px;
}
表示結果
HTMLファイルをWebブラウザで表示すと下図の画面が表示されます。影は表示されません。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
