CSSで指定する見出しデザイン　radial-gradient　ドット（水玉）の背景

見出しに共通の基本CSS

.box0, .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{
font-weight:bold;
padding:10px 20px;
margin:10px 0px;
}

　

ドット（水玉）の背景を作る時は円グラデーションのradial-gradientを使う。

background-size: 20px 20px;
→敷き詰める背景１マス分のサイズ。縦横同じなので水玉が正円になる。

　

background-image: radial-gradient(#ffbfbf 20%, transparent 0), radial-gradient(#ffbfbf 20%, transparent 0);
→radial-gradientの()内は、
グラデーションの開始カラーと位置(半径）、終了カラーと位置(半径）。
実際にはグラデーションさせないので終了はtransparent 0を指定。
　
→20%の位置までは水玉の色、その外側は透明で背景色が見えている状態。
　
→水玉のサイズは、背景1マスのサイズと
グラデーション開始位置＝半径の組み合わせで決まる。

→background-image（背景画像）として複数を指定すると重ねて表示される。
　
→同じ背景画像を２回指定しているが↓で位置をずらして互い違いにする。
　
background-position: 0 0, 10px 10px;　
→２つの背景画像それぞれの位置を指定。
1マスのサイズの半分ずつずらしてきれいな水玉に。

　

１マスのサイズ　20px　半径　20%

.box0{
border:1px solid #ffbfbf;	
background: #ffffcc;
background-size: 20px 20px;
background-image: radial-gradient(#ffbfbf 20%, transparent 0), radial-gradient(#ffbfbf 20%, transparent 0);
background-position: 0 0, 10px 10px;
}

１マスのサイズ　30px　半径　20%

.box1{
border:1px solid #ffbfbf;	
background: #ffffcc;
background-size: 30px 30px;
background-image: radial-gradient(#ffbfbf 20%, transparent 0), radial-gradient(#ffbfbf 20%, transparent 0);
background-position: 0 0, 15px 15px;
}

１マスのサイズ　30px　半径　30%

.box2{
border:1px solid #BFF9FF;	
background: #ffffcc;
background-size: 30px 30px;
background-image: radial-gradient(#BFF9FF 30%, transparent 0), radial-gradient(#BFF9FF 30%, transparent 0);
background-position: 0 0, 15px 15px;
}

水玉の色を交互に変えてみた。（１マスのサイズ　30px　半径　30%）

.box3{
border:1px solid #BFF9FF;	
background: #ffffcc;
background-size: 30px 30px;
background-image: radial-gradient(#BFF9FF 30%, transparent 0), radial-gradient(#ffbfbf 30%, transparent 0);
background-position: 0 0, 15px 15px;
}

水玉の色は同じで半径をそれぞれ30%、20%に変えてみた。（１マスのサイズ30px）

.box4{
border:1px solid #BFF9FF;	
background: #ffffcc;
background-size: 30px 30px;
background-image: radial-gradient(#BFF9FF 20%, transparent 0), radial-gradient(#BFF9FF 30%, transparent 0);
background-position: 0 0, 15px 15px;
}

水玉の色もサイズも交互に変えてみた。
（背景画像の指定を増やして、色数を増やすことも可能。）

.box5{
border:1px solid #BFF9FF;	
background: #ffffcc;
background-size: 30px 30px;
background-image: radial-gradient(#BFF9FF 20%, transparent 0), radial-gradient(#ffbfbf 30%, transparent 0);
background-position: 0 0, 15px 15px;
}

　
　

バリエーション♪