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

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

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

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

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

1. チェッカー柄白黒
2. チェッカー柄モノートン
3. チェッカー柄赤
4. チェッカー柄青
5. タータン・チェック柄赤
6. タータン・チェック柄青
7. ギンガム・チェック柄赤
8. ギンガム・チェック柄青
9. ウィンドウ・ペン柄赤
10. ウィンドウ・ペン柄青
11. バーバリー・チェック柄
12. アーガイル・チェック柄

チェッカー柄白黒

シンプルな白黒チェッカー柄の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 */
		);
}

CSS デザインサンプル集,CSS

Posted by Yousuke.U