[CSS]画像を使用せずに、背景をストライプやチェック柄にするスタイルシート

サイト構築 -CSS

Post on:2010年12月27日

sponsorsr

CSS3グラデーションを使用して、ストライプやチェック柄のパターンを描くスタイルシートを紹介します。

Checkerboard, striped & other background patterns with CSS3 gradients

[ad#ad-2]

対応ブラウザはFirefox 3.6+, Chrome, Safariです。
デモページでは画像を使用せずに、ストライプなど計6種類の背景パターンが紹介されています。

デモページ

[ad#ad-2]

スタイルシートは下記のようになります。

CSS：ストライプ

全てのベースとなる指定です。
L.8-10で、ストライプのサイズを指定します。

.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;
}

デモページ（当方作成）

CSS：水平ストライプ柄

.horizontal {
	background-color: #0ae;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
	background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
	background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
	background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

HTML：水平ストライプ柄

「stripes」と「horizontal」を使用します。

<div class="horizontal stripes"></div>

デモページ（当方作成）

CSS：垂直ストライプ柄

.vertical {
	background-color: #f90;
	background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
	background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
	background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
	background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

HTML：垂直ストライプ柄

「stripes」と「vertical」を使用します。

<div class="vertical stripes"></div>

デモページ（当方作成）

CSS：チェック柄

.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));
}