CSS3で角丸と影の表現。【css3 preview】

前回のポスト「HTML5+CSS3で作られたテンプレート」でも、ちらっと紹介しましたが、Kruz-GraphixでもCSSで角丸を表現しています。
今回はCSS3で角丸とボックスの影の表現の説明します。
まぁ、ググれば（google）いくらでも出てきますがねww。

Example 1 – Rounded Borders

角の丸いボックスの例です。現在のMozilla、Firefox、およびSafariで動作します。

.radius{
	color: #FFFFFF;
	padding: 10px;
	background-color: #666;
	width: 280px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 20px;
}

分かりやすいように角のR角を10pxにしています。この辺は好みで変更してね。

Example 2 – Rounded Borders (個別に設定)

角の丸いボックスの例です。現在のMozilla、Firefox、およびSafariで動作します。

.sp-radius{
	color: #FFFFFF;
	padding: 10px;
	background-color: #666;
	width: 280px;
	-moz-border-radius-bottomright:10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-topleft:10px;
	-webkit-border-top-left-radius: 10px;

}

サンプルは、左上と右下だけ角丸にしてます。
本当に簡単に表現できますね。つづいては、BOXにドロップ＆シャドー（影の表現）をつけてみます。

Example 3 – Drop&Shadow

.drop-shadow{
	color: #FFFFFF;
	padding: 10px;
	-webkit-box-shadow: 10px 10px 25px #333;
	-moz-box-shadow: 10px 10px 25px #333;
	box-shadow: 10px 10px 25px #333;
	background: #999999;
}

ボックスに影がつきました。現在のMozilla、Firefox、およびSafariで動作します。

いままでの苦労はなんだったんだ？と言うくらいに簡単に、自由に表現できるようになってますね。後は、IEか・・・。

Share/Bookmark

One Response so far.