【CSSツール】水玉デザイナー【試作版】
どうも！LSSです！！
今回はCSSの水玉模様をデザインするツールを作ってみました。
※追記：【CSSツール】水玉デザイナー【試作版２】に改良版があります。
水玉デザイナー
使い方
設定部分を「全体的な設定」と「水玉個別設定」に分けています。
「全体的な設定」でボックス全体の幅や高さ、リピートする枠の幅や高さ、水玉の数、不透過度を調節できます。
「水玉個別設定」では、全体的な設定で指定した「水玉の数」分の、水玉の半径、位置を設定します。
最初にこのページを開いた時点では、水玉の半径は8px、位置は中央（50% 50%）で設定されています。
設定の下に、１枠分の水玉模様と、それをリピート配置したボックスが表示されていて、そのボックスを再現するためのコードが表示されています。
これらは「設定」の内容がリアルタイムに反映されています。
お気に入りの水玉模様が完成したら、「コード」の内容をコピーして、はてなブログのHTML編集画面に貼り付けると利用できますよ^^
作成例
例えばこんなのが作れます。
ちなみに↑の例は、「全体的な設定」で「水玉の数」を「12」にして、「水玉個別設定」を
水玉0:半径 6px－＋ 横位置 19%－＋ 縦位置 26%－＋
水玉1:半径 6px－＋ 横位置 22%－＋ 縦位置 36%－＋
水玉2:半径 4px－＋ 横位置 24%－＋ 縦位置 7%－＋
水玉3:半径 4px－＋ 横位置 36%－＋ 縦位置 15%－＋
水玉4:半径 4px－＋ 横位置 42%－＋ 縦位置 25%－＋
水玉5:半径 4px－＋ 横位置 43%－＋ 縦位置 41%－＋
水玉6:半径 6px－＋ 横位置 69%－＋ 縦位置 76%－＋
水玉7:半径 6px－＋ 横位置 72%－＋ 縦位置 86%－＋
水玉8:半径 4px－＋ 横位置 74%－＋ 縦位置 57%－＋
水玉9:半径 4px－＋ 横位置 86%－＋ 縦位置 65%－＋
水玉10:半径 4px－＋ 横位置 92%－＋ 縦位置 75%－＋
水玉11:半径 4px－＋ 横位置 93%－＋ 縦位置 91%－＋
のようにしました。
「猫の足跡」コード
<div style="background-color:lightblue;width:300px;height:200px;background-size:50px 50px;background-image:radial-gradient(circle 6px at 19% 26%,#ffffffff 99%,transparent 0%),radial-gradient(circle 6px at 22% 36%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 24% 7%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 36% 15%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 42% 25%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 43% 41%,#ffffffff 99%,transparent 0%),radial-gradient(circle 6px at 69% 76%,#ffffffff 99%,transparent 0%),radial-gradient(circle 6px at 72% 86%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 74% 57%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 86% 65%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 92% 75%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 93% 91%,#ffffffff 99%,transparent 0%);"></div>
あと、以前のせていた、くまちゃん。再掲します。
水玉0:半径 8px－＋ 横位置 25%－＋ 縦位置 30%－＋
水玉1:半径 4px－＋ 横位置 15%－＋ 縦位置 17%－＋
水玉2:半径 4px－＋ 横位置 35%－＋ 縦位置 17%－＋
水玉3:半径 8px－＋ 横位置 75%－＋ 縦位置 80%－＋
水玉4:半径 4px－＋ 横位置 65%－＋ 縦位置 67%－＋
水玉5:半径 4px－＋ 横位置 85%－＋ 縦位置 67%－＋
「くまちゃん」コード
<div style="background-color: lightblue; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 8px at 25% 30%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 15% 17%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 35% 17%,#ffffffff 99%,transparent 0%),radial-gradient(circle 8px at 75% 80%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 65% 67%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 85% 67%,#ffffffff 99%,transparent 0%);"> </div>
制作のきっかけ
さじさん(id:conasaji)の上記記事、コメント欄にて
さじ (id:conasaji)
ＬＳＳ (id:little_strange)さま
需要があるのかは甚だ謎です（笑）これをもうちょっとお洒落にして飾り系にも出来るなあ、と思いました。画像と違い好みで色変えられるのは大きいですね！
大変だったのが位置の数値指定で。。ドット画のCSS生成アプリとかあったらいいのにとな〜と思いました（笑）
とありましたので、「位置の数値指定」だけ特化したツールを作ってみたわけですｗ
ボックスの飾り（角丸・枠線・背景色）や水玉の色などの指定は省略してしまいましたので「試作版」としておきますｗ
7/26追記！
iPhoneではcircle atとグラデーションの色名の後はpxでは正常表示されず、%だと表示された
旨、教えていただきました！
LSSがWindows＋Androidユーザーなので、異なる環境でのバグ報告はありがたいです！
さじさん、ありがとうございました^^
ので、急遽ツールを改訂し、%指定に修正しました。
それに伴い、
改訂前：水玉のデフォルト値 半径・位置はランダム
改訂後：水玉のデフォルト値 半径8px・位置は中央
に変更しています。
また、作成例を作り直す必要が生じたため、
猫の足跡とか、やってみたーい(*^。^*)
— なる (@narusan311) 2020年7月26日
を、イメージしたものを作りました！ｗ
7/27追記！
再び、iPhoneでの表示不具合から、グラデーション部分の調整を行いました！
…ついでに、またもサンプルをひとつ思いついたのでのっけておきますｗ
逆転の発想「ひし形」コード
<div style="background-color:lightblue;width:300px;height:200px;background-size:50px 50px;background-image:radial-gradient(circle 29px at 50% 50%,#ffffffff 99%,transparent 0%);"></div>
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
