みなさんこんにちは!おさかなです!
今回は「Polka Dot Generator」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・水玉模様・ポルカドットを生成したい方
・Webデザインを作成中の方
・コピペできるCSSデザインを探している方
「Polka Dot Generator」って何?
「Polka Dot Generator」とは、水玉模様・ポルカドットを生成できるツールのことです。丸の大きさや配置、カラーなど、かんたんなマウス操作のみでカスタマイズ!CSSコードのコピペで、すぐに実装できます!(いいね✨)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/c64f90146fdad4f4e8622c507027520e.jpg)
![](https://osakanav.com/wp-content/uploads/2022/12/dungeonmapdoodler-top-160x90.png)
実際に使ってみよう!
それでは早速サイトにアクセスしましょう!
![](https://osakanav.com/wp-content/uploads/2023/01/polka-1.png)
ページをスクロールすると、模様の「CSSソースコード」が確認できます。(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2023/01/polka-code-1.png)
カスタマイズしよう!
カスタマイズは「左側のパラメータ」を変更するだけでOK!(かんたん✨)
![](https://osakanav.com/wp-content/uploads/2023/01/gy97tWBEDDXKfAY1672645464_1672646093.png)
丸の数や大きさ、影の有無などを設定できます!
![](https://osakanav.com/wp-content/uploads/2023/01/polka-set.gif)
「Volume」を小さくした場合は、こんな感じ。
![](https://osakanav.com/wp-content/uploads/2023/01/polka-small-1.png)
「Volume」を大きくした場合。(丸部分が、背景っぽくも見えますね〜)
![](https://osakanav.com/wp-content/uploads/2023/01/polka-big-1.png)
「Tempo」を小さくした場合。(ダイナミックな模様に👍)
![](https://osakanav.com/wp-content/uploads/2023/01/polka-boll-1.png)
「Tempo」を大きくした場合は、細かい模様になりました!(おお!)
![](https://osakanav.com/wp-content/uploads/2023/01/polka-ten-1.png)
「Tipsiness」をつけると、ボヤけたライトのような雰囲気に🍷
![](https://osakanav.com/wp-content/uploads/2023/01/polka-lights-1.png)
「Style」は、modern(モダン)・traditional(古風)の2種類から選べます。(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2023/01/polka-up-1.png)
「Oompah」をオンにすると、影がつきます!
![](https://osakanav.com/wp-content/uploads/2023/01/polka-pop-1.png)
カラーは、パレットまたはRGBで指定可能です。(この色好き〜)
![](https://osakanav.com/wp-content/uploads/2023/01/polka-dark-1.png)
![](https://osakanav.com/wp-content/uploads/2022/12/underline-generator-top-160x90.png)
ランダム生成
いい感じのデザインができないときは、「Improvise!」をクリック!(ポチっと)
![](https://osakanav.com/wp-content/uploads/2023/01/gy97tWBEDDXKfAY1672645464_1672645499.png)
すると、このように模様を「ランダムで生成」してくれます。
![](https://osakanav.com/wp-content/uploads/2023/01/polka.gif)
(これチョコミントっぽくてかわいい🍫)
![](https://osakanav.com/wp-content/uploads/2023/01/polka-tyoko-1.png)
デザインイメージが湧かない時は、サポートしてくれることでしょう!(お願いします😂)
![](https://osakanav.com/wp-content/uploads/2023/01/polka-qute-1.png)
(ひと休み💤)
コードをコピーしよう!
カスタマイズが完了したら、右下の「Copy」ボタンをクリック!
CSSコードがコピーされるので、実装したい場所に貼り付ければOKです。(わーい🍀)
![](https://osakanav.com/wp-content/uploads/2023/01/anlOap8MJUIDnMK1672646646_1672646658.png)
↓実際にコピーしたコードはこちら
/* Use these custom variables... */
:root {
--polka-bg-image:
radial-gradient(rgb(255, 255, 255) 30%, transparent 30%),
radial-gradient(rgb(255, 255, 255) 30%, transparent 30%);
--polka-bg-position: 0px 0px, 104px 104px;
--polka-bg-size: 208px 208px;
--polka-bg-color: rgb(106, 11, 11);
}
/* ...or add this class to an element */
.polka {
background-image:
radial-gradient(rgb(255, 255, 255) 30%, transparent 30%),
radial-gradient(rgb(255, 255, 255) 30%, transparent 30%);
background-position: 0px 0px, 104px 104px;
background-size: 208px 208px;
background-color: rgb(106, 11, 11);
}
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
ナビまる増殖すれば、ドット柄できるなっ☆
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
やかましいわ!笑
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2022/10/flexboxfroggy-top-160x90.png)