…nd:linear-gradient( 90deg 135deg 180deg , transparent #ff0000 #ffffff 5%, transparent #000000 #0000ff 5.25%, transparent #000000 #ffffff 5.5% 20% 50% ),linear-gradient(315deg,#ffffff 5%,#000000 5.25%,transparent 5.5%);}</style><div class="p…

…現」をradial-gradientで考えてみました。 ドッグイヤーもどき コード 欠点と対処法 ドッグイヤーもどき ドッグイヤーもどき コード <style>.dogy{width:280px;height:280px;padding:10px;background-image:conic-gradient(from 180deg,#eeeedd 0deg 270deg,#eeeedd00 271deg),radial-gradient(50% 30%,#eeeedd 99…

…ルな「linear-gradientで風景を描く」ものをツール化してみました。 linear-gradientで遊ぼう！ 使い方 linear-gradientで遊ぼう！ コード 使い方 色選択ボックスとスライダーのセットが９つ、並んでいます。 ここで指定された色がそのまま、「上から下に向かうlinear-gradient」に設定されたグラデーションが、下の枠に反映されます。 スライダーはそれぞれの位置指定（%）に該当します。 色選択やスライダーをいじると、リアルタイムに枠の…

…nd:linear-gradient(#aaaaee,#eeeeee 80%,#aaeeaa 81%,#88aa88) 0 0/100% 100%;}.waku>div{position:relative;width:100%;height:100%;transform-style:preserve-3d;perspective:600px;border:1px solid black;}.waku>div>div{position:absolute;width:50%;he…

…ge:radial-gradient(farthest-side,#aaffaa 99%,#aaffaa00 100%);background-repeat:no-repeat;float:left;animation:bnda 3s linear infinite;}</style><div class="bnd"> </div><p>文章</p><p>文章</p><p>文章</p><p>文章</p> 色々… コード中、 height:100px; の数値を変更すると、「ボ…

どうも！LSSです！！ 【ツール】簡易お絵描きアプリ【試作品＋】 - Little Strange Software の「線の引き方」を根本的に見直そうとしていたところ、「完成版には入れるつもりはないけどちょっと面白い機能」がたまたま出来てしまいましたｗ 闇に葬る前に、ちょっと他の人にも見てもらいたくて、晒してみます^^ お絵描きアプリ劣化版 操作説明 ちょっと面白い機能 どうしてこうなった お絵描きアプリ劣化版 線を引く 塗りつぶす 描画時に都度消去 パスを閉じる 操作説明…

…ge:radial-gradient(farthest-side,#ccccff 99%,#ccccff00 100%);background-repeat:no-repeat;animation:nazorzma 1.6s linear infinite;}</style><div class="nazorzm"> </div> なんなんでしょうね？これ スライム、というとしっくりくるでしょうか？ｗ コード中で、 width:280px;height:280px; の部分で…

…keyframesやgradientで、%指定で均等に分断したくなる事がよくあります（←自分だけ？）。 そんな時、「0,50,100」や「0,25,50,75,100」程度なら即座に分かりますが、さらにその半分、そしてさらにもう半分…となると、なかなか計算が面倒くさくなってくるので、この際、コードに転用しやすい形で出力してくれるツールを、と作ってしまいました。 リズミカルなアニメーションを目指して もっと書くと、keyframesアニメーションを作成する際に、４拍子系のリズム…

どうも！LSSです！！ 早速ですが、 little-strange.hatenablog.com で予告していた「いろは歌作成補助ツール」ができました！ いろは歌作成補助ツール 使い方 といっても… いろは歌作成補助ツール 使い方 いろは47文字＋「ん」の文字が書かれたコマが、いろは歌順に並んでいます。 それぞれが、マウスドラッグまたはスマホの指ドラッグで、緑色の盤面内で移動させる事ができます。 自由に並べかえて、オリジナルのいろは歌（？）を作るのに役立ててください！（需要が…

どうも！LSSです！！ 【ツール】簡易お絵描きアプリ【試作品】 - Little Strange Software に少し機能追加したバージョンです。 簡易お絵描きアプリ 使い方 試作品＋ゆえの謎仕様 ファイルとして保存、について現在判明している事 履歴機能の実装 簡易お絵描きアプリ 幅 : px 高 : px 使い方 グレーの格子模様の四角形がキャンバスです。 キャンバス上で、マウスの左ボタンを押しながらマウスを動かすか、スマホ・タブレット等のタッチ操作可能な端末では指また…

どうも！LSSです！！ JavaScriptによる筆圧感知のテストがてら、簡易ながらお絵描きアプリを作ってみました。 簡易お絵描きアプリ 使い方 コード イケてないところ だいぶ悩んだところ 簡易お絵描きアプリ 使い方 マウスドラッグ、またはタッチ（ペンでも指でも）で枠内に絵を描けます。タッチ操作の場合、筆圧感知に対応しています（お使いの端末が対応していた場合）。 枠下のメニューは左から「色変更」「全て消す」「ファイルとして保存」です。 「全て消す」は描いた絵が消えますが、一…

…nd:radial-gradient(farthest-side at 0% 100%,var(--brc) 99.9%,transparent 100%) 0 0/16.6% var(--brdw) no-repeat,radial-gradient(farthest-side at 50% 0,transparent 99.9%,var(--brc) 100%) 25% var(--brdw)/33.3% var(--brdw) no-repeat,radial-grad…

…d: linear-gradient(to top right,#ff000000 49.9%,#ff0000 50%) 1px 100%/50% 100px no-repeat,linear-gradient(to top left,#ff000000 49.9%,#ff0000 50%) 100% 100%/50% 100px no-repeat,linear-gradient(#ff0000ff 0% 3%,#ff000000 4% 8%,#ff0000ff 9% 17…

…小ネタ】conic-gradientで矢印を描いてみた - Little Strange Software で文中に埋め込む矢印 を作りましたが、ふと思いついて「でっかい矢印」を考えてみました。 でっかい下向き矢印！ コード コードを見やすく整形するとこんな感じ 画面幅に合わせて伸縮 でっかい下向き矢印！ コード <div style="height: 200px; background:linear-gradient(to top right,#ff000000 49.9%…

…oundプロパティやgradient関数を使う事でちょっとしたお絵描きを楽しむ事もできます。 backgroundプロパティもgradient関数も、自在に扱えるようになるまでには色々と飲み込まないといけないところが多くて、使い慣れていかないとなかなか意味を理解する事も難しいと思われます。 そこで、今回は解説を加えながら、CSSお絵描きの入門の助けになるかも？な記事を書いてみました。 まず、divタグを用意しましょう testクラスを装飾するCSSを書き始めます CSSコード…

…log.com little-strange.hatenablog.com では、多数のgradientを組み合わせて線を引き、それで囲んで枠を作ってみました。 当初思っていた以上に、（繰り返しを考えなければ）結構自由に線が引けるもので色々作ってみましたが、アレンジを加えてくださる方もおられる今、この「線の引き方」について手順をなぞって記事を書いてみるのもいいかな、と思ったりしています。 …またの機械にｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…！！ radial-gradientとlinear-gradientを駆使して、囲み枠を作ってみました。 本来お絵描き用途ではないCSSを強引にお絵描き風に使ってみると、こんな感じになります。 もこもこの雲 キャンディ リボン あとがき もこもこの雲 もこもこの雲 コード <style>.crd{width:300px;height:200px;padding:40px;background:radial-gradient(farthest-side at 50% 100%,…

…大量のlinear-gradient バクダンになりそこねた囲み枠 囲み枠、なんですが、どうもしっくりこない^^;バクダンと呼ばれる囲み枠を目指したはずでしたが…。 コード <style>.bkdn{height:300px;padding:30px;background:linear-gradient(to top right,transparent 48%,black,transparent 52%) 0 0/25% 20px no-repeat,linear-gradi…

…ng-linear-gradient(120deg,red,yellow,blue,red 10%) 0 0/1000% 100%;animation:rbwa 15s ease infinite;}</style><div class="rbw"> </div> さほど目新しいものはないサンプルですが^^; 以前の little-strange.hatenablog.com に近い見た目で、動く区切り線です。 記事構造は定型文ですが、コードについては新PCで手打ち。 ここま…

…ge:radial-gradient(farthest-side,#f8f8f8 0%,#dddddd 90%,#dddddd00 100%),radial-gradient(farthest-side,#f8f8f8 0%,#dddddd 90%,#dddddd00 100%),radial-gradient(farthest-side,#f8f8f8 0%,#dddddd 90%,#dddddd00 100%),radial-gradient(farthest-side,…

…ge:radial-gradient(farthest-side,#ffffff80 0%,#ffffff00 100%);background-size:var(--sz) var(--sz);animation:stardragonx 3.5s ease-in-out var(--d) infinite alternate,stardragony 1.07s ease-in-out var(--d) infinite alternate;}.stardragon div:…

…nd:radial-gradient(farthest-side,#ffffff 49%,#ffcc00 50%,#ffcc0000 100%) 50% 50%/80px 80px no-repeat;z-index:10;}.d3dz div:nth-child(1) ~ div{background-image:radial-gradient(farthest-side,var(--c1) 0%,var(--c2) 49%,var(--c3) 50%,var(--c4) …

…ng-linear-gradient(135deg,#000000 0% 49%,#00000000 50%,#000000 51% 100%),linear-gradient(#000000 0% 33%,#ffff88 66%,#000000 67% 100%);background-size:100% 100%,100% 300%;animation:shtstra 1.4s linear infinite,shtstrb 7s linear infinite;}</s…

…ge:radial-gradient(farthest-side,#444488 0%,#4444cc 49%,#0000ff 50%,#0000ff00 100%);background-repeat:no-repeat;animation:d3dzx 5s ease-in-out 2.5s infinite alternate,d3dzy 5s ease-in-out infinite alternate;}.d3dz div:nth-child(2){backgroun…

…ge:radial-gradient(farthest-side,#ffffff,#bbbbbb 39.9%,#4444ffdd 40%,#4444ff00 100%);background-repeat:no-repeat;animation:d3dax 2s ease-in-out infinite alternate,d3day 1.8s ease-in-out infinite alternate;}</style><div class="d3d"> </div> 遅…

…方で、radial-gradientを用いて「球っぽい円」を描く事はできますが、 これも３D回転させると平面の円である事が露呈してしまいます。 今回は実験的に「CSSの3D表現を使わず、疑似的に３Dっぽい動きを表現」する事に挑戦してみました。 疑似３D コード 遅延の値を変更してみるのも面白いかも 疑似３D コード <style>@keyframes d3dax{0%{background-position-x:0%;}100%{background-position-x:1…

…ng-linear-gradient(135deg,#000000 0px 9px,#00000000 10px 13px,#000000 14px 100px),repeating-linear-gradient(45deg,#000000 0px 132px,#00000000 133px 136px,#000000 137px 141px),linear-gradient(#ffffbb,#000000);animation:stardusta 20s linear i…

…nd:linear-gradient(#8888ff,#ccccff 69.9%,#884444 70%);}.mono{position:absolute;width:30px;height:30px;background:radial-gradient(farthest-side,#ff0000 99%,transparent 100%);left:200px;animation:rakka 3s linear infinite; }</style><div class=…

…d: linear-gradient(to top right,#ff000040,#ff000000),linear-gradient(0deg,#00ff0040,#00ff0000),linear-gradient(to top left,#0000ff40,#0000ff00);"> </div> ３つのグラデーションを重ねています to top right な赤 0deg な緑 to top left な青 赤・緑・青の３色、それぞれ角度の異なるグラデーションを半透…

…ge:radial-gradient(farthest-side at 25% 75%,#8888ff 5%,#8888ff00 6%,#8888ff 7%,#8888ff00 8%,#8888ff 9%,#8888ff00 10%,#8888ff 11%,#8888ff00 12%,#8888ff 13%),radial-gradient(farthest-side at 25% 75%,#ffeebb,#8888ff 100%)!important;background-…