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

まずはストライプ、チェック、ボーダーなどの柄を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エフェクトをうまく利用し、画像の使用を出来るだけ減らすことで、
ブラウザやサーバの負担も軽減するとともにユーザーにも優しいサイトへと繋がっていく気もします。

ご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

画像を使用せずにCSSのみで作るストライプ、チェック、ボーダーなどの柄や、ボックスの角を折り曲げた様な背景エフェクト。

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner