● 説明
① CSS3はIE8やIE7では機能しないので注意してください。
② CSS3のbox-shadowを利用してボックスの影をシュミレーションします。
③ セレクタ名(場所の名前)の入力が必要です。
セレクタ名(場所の名前)はセレクタ名とします。
セレクタ名(場所の名前)の最初の1文字は英字としてそれ以外は英数字、記号とします。
④ CSSは一番最後に追加します。
● box-shadowの内容
① 形式
box-shadow:水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 inset;
例
box-shadow:10px 20px 30px 40px #ff00ff inset;
② 説明
・10px は水平方向の影の距離です。(マイナス指定ができます)
・20px は垂直方向の影の距離です。(マイナス指定ができます)
・30px は影のぼかしの距離です。(マイナス指定はできません)
値が大きくなるとぼかしが強くなり、0を指定するとぼかしはされません。
・40px は広がりの距離です。(マイナス指定ができます)
正の値(プラス)を指定すると上下左右に影がつきます。
負の値(マイナス)が指定された場合、影は縮小されます。
省略が可能で省略された場合は、0を指定したと解釈されます。
・#ff00ff の影の色コードです。(red black green などの色名指定も可能)
・inset は内側の影にします。
省略が可能で、省略すると外側の影になります。
・結果(CSS)のセレクタについて。
もし、カーソルを乗せた時の変化の場合は、セレクタ名を下記の様に:hoverを付けます。
(セレクタ名 abc でクラスの場合)
.abc:hover{
尚、クラスは . IDは # です。
この部分は結果で表示されたCSS部分を調整してください。
③ その他
CSS3作成のボタンをクリックするとCSSが作成されて
下にそのbox-shadow実行のCSSの結果が表示されます。
● 例
① 記事などにHTMLモードで下記の様に記述します。
<div class="box001"></div>
② 下記の様にCSSへ追加します。
.box001{
width:60px;/* 幅 */
height:60px;/* 高さ */
display:block;
margin:50px;/* 上下左右の外側余白 */
}
.box001{
box-shadow:0 0 20px black,
20px 15px 30px yellow,/* 右下 */
-20px 15px 30px lime,/* 左下 */
-20px -15px 30px blue,/* 左上 */
20px -15px 30px red;/* 右上 */
}
角丸を組み合わせると下記の様になります。
更に下記をCSSへ追記します。
.box001{
border-radius: 32px;/* CSS3角丸 */
-moz-border-radius: 32px;/* Firefox角丸 */
-webkit-border-radius:32px;/* Safari、Google Chrome角丸 */
}