【Webデザイン】水玉・ポルカドット生成ジェネレーターとは？

テクノロジー

2023.01.03

みなさんこんにちは！おさかなです！

今回は「Polka Dot Generator」について、書いていこうと思います！

それでは、レッツゴー！！！！！

想定読者
・水玉模様・ポルカドットを生成したい方
・Webデザインを作成中の方
・コピペできるCSSデザインを探している方

「Polka Dot Generator」って何？
実際に使ってみよう！

「Polka Dot Generator」って何？

「Polka Dot Generator」とは、水玉模様・ポルカドットを生成できるツールのことです。丸の大きさや配置、カラーなど、かんたんなマウス操作のみでカスタマイズ！CSSコードのコピペで、すぐに実装できます！(いいね✨)

CSS Polka Dot Generator

Generate polka dot patterns using CSS custom variables for background images. No JS required.

【無料】フリーハンドで「ゲームマップ」が作れる【Dungeon Map Doodler】とは？

みなさんこんにちは！おさかなです！今回は「Dungeon Map Doodler」について、書いていこうと思います！それでは、レッツゴー！！！！！想定読者・2Dゲームマップ作成ツールを探している方・デジタル上でも手...

実際に使ってみよう！

それでは早速サイトにアクセスしましょう！

ページをスクロールすると、模様の「CSSソースコード」が確認できます。(ふむふむ…。)

カスタマイズしよう！

カスタマイズは「左側のパラメータ」を変更するだけでOK！(かんたん✨)

丸の数や大きさ、影の有無などを設定できます！

「Volume」を小さくした場合は、こんな感じ。

「Volume」を大きくした場合。(丸部分が、背景っぽくも見えますね〜)

「Tempo」を小さくした場合。(ダイナミックな模様に👍)

「Tempo」を大きくした場合は、細かい模様になりました！(おお！)

「Tipsiness」をつけると、ボヤけたライトのような雰囲気に🍷

「Style」は、modern（モダン）・traditional（古風）の2種類から選べます。(ふむふむ…。)

「Oompah」をオンにすると、影がつきます！

カラーは、パレットまたはRGBで指定可能です。(この色好き〜)

【マウス操作のみ】マーカー下線、CSSコードが生成できちゃうツール

みなさんこんにちは！おさかなです！今回は「Underline Generator」について、書いていこうと思います！それでは、レッツゴー！！！！！想定読者・「マーカー下線」デザインの、CSSコード作りたい方・デザイ...

ランダム生成

いい感じのデザインができないときは、「Improvise!」をクリック！(ポチっと)

すると、このように模様を「ランダムで生成」してくれます。

(これチョコミントっぽくてかわいい🍫)

デザインイメージが湧かない時は、サポートしてくれることでしょう！(お願いします😂)

(ひと休み💤)

コードをコピーしよう！

カスタマイズが完了したら、右下の「Copy」ボタンをクリック！
CSSコードがコピーされるので、実装したい場所に貼り付ければOKです。(わーい🍀)

↓実際にコピーしたコードはこちら


/* 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);
}