
コピペでできる。CSSだけで作る水玉模様(ドット柄)の背景パターン
背景に水玉模様があるだけでポップさや可愛らしさの要素を表現できます。
これは画像を使わずにCSSだけで作っています。
CSSの書き方
さっそく基本のコードをみていきましょう。
4つのbackground
プロパティのみで書きあげています。
body {
background-color: #fcfcfc;
background-image: radial-gradient(#eee 10%, transparent 20%), radial-gradient(#eee 10%, transparent 20%);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
}
水玉の大きさをカスタマイズ
水玉の大きさはbackground-size
で変更できます。
水玉をレンガのように交互に配置するにはbackground-position
の設定値をbackground-size
で設定したサイズの50%に設定します。
大きさ比較ができるようにいくつかのパターンをサンプルでご用意しています。
いずれもbackground-position
はbackground-size
で設定したサイズの50%です。