[装飾系]背景パターン ビンテージの壁紙風 パターン

CSS HTML
 

ビンテージの壁紙風 パターン

repeating-linear-gradient、linear-gradientを使って作るビンテージの壁紙風の背景パターンです。

browser:  65 11 20 
ニャン易度 
<div class="cp_bgpattern19"></div>
.cp_bgpattern19 {
	background-color: rgba(0,77,64,1);
	background-image:
	 radial-gradient(rgb(0,137,123) 4%, rgb(0,105,92) 9%, rgba(0,121,107,0) 9%),
	 radial-gradient(rgb(0,137,123) 4%, rgb(0,105,92) 9%, rgba(102,0,0,0) 9%),
	 radial-gradient(rgba(0,150,136 ,0.8) 20%, rgba(0,121,107,0) 100%),
	 radial-gradient(rgba(0,150,136 ,0.8) 20%, rgba(0,121,107,0) 100%),
	 radial-gradient(rgb(0,121,107) 35%, rgba(0,121,107,0) 60%),
	 radial-gradient(rgb(0,121,107) 35%, rgba(0,121,107,0) 60%),
	 radial-gradient(rgba(0,121,107 ,0.7) 0, rgba(0,121,107,0) 100%),
	 radial-gradient(rgba(0,121,107 ,0.7) 0, rgba(0,121,107,0) 100%),
	 linear-gradient(45deg, rgba(0,121,107,0) 49%, rgb(0,0,0) 50%, rgba(0,121,107,0) 70%),
	 linear-gradient(-45deg, rgba(0,121,107,0) 49%, rgb(0,0,0) 50%, rgba(102,0,0,0) 70%);
	background-position: 0 0, 50px 50px, 50px 0, 0 50px, 50px 0, 100px 50px, 0 0, 50px 50px, 0 0, 0 0;
	background-size: 100px 100px;
}

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?