CSS | いろいろなチェック柄背景のサンプル集

2021-06-13CSS,CSS デザイン サンプル集

CSS、チェック柄な背景デザインのサンプル集

CSSで作るいろいろなチェック柄な背景デザインのサンプルコード集です。

サンプルに使っている共通のHTMLコードです。

<div id="container">
</div>

チェッカー柄 白黒

シンプルな白黒チェッカー柄のCSS背景サンプルです。

See the Pen CSS checker pattern by yochans (@yochans) on CodePen.

#container {
	width:100%;
	height:300px;
	background: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%),
		linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%);
	background-color: #FFF;
	background-size: 24px 24px;
	background-position: 0 0, 12px 12px;
}

チェッカー柄 モノートン

モノートン色のチェッカー柄のCSS背景サンプルです。

See the Pen CSS flexbox gap by yochans (@yochans) on CodePen.

#container {
  width:100%;
  height:300px;
  background: linear-gradient(45deg, #212121 25%, transparent 25%, transparent 75%, #212121 75%),
    linear-gradient(45deg, #212121 25%, transparent 25%, transparent 75%, #212121 75%);
  background-color: #BDBDBD;
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
}

チェッカー柄 赤

赤系色のチェッカー柄のCSS背景サンプルです。

See the Pen CSS checker pattern(red) by yochans (@yochans) on CodePen.

#container {
	width:100%;
	height:300px;
	background: linear-gradient(45deg, #D50000 25%, transparent 25%, transparent 75%, #D50000 75%),
		linear-gradient(45deg, #D50000 25%, transparent 25%, transparent 75%, #D50000 75%);
	background-color: #EF9A9A;
	background-size: 24px 24px;
	background-position: 0 0, 12px 12px;
}

チェッカー柄 青

青系色のチェッカー柄のCSS背景サンプルです。

See the Pen CSS checker pattern(blue) by yochans (@yochans) on CodePen.

#container {
	width:100%;
	height:300px;
	background-color : #FFF;
	background-image:
		repeating-linear-gradient( 0deg,
			rgba(	 13,  71, 161, .6) 0px 6px, /* blue */
			rgba( 255, 255, 255, .6) 6px 8px, /* white */
			rgba(	 13,  71, 161, .6) 8px 10px, /* blue */
			rgba(	255, 214,   0, .6) 10px 12px, /* yellow */
			rgba(	 13,  71, 161, .6) 12px 18px, /* blue */
			rgba( 213,   0,   0, .6) 18px 34px /* red */
		),
			repeating-linear-gradient( 90deg,
			rgba(	 13,  71, 161, 1) 0px 6px, /* blue */
			rgba( 255, 255, 255, 1) 6px 8px, /* white */
			rgba(	 13,  71, 161, 1) 8px 10px, /* blue */
			rgba(	255, 214,   0, 1) 10px 12px, /* yellow */
			rgba(	 13,  71, 161, 1) 12px 18px, /* blue */
			rgba( 213,   0,   0, 1) 18px 34px /* red */
		);
}

タータン・チェック柄 赤

赤系色のタータン・チェック柄のCSS背景サンプルです。

See the Pen CSS Tartan check pattern(red) by yochans (@yochans) on CodePen.

	background-color : #FFF;
	background-image:
		repeating-linear-gradient( 0deg,
			rgba(	 13,  71, 161, .6) 0px 6px, /* blue */
			rgba( 255, 255, 255, .6) 6px 8px, /* white */
			rgba(	 13,  71, 161, .6) 8px 10px, /* blue */
			rgba(	255, 214,   0, .6) 10px 12px, /* yellow */
			rgba(	 13,  71, 161, .6) 12px 18px, /* blue */
			rgba( 213,   0,   0, .6) 18px 34px /* red */
		),
			repeating-linear-gradient( 90deg,
			rgba(	 13,  71, 161, 1) 0px 6px, /* blue */
			rgba( 255, 255, 255, 1) 6px 8px, /* white */
			rgba(	 13,  71, 161, 1) 8px 10px, /* blue */
			rgba(	255, 214,   0, 1) 10px 12px, /* yellow */
			rgba(	 13,  71, 161, 1) 12px 18px, /* blue */
			rgba( 213,   0,   0, 1) 18px 34px /* red */
		);

タータン・チェック柄 青

青系色のタータン・チェック柄のCSS背景サンプルです。

See the Pen CSS Tartan check pattern(blue) by yochans (@yochans) on CodePen.

#container {
	width:100%;
	height:300px;
	background-color : #FFF;
	background-image:
		repeating-linear-gradient( 0deg,
			rgba(  49, 110,  54, .6) 0px 6px, /* green */
			rgba( 255, 255, 255, .6) 6px 8px, /* white */
			rgba(  49, 110,  54, .6) 8px 10px, /* green */
			rgba( 213,   0,   0, .4) 10px 12px, /* red */
			rgba( 	0,  96, 100, .6) 12px 18px, /* green */
			rgba(  13,  71, 161, .6) 18px 34px /* blue */
		),
			repeating-linear-gradient( 90deg,
			rgba(  49, 110,  54, 1) 0px 6px, /* green */
			rgba( 255, 255, 255, 1) 6px 8px, /* white */
			rgba(  49, 110,  54, 1) 8px 10px, /* green */
			rgba( 213,   0,   0, 1) 10px 12px, /* red */
			rgba( 	0,  96, 100, 1) 12px 18px, /* green */
			rgba(  13,  71, 161, 1) 18px 34px /* blue */
		);
}

ギンガム・チェック柄 赤

赤系色のギンガム・チェック柄のCSS背景サンプルです。

See the Pen CSS gingham check pattern(red) by yochans (@yochans) on CodePen.

#container {
	width:100%;
	height:300px;
	background-color : #FFEBEE;
	background-image:
		repeating-linear-gradient( 0deg, rgba(198, 40, 40, .5) 0px 8px,	transparent 8px 16px),
		repeating-linear-gradient( 90deg, rgba(198, 40, 40, .5) 0px 8px,	transparent 8px 16px);
}

ギンガム・チェック柄 青

青系色のギンガム・チェック柄のCSS背景サンプルです。

See the Pen CSS gingham check pattern(blue) by yochans (@yochans) on CodePen.

#container {
	width:100%;
	height:300px;
	background-color : #B3E5FC;
	background-image:
		repeating-linear-gradient( 0deg, rgba( 13,  71, 161, .5) 0px 8px,	transparent 8px 16px),
		repeating-linear-gradient( 90deg, rgba( 13,  71, 161, .5) 0px 8px,	transparent 8px 16px);
}

ウィンドウ・ペン柄 赤

赤系色のウィンドウ・ペン柄のCSS背景サンプルです。

See the Pen CSS window pane check pattern(red) by yochans (@yochans) on CodePen.

#container {
	width:100%;
	height:300px;
	background-color : #ff0000;
	background-image:
		repeating-linear-gradient( 0deg, #ffc0cb 0px 1px,	transparent 1px 18px),
		repeating-linear-gradient( 90deg, #ffc0cb 0px 1px,	transparent 1px 18px);
}

ウィンドウ・ペン柄 青

青系色のウィンドウ・ペン柄のCSS背景サンプルです。

See the Pen CSS window pane check pattern(blue) by yochans (@yochans) on CodePen.

#container {
	width:100%;
	height:300px;
	background-color : #1A237E;
	background-image:
		repeating-linear-gradient( 0deg, #039BE5 0px 1px,	transparent 1px 18px),
		repeating-linear-gradient( 90deg, #039BE5 0px 1px,	transparent 1px 18px);
}

バーバリー・チェック柄

バーバリー・チェック柄のCSS背景サンプルです。

See the Pen CSS Burberry check pattern by yochans (@yochans) on CodePen.

#container {
	width:100%;
	height:300px;
	background-color : #FFF;
	background-image:
		repeating-linear-gradient( 0deg,
			rgba(   0,   0,   0, 0.4) 0px 4px, /* black */
			rgba( 255, 255, 255, 0.4) 4px 8px, /* white */
			rgba(   0,   0,   0, 0.4) 8px 12px, /* black */
			rgba( 255, 255, 255, 0.4) 12px 16px, /* white */
			rgba(   0,   0,   0, 0.4) 16px 20px, /* black */
			rgba( 209, 172, 118, 0.4) 20px 30px, /* wheat */
			rgba( 213,   0,   0, 0.4) 30px 32px, /* red */
			rgba( 209, 172, 118, 0.4) 32px 36px, /* wheat */
			rgba( 213,   0,   0, 0.4) 36px 38px, /* red */
			rgba( 209, 172, 118, 0.4) 38px 48px /* wheat */
		),
			repeating-linear-gradient( 90deg,
			rgba(   0,   0,   0, 1) 0px 3px, /* black */
			rgba( 255, 255, 255, 1) 3px 6px, /* white */
			rgba(   0,   0,   0, 1) 6px 9px, /* black */
			rgba( 255, 255, 255, 1) 9px 12px, /* white */
			rgba(   0,   0,   0, 1) 12px 15px, /* black */
			rgba( 209, 172, 118, 1) 15px 30px, /* wheat */
			rgba( 213,   0,   0, 0.8) 30px 31px, /* red */
			rgba( 209, 172, 118, 1) 31px 33px, /* wheat */
			rgba( 213,   0,   0, 0.8) 33px 34px, /* red */
			rgba( 209, 172, 118, 1) 34px 49px /* wheat */
		);
}

アーガイル・チェック柄

アーガイル・チェック柄のCSS背景サンプルです。

See the Pen CSS Argyle check pattern by yochans (@yochans) on CodePen.

#container {
	width:100%;
	height:300px;
	background-color : #FFF;
	background-image:
		repeating-linear-gradient( 60deg,
			rgba(	255, 214,   0, 1) 0px 1px, /* yellow */
			rgba(	 13,  71, 161, 0.5) 1px 21px, /* blue */
			rgba( 213,   0,   0, 0.5) 21px 41px /* red */
		),
			repeating-linear-gradient( -60deg,
			rgba(	255, 214,   0, 1) 0px 1px, /* yellow */
			rgba(	 13,  71, 161, 0.5) 1px 21px, /* blue */
			rgba( 213,   0,   0, 0.8) 21px 41px /* red */
		);
}

2021-06-13CSS,CSS デザイン サンプル集

Posted by Yousuke.U