CSS和紙(深緑)

目的

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

実行結果

解説

• 深緑の渋い色合いで、カッコいい背景素材として重宝します。

HTML

<div class="layout_8_2">CSS和紙(深緑)のテクスチャー</div>

CSS

.layout_8_2 {
	color: #FFFFFF;
	background-color: #2D4032;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 96%;
	height: 200px;
	padding-top: 30px;
	padding-right: 0px;
	padding-bottom: 30px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	position: relative;
	overflow: hidden;
	z-index: 0;
}

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