Studio
Happyvalley

CSSで
水玉模様を作る

画像を使用しないで
水玉模様や格子模様を
CSSで作成

image: CSSで水玉模様を作る
Toplabo
Polkadot by CSS

CSSで水玉模様を作る際の基本的な設定方法を解説します。

2021/07/24

解説

基本は放射グラデーションradial-gradient()。
  • 基本のコード

    仮想矩形に対して20%の大きさの水玉を設定するスタイルシート

    .polka {
        background-image: radial-gradient(#edeaf2 20%, rgba(255,255,255,0) 24%);
        background-size: 40px 40px;
        background-position: 0px 0px;
    }
    基本の設定

    放射グラデーションの位置は何も指定しないとデフォルトでオブジェクトの中心。使用色は最低2色。その混じり具合をパーセントで指定します。
    注意が必要なのは円形なので100%の位置はオブジェクトが完全にぬりつぶされる位置だということ。
    オブジェクトの縦横を超えてしまうということです。

    https://studio-happyvalley.com/wp/wp-content/uploads/fig_1-1.png基本の考え方https://studio-happyvalley.com/wp/wp-content/uploads/fig_2-1.png円形の場合は45°が基準https://studio-happyvalley.com/wp/wp-content/uploads/fig_3-1.png接する値は71%
    パーセント位置の考え方

    パーセントの位置の考え方は何パーセントまでスタート色か、何パーセントから次の色か、ということになります。その間の色が混色状態になります。
    例えば radial-gradient(blue 20%, red 80%)の場合下記左のようになります。

    https://studio-happyvalley.com/wp/wp-content/uploads/fig_5-1.pngグラデーション設定値1https://studio-happyvalley.com/wp/wp-content/uploads/fig_4.pngグラデーション設定値2
    水玉の場合、グラデは不要なので radial-gradient(blue 50%, red 50%)のように同じパーセントにします。 まあ、好みで多少のグラデはあってもいいかも。
    水玉を並べる方法

    水玉を並べる方法は、背景画像と同じ考え方です。
    ユニット単体のオブジェクトは仮想矩形として考えbackground-sizeで設定します。デフォルトでりピートされるのであえてリピートを設定する必要はないです。
    開始位置も同じくbackground-positionを使います。
    同じ設定の水玉を2種類ずらして設定するとしゃれた感じになるので、開始位置を50%ずらして並べるといいでしょう。

https://studio-happyvalley.com/wp/wp-content/uploads/Image-4.png

基本形:
40pxの正方形に20%の水玉
サンプル

https://studio-happyvalley.com/wp/wp-content/uploads/Image-5.png

条例を守っている水玉
80pxの正方形に20%の水玉
条例を守っている水玉 : サンプル

https://studio-happyvalley.com/wp/wp-content/uploads/Image-6-1.png

密集した水玉
80pxの正方形に2内接する水玉
密集した水玉 : サンプル

https://studio-happyvalley.com/wp/wp-content/uploads/Image-8.png

ソーシャルディスタンスな大玉達
ソーシャルディスタンスな大玉達 : サンプル

『CSSで水玉模様を作る』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら