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

テクノロジー
スポンサーリンク

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

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

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

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

「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);
}
伝わるデザインの基本 増補改訂3版 よい資料を作るためのレイアウトのルール
Amazon.co.jp: 伝わるデザインの基本 増補改訂3版 よい資料を作るためのレイアウトのルール eBook : 高橋 佑磨, 片山 なつ: Kindleストア
おさかな
おさかな

ナビまる増殖すれば、ドット柄できるなっ☆

ナビまる
ナビまる

やかましいわ!笑

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

【CSS】FlexBoxの使い方が学べるサイト【FLEXBOX FROGGY】とは?
みなさんこんにちは!おさかなです!今回は「FLEXBOX FROGGY」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・FlexBoxをマスターしたい方・Webサイト作成・Webデザインに...
おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。紆余曲折あり、現在はライターとして活動中。IT技術、サブカルチャーから、シナリオまで色々書きます。
SAOのユウキが好きです!

おさかなをフォローする
タイトルとURLをコピーしました