CSS3 badge

スタイルシートだけでウェブページの背景にストライプ状の模様を施すテクニック［CSS3 Background Stripes］を紹介します。

まずは実際のサンプルをご覧ください。

CSS3 Background Stripes : https://on-ze.com/demo/css3-background-stripes/

使用したコードは次のようになっています。

body {
background-image: linear-gradient(
	-45deg,
	#f5eeed 25%,
	#f4e2de 25%,
	#f4e2de 50%,
	#f5eeed 50%,
	#f5eeed 75%,
	#f4e2de 75%,
	#f4e2de
);
background-size: 40px 40px;
background-attachment: fixed;
}

仕組みを解説します。

通常「background-image: linear-gradient();」はグラデーションを描くために使います。
今回のようにストライプ状に見えるのは、ちょっとしたアイデアの賜物。

まずは「-45deg」で要素を斜めに回転。

続いて色を指定していくワケですが、普通に記述すると単純なグラデーションになってしまします。
グラデーションには色の始点と終点がありますが、それを逆手に取って、始点と終点の色を同じにして、ストライプ柄を作っていきます。

background-image: linear-gradient(
	-45deg,	// ストライプの角度
	#f5eeed 25%,	// 1つ目の色の終点
	#f4e2de 25%,	// 2つ目の色の始点
	#f4e2de 50%,	// 2つ目の色の終点
	#f5eeed 50%,	// 3つ目の色の始点
	#f5eeed 75%,	// 3つ目の色の終点
	#f4e2de 75%,	// 4つ目の色の始点
	#f4e2de	// 4つ目の色の終点
);

コレでストライプ柄に描画されるワケですね。
なお上記「linear-gradient」の引数内は、わかりやすく改行していますが通常は1行にまとめて大丈夫です。

background-image:linear-gradient(-45deg, #f5eeed 25%, #f4e2de 25%, #f4e2de 50%, #f5eeed 50%, #f5eeed 75%, #f4e2de 75%, #f4e2de);

こんな感じで1行にまとめたほうがスッキリしますね。

CSS3 Background Stripes : https://on-ze.com/demo/css3-background-stripes/

コピペして簡単に使えますので、ぜひご利用ください。