ボックスの装飾 [CSS] | IT SKILL MAP STUDY -- WEBプログラミング知識【実務的なHTML,CSS,JavaScript,JQuery,PHPの知識】

ボックスに影をつける

　ここではボックスを装飾するための、シャドウ、グラデーションのプロパティをまとめます。

box-shadow

　ボックスに影をつけるプロパティです。

box-shadow値	説明
水平方向のオフセット値　垂直方向のオフセット値　ぼかし距離　広がりの距離　影の色　(inset)	各値をpx、影の色をキーワード(ex.red)、16進数、RGBA等により設定する。ボックスの内側に影を付ける場合はinsetを付ける。

box-shadowプロパティ利用例

結果
HTML
CSS

水平方向のオフセット値＝1px　垂直方向のオフセット値＝1px　ぼかし距離＝3px　広がりの距離＝2px　影の色＝blue

/* HTMLの例 */
	
	水平方向のオフセット値＝1px　垂直方向のオフセット値＝1px　ぼかし距離＝3px　広がりの距離＝2px　影の色＝blue

/* CSSの例 */

.sample1 {
	width:400px;
	height:50px;
	background:skyblue;
	box-shadow:1px 1px 3px 2px blue;
}

カンマで区切って複数の影を適用することもできます。

結果
HTML
CSS

水平方向のオフセット値＝1px　垂直方向のオフセット値＝1px　ぼかし距離＝3px　広がりの距離＝2px　影の色＝blue

水平方向のオフセット値＝2px　垂直方向のオフセット値＝2px　ぼかし距離＝4px　広がりの距離＝3px　影の色＝red

/* HTMLの例 */
	
	水平方向のオフセット値＝1px　垂直方向のオフセット値＝1px　ぼかし距離＝3px　広がりの距離＝2px　影の色＝blue

	

	水平方向のオフセット値＝2px　垂直方向のオフセット値＝2px　ぼかし距離＝4px　広がりの距離＝3px　影の色＝red

/* CSSの例 */

.sample2 {
	width:400px;
	height:50px;
	background:skyblue;
	box-shadow:1px 1px 3px 2px blue,2px 2px 4px 3px red;
}

insetで内側に影を指定した例です。

結果
HTML
CSS

水平方向のオフセット値＝1px　垂直方向のオフセット値＝1px　ぼかし距離＝3px　広がりの距離＝2px　影の色＝blue　inset指定

/* HTMLの例 */
	
	水平方向のオフセット値＝1px　垂直方向のオフセット値＝1px　ぼかし距離＝3px　広がりの距離＝2px　影の色＝blue　inset指定

/* CSSの例 */

.sample3 {
	width:400px;
	height:50px;
	background:skyblue;
	box-shadow:1px 1px 3px 2px blue inset;
}

insetで白色の影、外側に通常の影をカンマで区切って指定すると立体的なボタンになります。

結果
HTML
CSS

水平方向のオフセット値＝1px　垂直方向のオフセット値＝1px　ぼかし距離＝3px　広がりの距離＝2px　影の色＝white　inset指定

水平方向のオフセット値＝2px　垂直方向のオフセット値＝2px　ぼかし距離＝4px　広がりの距離＝3px　影の色＝blue

/* HTMLの例 */
	
	水平方向のオフセット値＝1px　垂直方向のオフセット値＝1px　ぼかし距離＝3px　広がりの距離＝2px　影の色＝white　inset指定

	

	水平方向のオフセット値＝2px　垂直方向のオフセット値＝2px　ぼかし距離＝4px　広がりの距離＝3px　影の色＝blue

/* CSSの例 */

.sample4 {
	width:400px;
	height:120px;
	background:skyblue;
	box-shadow:1px 1px 3px 2px white inset,1px 1px 3px 2px blue;
}

ボックスにグラデーションをつける

background-image

　背景画像を指定するbackground-imageプロパティを使います。

linear-gradient：線形グラデーション

background-image値	説明
linear-gradient((方向もしくは角度),色と位置,色と位置,(色と位置))	方向：to left、to right、to top（初期値）、to bottomのいずれかを設定角度：45deg、90degというように角度で設定色：キーワード(ex.red)、16進数、RGBA等により設定。２色は必須。３色目以降は任意位置：％で対象の色の位置を指定

liner-gradient利用例

結果
HTML
CSS

linear-gradient(色＝red,色＝blue)

/* HTMLの例 */
	
	linear-gradient(色＝red,色＝blue)

/* CSSの例 */

.sample5 {
	width:400px;
	height:50px;
	background-image:linear-gradient(blue,red);
	color:white;
}

３色グラデーション。方向指定。さらに色の位置も指定。

結果
HTML
CSS

linear-gradient(方向＝to right,色＝red,色と位置＝lightgreen 20%,色＝blue)

/* HTMLの例 */
	
	linear-gradient(方向＝to right,色＝red,色と位置＝lightgreen 20%,色＝blue)

/* CSSの例 */

.sample6 {
	width:400px;
	height:50px;
	background-image:linear-gradient(to right,blue,lightgreen 20%,red);
	color:white;
}

３色グラデーション。角度指定。

結果
HTML
CSS

linear-gradient(角度＝45deg,色＝red,色＝lightgreen,色＝blue)

/* HTMLの例 */
	
	linear-gradient(角度＝45deg,色＝red,色＝lightgreen,色＝blue)

/* CSSの例 */

.sample7 {
	width:400px;
	height:50px;
	background-image:linear-gradient(45deg,blue,lightgreen,red);
	color:white;
}

radial-gradient：円形グラデーション

background-image値

説明

radial-gradient((正円指定とグラデーション範囲／方向もしくは角度),色と位置,色と位置,(色と位置))

正円指定：circleを指定
グラデーション範囲：circleを指定した場合に、closest-side、farthest-side(初期値)のいずれかを設定
方向：to left、to right、to top（初期値）、to bottomのいずれかを設定
角度：45deg、90degというように角度で設定
色：キーワード(ex.red)、16進数、RGBA等により設定。２色は必須。３色目以降は任意
位置：％で対象の色の位置を指定

radial-gradient利用例

結果
HTML
CSS

radial-gradient(色＝red,色＝blue)
ボックス全体の円形グラデーションなので、この場合楕円形になる

/* HTMLの例 */
	
	radial-gradient(色＝red,色＝blue)

	ボックス全体の円形グラデーションなので、この場合楕円形になる

/* CSSの例 */

.sample8 {
	width:400px;
	height:50px;
	background-image:radial-gradient(blue,red);
	color:white;
}

正円指定。３色グラデーション。

結果
HTML
CSS

radial-gradient(正円指定＝circle,色＝red,色＝lightgreen,色＝blue)

/* HTMLの例 */
	
	radial-gradient(正円指定＝circle,色＝red,色＝lightgreen,色＝blue)

/* CSSの例 */

.sample9 {
	width:400px;
	height:50px;
	background-image:radial-gradient(circle,red,lightgreen,blue)
	color:white;
}

正円指定。グラデーション範囲にclosest-side指定。３色グラデーション。

結果
HTML
CSS

linear-gradient(正円指定＝circle,グラデーション範囲＝closest-side,色＝red,色＝lightgreen,色＝blue)

/* HTMLの例 */
	
	linear-gradient(正円指定＝circle,グラデーション範囲＝closest-side,色＝red,色＝lightgreen,色＝blue)

/* CSSの例 */

.sample10 {
	width:400px;
	height:50px;
	background-image:radial-gradient(circle closest-side,red,lightgreen,blue);
	color:white;
}