repeating-linear-gradient、linear-gradientを使って作るビンテージの壁紙風の背景パターンです。
<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;
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@copypet_jp More Info