TAGS :

最近よく見かけるCSS3を使った背景を彩るエフェクト。
今までは画像を使って作成していた模様をCSSのみでサイト上に表現するもの。
今回はそんなCSS3エフェクトを２種類紹介してみます。

まずはストライプ、チェック、ボーダーなどの柄をCSSのみで形成する方法を紹介している「Checkerboard, striped & other background patterns with CSS3 gradients」。

Checkerboard, striped & other background patterns with CSS3 gradients


≫Checkerboard, striped & other background patterns with CSS3 gradients « Lea Verou

CSS3のグラデーション「gradient」を使って、ストライプ、チェック、ボーダーのそれぞれの柄を表現しています。


≫DEMO：Stripes & other patterns with CSS3 — no images

もの凄く複雑なことをしているわけではなく、グラデーションの距離とそれに対しての背景色をうまく配置して模様を形作っています。

例えばピンクのチェック柄は以下のようなプロパティで形成されています。

◆CSS
.stripes {
	height: 250px;
	width: 375px;
	float: left;
	margin: 10px;
	-webkit-background-size: 50px 50px;
	-moz-background-size: 50px 50px;
	background-size: 50px 50px; /* Controls the size of the stripes */
	-moz-box-shadow: 1px 1px 8px gray;
	-webkit-box-shadow: 1px 1px 8px gray;
	box-shadow: 1px 1px 8px gray;
}

.picnic {
	background-color: white;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))), -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));
	background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
	background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
	background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
}

それぞれのプロパティを見るとなるほど、と思わされてしまいます。

続いては、画像を使わずにCSSのみで、角を折り曲げたような見た目を形成する「Pure CSS folded-corner effect」。

Pure CSS folded-corner effect


≫Pure CSS folded-corner effect – Nicolas Gallagher – Blog & Ephemera

デモページでは折り曲げた部分の影の具合いをさまざまなパターンを用意してあり、角丸のまま折り曲げることも可能になっています。


≫Demo: Pure CSS folded-corner effect – Nicolas Gallagher

こっちのCSS構成は少々複雑。
「:before」を使って「border」と「shadow」で見た目を構成しています。

◆CSS
.note {
	position:relative;
	width:30%;
	padding:1em 1.5em;
	margin:2em auto;
	color:#fff;
	background:#97C02F;
	overflow:hidden;
}

.note:before {
	content:"";
	position:absolute;
	top:0;
	right:0;
	border-width:0 16px 16px 0;
	border-style:solid;
	border-color:#fff #fff #658E15 #658E15;
	background:#658E15;
	-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
	-moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
	box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
	display:block; width:0; /* Firefox 3.0 damage limitation */
}

.note.rounded {
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
}

.note.rounded:before {
	border-width:8px;
	border-color:#fff #fff transparent transparent;
	-webkit-border-bottom-left-radius:5px;
	-moz-border-radius:0 0 0 5px;
	border-radius:0 0 0 5px;
}

これらのCSSエフェクトをうまく利用し、画像の使用を出来るだけ減らすことで、ブラウザやサーバの負担も軽減するとともにユーザーにも優しいサイトへと繋がっていく気もします。

ご参考までに。。。