CATEGORY

CSS

【CSS】radial-gradient を使って、CSS で水玉の背景を描いてみよー

3,910 PV

つい最近知った、実は CSS グラデーションは円形グラデーションもちゃんとあって、それ使うと水玉模様が描けるんだぜ！ってお話。

さっそく使い方ですが、

[HTML]
<div class="dot1"></div>

[CSS]
.dot1 {
  width: 480px;
  height: 180px;
  background: #556270;
  background-image: radial-gradient(circle farthest-side, #ff6b6b 20%, transparent 20%, transparent 100%);
  background-size: 60px 60px;
  background-position: 0 0;
}

結果

radial-gradient 自体の細かい説明は、以下のサイトでも参照してください。

CSS3による放射状（円形）グラデーション | CSS3逆引き | Webサイト制作支援 | ShanaBrian Website

水玉模様を描くコツとしては、

① radial-gradient の色の切り替え部分を計算しやすい数値にする。
今回は 20% で区切ってるので、正方形の中心から 1/5 をピンク、それ以外が透明って感じです。

②上記①の比率で割り切れる background-size を指定する。
60px*60px の 20% なので、直径 12px のピンクの玉が描かれます。

③ background-position は、玉の描画位置。
今回だと 60px*60px のイエローの玉を中心に描画した正方形のタイルの左上を、どの部分から並べ始めるかという指定になります。radial-gradient 自体にもグラデーションの中心の指定はあるのですが、それしちゃうと玉じゃなくなっちゃうので background-position で移動するようにしましょう。

以上のようなことを気にしながら、後はひたすらイイ感じになるように数値をいじるだけです。

応用版として、もう少し実際の水玉に近くなるように調整したものも載せておきます。

[HTML]
<div class="dot2"></div>

[CSS]
.dot2 {
  width: 480px;
  height: 180px;
  background: #556270;
  background-image: radial-gradient(circle farthest-side, #FF6B6B 40%, transparent 40%, transparent 100%), radial-gradient(circle farthest-side, #4ECDC4 25%, #C7F464 25%, #C7F464 40%, transparent 40%, transparent 100%);
  background-size: 50px 50px, 50px 50px;
  background-position: 0 0, 25px 25px;
}

結果

それではみなさま、いい水玉ライフを～♪

CATEGORY : CSS

GO TOP