ボックスのデザイン

背景色を半透明にする

背景色(background-color)の値として不透明を指定することができる。

ボックスに影をつける

ボックスに影を表示させる(box-shadow プロパティ)では、指定する値の種類やその内容によってさまざまな影を表示させることができます。

【基本形】ソリッドな影

値に右方向にずらす距離(縦の影)、下方向にずらす距離(横の影)、影の色の3つを指定するとボックスの形をそのままずらしたソリッドな影になります。
Box-shadow:縦・横・色;
指定例
box-shadow: 4px 4px #0BA3A3;

ボックスの内側に影をつける

値にinsetを追加すると、ボックスの内側に影を表示します。
Box-shadow:縦・横・ぼかし距離・色・内側方向に;
指定例
box-shadow: 1px 1px 4px #ccc inset;

グロー効果

ボックスの四方を影でぼかします。
指定例
border:none;
box-shadow: 0 0 6px 2px #0BA3A3;

影をぼかす範囲

box-shadow プロパティで影をぼかす場合、指定した値で影の端から外側にぼかすだけでなく、内側にもぼかします。
例えば、ぼかしの値を4pxにした場合、影の端から内側に2pxぼかし、外側に2px広がってぼかします。
box-shadow: 4px 4px 4px #0BA3A3;

複数の影を指定

box-shadow プロパティは、カンマで区切って複数の影ボックスをつけることができます。

ボックスを角丸にする

ボックスを角丸にする(border-radius プロパティ)では、指定した値の半径で角を丸くします。
ボックスになっていれば、ボーダー以外に背景色や背景画像も角丸にできます。

【基本形】角丸

四角を角丸にします。
border-radius:角丸の半径の大きさ;
指定例
border-radius: 5px;

角ごとに角丸の大きさを変える

半角スペースで区切って複数の値を指定すると、角ごとに角丸の大きさを変えられます。
指定例
border-radius:対角線;
border-radius: 5px 2px;
border-radius:左上・対角線・右下;
border-radius: 5px 2px 10px;
border-radius:左上・右上・右下・左下;
border-radius: 5px 2px 10px 15px;

楕円の角丸にする

2つの値の間を「/」で区切ると、楕円の角丸になります。
border-radius:横方向の半径/縦方向の半径;
指定例
border-radius: 4px/10px;

ボックスの周りを画像ボーダーで囲む

ボックスの周りに表示するボーダーに画像を指定できます。
画像ボーダーに対応していないブラウザで表示されることを考慮してボーダーのスタイルや色を指定します。ここでは、緑色のボーダーにしています。
指定例
border: 20px #0BA3A3;
border-image: url(ボーダー画像のパス)スライスの大きさ/表示幅/拡張幅・繰り返し方法;

画像を伸縮する

表示方法の値を指定しないか、Stretchを指定すると、ボックスの大きさに合わせて画像が伸縮します。
指定例
-webkit-border-image: url(images/b-img.png) 15;
-o-border-image:url(images/b-img.png) 15;
-border-image:url(images/b-img.png) 15;

画像を繰り返す

repeatを指定すると、ボックスの大きさに合わせて画像を繰り返し表示します。
指定例
-webkit-border-image: url(images/b-img.png) 15 repeat;
-o-border-image:url(images/b-img.png) 15 repeat;
-border-image:url(images/b-img.png) 15 repeat;

画像を繰り返して調整する

表示方法にroundを指定すると、ボックスの大きさに合わせて画像を繰り返し表示し、かつ画像を微調整します。
現在のところ、ChromeとSafariはこの表示方法に対応していません。
指定例
-webkit-border-image: url(images/b-img.png) 15 round;
-o-border-image:url(images/b-img.png) 15 round;
-border-image:url(images/b-img.png) 15 round;

その他のボックス

アコーディオンで開くボックスにする
CSSのプロパティやセレクタを利用すると、JavaScriptを利用しなくてもアコーディオンのように開いて表示できます。

タブで切り替えるボックスにする

コメント