Speaking Design

Blogブログ

【コピペでカンタン】CSSだけで作れるドット(水玉)柄

【コピペでカンタン】CSSだけで作れるドット(水玉)柄

苦労してシームレスな画像を用意してなくても、スタイルシートだけでドット(水玉)が作れます!
サンプルもいくつか用意していますので、コピペでどうぞ。
CSSだけで作れるボーダー・ストライプ柄編もあります。

目次

ドット(水玉)柄の作り方

コピペでサクッと済ませたい方はこちらのCSSをどうぞ

各パラメータをいじると、色や水玉のサイズがカスタマイズできます。

div{
  background-image:radial-gradient(#DDD 5px, #FFF 5px);
  background-size:20px 20px;
}
CSSだけで作ったボーダーです

以下、ロジックを説明します。

ドット(水玉)のしくみをじっくり解説

現状、ドット柄を実装するスタイルシートは存在しないので、円形のグラデーション(radial-gradient)を工夫してボーダーに見せています。
ということでここからは、まず基本のグラデーションから始めて、少しずつ水玉柄に整えていきながら内容を確認していきます。

基本のグラデーション

グラデーションの実装には『background-image』を使います。『background-color』じゃないんですね。
例えば黒(#000)から白(#FFF)へ変わる円形グラデーションは、以下のような表記で実装することができます。

div{
  background-image:background-image:radial-gradient(#000, #FFF);
}
要素の中央から外へ、円形に切り替わる基本のグラデーション

radial-gradient(色1, 色2)のように、半角カンマ区切りで色を繋げていきます。3色以上のグラデーションも可能です。

グラデーション位置の変更

色指定の後にサイズに関する数値を追加することによって、グラデーションの切り替わり位置を指定することができます。
以下は、横半径50pxの位置で色1から色2に突然切り替えることで、輪郭のハッキリした円に見せています。

div{
  background-image:radial-gradient(#DDD 50px, #FFF 50px);
}
50pxで急に色を変えることによって、円に見えるグラデーション

グラデーションサイズの変更

『background-size』を使うと、グラデーションのサイズを指定することができます。
以下の例は、20*20pxの正方形内に半径5pxの円が入っているパターンです。
パターンは要素内を敷き詰めるようにが繰り返されるので、水玉柄になります。

div{
  background-image:radial-gradient(#DDD 5px, #FFF 5px);
  background-size:20px 20px;
}
20*20pxの正方形内に5*5pxの円が入っている水玉

これでドット(水玉)柄の完成です。

まとめ

これで、パターン柄用にシームレスな背景用画像を用意する手間から解放されますね。
CSSだけで作れるボーダー・ストライプ柄編と合わせて、是非ご活用ください。