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;
→敷き詰める背景1マス分のサイズ。縦横同じなので水玉が正円になる。

 

background-image: radial-gradient(#ffbfbf 20%, transparent 0), radial-gradient(#ffbfbf 20%, transparent 0);
→radial-gradientの()内は、
グラデーションの開始カラーと位置(半径)、終了カラーと位置(半径)。
実際にはグラデーションさせないので終了はtransparent 0を指定。

 
→20%の位置までは水玉の色、その外側は透明で背景色が見えている状態。
 
→水玉のサイズは、背景1マスのサイズと
グラデーション開始位置=半径の組み合わせで決まる。

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

 

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

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;
}
CSSで指定する見出しデザイン radial-gradient ドット(水玉)の背景

1マスのサイズ 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;
}
CSSで指定する見出しデザイン radial-gradient ドット(水玉)の背景

1マスのサイズ 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;
}
CSSで指定する見出しデザイン radial-gradient ドット(水玉)の背景

水玉の色を交互に変えてみた。(1マスのサイズ 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;
}
CSSで指定する見出しデザイン radial-gradient ドット(水玉)の背景

水玉の色は同じで半径をそれぞれ30%、20%に変えてみた。(1マスのサイズ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;
}
CSSで指定する見出しデザイン radial-gradient ドット(水玉)の背景

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

.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;
}

 
 

バリエーション♪

radial-gradient ドット(水玉)の背景
radial-gradient ドット(水玉)の背景
radial-gradient ドット(水玉)の背景
radial-gradient ドット(水玉)の背景
radial-gradient ドット(水玉)の背景