CSS和紙(アイボリー)

目的

• 和紙のようにザラザラとしていて、優しい印象のテクスチャーをCSSだけで作りたい。

実行結果

解説

• 主張が強すぎない優しいテクスチャーなので背景素材として重宝します。

HTML

<div class="layout_8_1">CSS和紙(アイボリー)のテクスチャー</div>

CSS

.layout_8_1 {
	background-color: #FCFAF2;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 96%;
	min-height: 300px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	position: relative;
	overflow: hidden;
	z-index: 0;
}

.layout_8_1::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='washi-ultimate'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.12' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeDiffuseLighting in='noise' lighting-color='%23ffffff' surfaceScale='2.5'%3E%3CfeDistantLight azimuth='45' elevation='80'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23washi-ultimate)'/%3E%3C/svg%3E");
	background-size: 80px 80px;
	background-repeat: repeat;
	pointer-events: none;
	mix-blend-mode: multiply;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	content: "";
	position: absolute;
	opacity: 0.38;
	z-index: -1;
}