DIV(ボックス)の色々(丸み・影付き・グラデューション)なCSSサンプル

TOP > サンプル >  ボックスのサンプル
このエントリーをはてなブックマークに追加

ボックスのサンプル

背景色をつけたDIV

あいうえお

サンプルソースを表示 

.sample {
	background-color:#ddeeff;
}

<div class="sample">あいうえお</div>

+マージン(ボックス外の余白)

あいうえお

サンプルソースを表示 

.sample {
	background-color:#ddeeff;
	margin:20px;
}

<div class="sample">あいうえお</div>

+パディング(ボックス内の余白)

あいうえお

サンプルソースを表示 

.sample {
	background-color:#ddeeff;
	margin:20px;
	padding:5px;
}

<div class="sample">あいうえお</div>

+丸み

あいうえお

サンプルソースを表示 

.sample {
	background-color:#ddeeff;
	margin:20px;
	padding:5px;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
}

<div class="sample">あいうえお</div>

+影

あいうえお

サンプルソースを表示 

.sample {
	background-color:#ddeeff;
	margin:20px;
	padding:5px;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	box-shadow:0px 0px 0px 6px #aedaf2;
	-moz-box-shadow:0px 0px 0px 6px #aedaf2;
	-webkit-box-shadow:0px 0px 0px 6px #aedaf2;
}

<div class="sample">あいうえお</div>

+影(ぼかし弱)

あいうえお

サンプルソースを表示 

.sample {
	background-color:#ddeeff;
	margin:20px;
	padding:5px;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	box-shadow:0px 0px 3px 3px #aedaf2;
	-moz-box-shadow:0px 0px 3px 3px #aedaf2;
	-webkit-box-shadow:0px 0px 3px 3px #aedaf2;
}

<div class="sample">あいうえお</div>

+影(ぼかし中)

あいうえお

サンプルソースを表示 

.sample {
	background-color:#ddeeff;
	margin:20px;
	padding:5px;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	box-shadow:0px 0px 10px 3px #aedaf2;
	-moz-box-shadow:0px 0px 10px 3px #aedaf2;
	-webkit-box-shadow:0px 0px 10px 3px #aedaf2;
}

<div class="sample">あいうえお</div>

+影(ぼかし強)

あいうえお

サンプルソースを表示 

.sample {
	background-color:#ddeeff;
	margin:20px;
	padding:5px;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	box-shadow:0px 0px 10px 10px #aedaf2;
	-moz-box-shadow:0px 0px 10px 10px #aedaf2;
	-webkit-box-shadow:0px 0px 10px 10px #aedaf2;
}

<div class="sample">あいうえお</div>

+影(横)

あいうえお

サンプルソースを表示 

.sample {
	background-color:#ddeeff;
	margin:20px;
	padding:5px;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	box-shadow:5px 0px 3px #aedaf2;
	-moz-box-shadow:5px 0px 3px #aedaf2;
	-webkit-box-shadow:5px 0px 3px #aedaf2;
}

<div class="sample">あいうえお</div>

+影(下)

あいうえお

サンプルソースを表示 

.sample {
	background-color:#ddeeff;
	margin:20px;
	padding:5px;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	box-shadow:0px 5px 3px #aedaf2;
	-moz-box-shadow:0px 5px 3px #aedaf2;
	-webkit-box-shadow:0px 5px 3px #aedaf2;
}

<div class="sample">あいうえお</div>

+影(右下)

あいうえお

サンプルソースを表示 

.sample {
	background-color:#ddeeff;
	margin:20px;
	padding:5px;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	box-shadow:5px 5px 3px #aedaf2;
	-moz-box-shadow:5px 5px 3px #aedaf2;
	-webkit-box-shadow:5px 5px 3px #aedaf2;
}

<div class="sample">あいうえお</div>

グラデーション(線形)

あいうえお

サンプルソースを表示 

.sample {
	margin:20px;
	padding:5px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #d5defc), color-stop(1.00, #616a90));
	background: -webkit-linear-gradient(#d5defc, #616a90);
	background: -moz-linear-gradient(#d5defc, #616a90);
	background: -o-linear-gradient(#d5defc, #616a90);
	background: -ms-linear-gradient(#d5defc, #616a90);
	background: linear-gradient(#d5defc, #616a90);
}

<div class="sample">あいうえお</div>

グラデーション(線形)

あいうえお

サンプルソースを表示 

.sample {
	margin:20px;
	padding:5px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #70b6f2), color-stop(0.50, #54a3ee), color-stop(0.50, #3690f0), color-stop(1.00, #1a62db));
	background: -webkit-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
	background: -moz-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
	background: -o-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
	background: -ms-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
	background: linear-gradient(to bottom, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
}

<div class="sample">あいうえお</div>

グラデーション(円形)

あいうえお

サンプルソースを表示 

.sample {
	margin:20px;
	padding:5px;
	background: -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 121, color-stop(1.00, #1a62db), color-stop(0.50, #54a3ee), color-stop(0.50, #54a3ee), color-stop(0.00, #70b6f2));
	background: -webkit-radial-gradient(50% 100%, circle, #70b6f2 0%, #54a3ee 50%, #54a3ee 50%, #1a62db 100%);
	background: -moz-radial-gradient(50% 100%, circle, #70b6f2 0%, #54a3ee 50%, #54a3ee 50%, #1a62db 100%);
	background: -o-radial-gradient(50% 100%, circle, #70b6f2 0%, #54a3ee 50%, #54a3ee 50%, #1a62db 100%);
	background: -ms-radial-gradient(50% 100%, circle, #70b6f2 0%, #54a3ee 50%, #54a3ee 50%, #1a62db 100%);
	background: radial-gradient(50% 100%, circle, #70b6f2 0%, #54a3ee 50%, #54a3ee 50%, #1a62db 100%);
}

<div class="sample">あいうえお</div>

グラデーション(虹色)

あいうえお

サンプルソースを表示 

.sample {
	margin:20px;
	padding:5px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #f00), color-stop(0.16, #ff0), color-stop(0.33, #0f0), color-stop(0.51, #0ff), color-stop(0.67, #00f), color-stop(0.85, #f0f), color-stop(1.00, #f00));
	background: -webkit-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);
	background: -moz-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);
	background: -o-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);
	background: -ms-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);
	background: linear-gradient(to bottom, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);
}

<div class="sample">あいうえお</div>

表題つき

ここはタイトルです

あいうえお

サンプルソースを表示 

.sample {
	border: solid 1px #cccccc;
	position: relative;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	margin-top: 1em;
	padding: 0.5em;
}
.sample h4 {
	position: absolute;
	top: -0.5em;
	left: 1em;
	margin: 0;
	padding: 0 0.5em;
	color: #0055bb;
	font-weight: normal;
	background-color:#f7fdff; /*背景色にあわせます*/
	font-weight:bold;
}

<div class="sample">
<h4>ここはタイトルです</h4>
あいうえおかきくけこさしすせそ
</div>

表題つき+グラデューション

ここはタイトルです

あいうえお

サンプルソースを表示 

.sample {
	border: solid 1px #cccccc:
	position: relative:
	border-radius: 8px:
	box-shadow:0px 0px 10px 3px #ddeeff:
	-moz-border-radius: 8px:
	-webkit-border-radius: 8px:
	margin-top: 1em:
	padding:20px 10px 10px 10px:
	background: -webkit-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%):
	background: -moz-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%):
	background: -o-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%):
	background: -ms-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%):
	background: linear-gradient(to bottom, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%):
}
.sample h4 {
	position:absolute:
	top: -0.5em:
	left: 0.5em:
	margin: 0:
	padding: 0 0.5em:
	color: #0055bb:
	font-weight: normal:
	background-color:#f7fdff:
	font-weight:bold:
	border-radius:10px:
	box-shadow:0px 0px 10px 3px #fff:
}

<div class="sample">
<h4>ここはタイトルです</h4>
あいうえおかきくけこさしすせそ
</div>

表題つき+グラデューション

ここはタイトルです

あいうえお

サンプルソースを表示 

.sample {
	position: relative:
	background-color:#ddeeff:
	border-radius: 0px 15px 15px 15px / 0px 15px 15px 15px:
	-moz-border-radius: 0px 15px 15px 15px / 0px 15px 15px 15px:
	-webkit-border-radius:  0px 15px 15px 15px / 0px 15px 15px 15px:
	margin-top: 1em:
	padding:20px 10px 10px 10px:
	background: -webkit-linear-gradient(top, #ddeeff 0%, #ddeeff 50%, #eef9ff 100%):
}
.sample h4 {
	position:absolute:
	top: -1.0em:
	left: 0em:
	margin: 0:
	padding: 3px 10px:
	color: #0055bb:
	font-weight: normal:
	background-color:#ddeeff:
	font-weight:bold:
	border-radius:10px:
}

<div class="sample">
<h4>ここはタイトルです</h4>
あいうえおかきくけこさしすせそ
</div>