…に、 radial-gradientで描いた円で構成されたキャラなら手軽そう 考えてつめてみると、「８つの円」があれば表示位置すら変えず、「表示する・しない」「表示順の前後だけの調整」で要件は満たせるのでは？ と思い至り、それで実際に描いてみました。 歩くキャラクター コード 今回のサンプルでは 歩くキャラクター コード <style>@keyframes test1a{0%,50%{background:radial-gradient(5px 5px at 21px 23p…

どうも！LSSです！！ この時間まで、スイッチ迷路を触っていました。 キャラはできていないまま、テストプレイ（移動できてスイッチを変えられる）できるところまで行ったものの…スマホ対応がどうかな？とか試しているうちに、PCでも動かなくなり^^;;; 気づけばこの時間ですｗ ちと集中しすぎましたね^^;;;;; スクリプトの問題が解決してもキャラもまだなので、やはりちょっと先になりそうな感じです。 追記！なんだか解決しました…ので晒してしまおう ってなとこで、今回はこのへんで！ …

どうも！LSSです！！ 【実験】CSS、backgroundプロパティで迷路を描くテスト（の準備段階） - Little Strange Software 考えてる迷路案「スイッチ迷路」 - Little Strange Software と書いてきた「スイッチ迷路」、とりあえず「おおむねの描画」が出来たのを途中経過ですが晒してみます。 スイッチ迷路・描画案 まだ描いてないもの 今回の迷路 スイッチ迷路・描画案 まだ描いてないもの スタート地点、ゴール地点、迷路を歩むキャラを…

…nd:linear-gradient(black,black) 5px 0px/54px 5px ,linear-gradient(black,black) 64px 0px/54px 5px ,linear-gradient(black,black) 123px 0px/54px 5px ,linear-gradient(black,black) 182px 0px/54px 5px ,linear-gradient(black,black) 241px 0px/54px …

…ge:radial-gradient(25px 25px at 25px 25px,#ffffff 95%,#000000 99%,#00000000 100%),radial-gradient(20px 20px at 30px 55px,#ffffff 95%,#000000 99%,#00000000 100%);/*羽の描画 画像に置き換える場合は、background-image:url('画像ファイルアドレス');*/animation:0.5s ease inf…

…nd:linear-gradient( 0deg 30deg 90deg 120deg to top left to top right ,#000000,#804000,#ffff00,#ffffff,#ffff00,#804000,#000000) border-box padding-box content-box ; text-align: left center right ;">第二問です</div> 現在のコード 現在の選択肢から作ったコードは↓になります。（選…

…+='radial-gradient('+cr+'px '+cr+'px at '+ct+'px '+ct+'px,#ffffff30,#ffffff00) '+cpx+'% '+cpy+'%/'+cx+'px '+cy+'px repeat,';}document.body.style.background=bgtxt+'#aaaaff';</script> ついでに、記事部分の背景も透過 bodyの背景を変えるだけだと、スマホで見た場合に表示される面積が少ないので、記事部…

…nd:radial-gradient(15px 40px at 40px 50px,#ffffff 90%,#000000 99%,#00000000 100%),conic-gradient(from 200deg at 250px 420px,#ff0000 70deg,#ff000000 71deg) 40px -408px,conic-gradient(from 200deg at 250px 420px,#ffff00 70deg,#ffff0000 71deg) …

…ーキ コード 3つのgradientを重ねています あとがき チョコレートケーキ ChocoCake コード <div style="box-sizing: content-box; width: 100px; height: 100px; background: conic-gradient(from 60deg at 13px 50px,#372006 29.9deg,#37200600 30deg) -13px 0px, radial-gradient(100px 10…

…e: linear-gradient(90deg,#ff0000,#ff000000);"> </div><p> </p><div style="background-color: #ffff00; background-image: linear-gradient(90deg,#ff0000,transparent);"> </div><p> </p><div style="background-color: #ffff00; background-image: linea…

…す。 linear-gradient を用いた模様を作る際の%による指定についても書いていますので、gradient系の指定方法を これから覚えたい方にも参考になるかと^^ linear-gradientについて グラデーションに位置を指定してみます 対角線を指定する「to top right」の面白いところ 25%と75% 次に、色を「赤→透明→赤」にしてみます そして左右逆向きのlinear-gradientを重ねます ここで、background-sizeを指定してみま…

…の中で、conic-gradientを用いる事でレンガ模様・格子柄・市松模様を描ける、という事を書いていました。 conic-gradient や radial-gradient は、繰り返しパターンの模様を描く上で、background-sizeやbackground-positionと組み合わせるとなかなか自由度が高い模様を生み出せますが、その点では linear-gradient は「直線的」であるがゆえに作れる模様が限られていると感じています。 が、今回ふと、「 li…

…ge:radial-gradient(100% 100%,#000000 49%,#00000000 50%),radial-gradient(100% 100%,#000000 49%,#00000000 50%),conic-gradient(from 285deg at 140% 100%,#000000 9deg,#00000000 10deg),conic-gradient(from 75deg at -40% 100%,#000000 9deg,#00000000…

…ge: conic-gradient(from 40deg at 0% 50%,#ff444480 99deg,#ff444400 100deg); color: #ffffff;">重要</span>適宜、改行を入れるなどしておかないと上の行と重なってしまいます。 上記コードを丸ごとコピーして貼り付けてから、日本語部分を自由に書き換える、または赤太字部分だけをコピーして貼り付けて使う事ができます。 CSSの説明 display: inline-block; transfor…

…onとradial-gradientの組み合わせ【実験段階】では、うっかりbackground-positionの%指定のクセを忘れて難儀してしまいました^^; が、それはそれで面白い動きだったので、その失敗バージョンを元に何か作れないかな？と思いついたのが今回のネタになります。 自動フォトギャラリー コード ただし、ちょっと難点が… 難点その１ 縦横比 難点その２ 汎用性 一応、その「ややこしい」keyframesの内容について説明 自動フォトギャラリー コード <styl…

…ge:radial-gradient(farthest-side,#00ff0000 90%,#00ff00ff 99%,#00ff0000 100%);animation:cbig 5s linear infinite;background-repeat:no-repeat;padding:10px;color:#ffffff;}</style><div class="cbox">なんだかよく分からないものができました^^;</div> 当初やろうとしていた事 当初、やろう…

どうも！LSSです！！ いよいよ、神戸では桜が満開になりました^^ 桜満開！ スマホのSIM差し替え あと、kindleで漫画をポチりました 桜満開！ また、生田川の桜です^^もうこれ以上ないというほどに咲き誇っていますね！ スマホのSIM差し替え スマホの移行作業、GooglePlay上になくてどうしようもないアプリ以外は概ね移動。 あと２台めAndroid上の画像・動画ファイルなどもサルベージしたので…まだ１台め２台めともに全リセットをかけるのは躊躇っていますが、とりあえ…

…ing-conic-gradientひとつだけで作った背景ですが、それっぽくないところが面白いかな？と。薄い緑の『山』という字が傾いて並んでいるようでもあり、逆に白い部分も同じように繰り返し並んでいる、という繰り返し背景模様です。 コード <style>.yama{background:repeating-conic-gradient(from 45deg,#ffffff 0deg 60deg,#ddffdd 61deg 120deg) 0 0/50px 50px;}</st…

…ge:radial-gradient(at 90% 50%,#ffffffff 7%,#ffffff00),repeating-conic-gradient(from 40deg at 90% 50%,#ffcccc,#fff0f0 30deg 42deg,#ffcccc 72deg);color:#ffffff;font-size:27px;font-weight:bold;text-shadow:-1px -1px 2px #000000c0,1px 1px 2px #f…

…nd:radial-gradient(at 70% 25%,#ffffff80 10%,#ffffff00 13%),radial-gradient(at 100% 0%,#00000025,#00000000);border-radius:50%/70% 70% 30% 30%;box-shadow:-2px 3px 2px 0px #00000040;display:inline-flex;align-items:center;justify-content:center…

…nd:radial-gradient(at 80% 25%,#ffffff70 7%,#ffffff00 15%) border-box,radial-gradient(at 100% 0%,#00000025 5%,#00000008) border-box;font-weight:bold;user-select:none;transition:0.15s ease-out;}.aquabtn div:active{top:5px;left:1px;box-shadow:…

…nd:radial-gradient(at 70% 25%,#ffffff80 10%,#ffffff00 13%),radial-gradient(at 100% 0%,#00000020,#00000000),url(画像ファイルのURL) 0 0/100% 100%;border-radius:50%/70% 70% 30% 30%;box-shadow:-2px 3px 2px 0px #00000040;display:flex;align-items:center…

…nd:radial-gradient(at 70% 25%,#ffffff80 10%,#ffffff00 13%),radial-gradient(at 100% 0%,#00000020,#00000000);border-radius:50%/70% 70% 30% 30%;box-shadow:-2px 3px 2px 0px #00000040;display:flex;align-items:center;justify-content:center;user-s…

どうも！LSSです！！ 昨日の妄想記事、 【お題】わたしのコレクション をテーマにゲームを作ったら？【妄想】 に書いたうち、「7種類」「1/10でレア」「1/100でスーパーレア」という確率だけを実験してみるものを作ってみました。 …つまり、まだゲームでもなんでもないのですが、とりあえずその確率が実際に引いてみるとどの程度のものなのかを体感する実験です。 手持ち数の制限も設けていないので、無限に引けますｗ 無限ガチャ ネタ元 これにあとは… 無限ガチャ ガチャを引く ソート …

…nd:linear-gradient(90deg,#ff8888 0% 100%);animation:hitohula linear 1.5s infinite;}.foop{position:absolute;top:0px;left:0px;width:100%;height:100%;background:radial-gradient(80px circle at 35% 50%,#88ff8800 85%,#88ff88ff 85% 99.9%,#88ff8800…

…age:conic-gradient(from 120deg at 50% 66%,#ff8888 120deg,#ff888800 120deg),conic-gradient(from 300deg at 50% 29%,#ff8888 120deg,#ff888800 120deg),conic-gradient(from 300deg at 50% 31%,#ffcccc 120deg,#ffcccc00 120deg),conic-gradient(from 300…

…nd:radial-gradient(10px 10px at 50% 0%,#66666600 46%,#666666 50%,#dddddd 73%,#666666 96%,#66666600 100%) 11px 10px/22px 20px,radial-gradient(10px 10px,#66666600 46%,#666666 50%,#eeeeee 73%,#666666 96%,#66666600 100%) 0px 0px/22px 20px,radia…

…４つのradial-gradient 赤と青の波線 コード <style>.wavehr{height:30px;background:radial-gradient(20px 20px at 30px 38px,#eeaaaa00 70%,#eeaaaaff 75%,#eeaaaa00 80%,#eeaaaaff 85%,#eeaaaa00 90%,#eeaaaaff 95%,#eeaaaa00 100%) 0px 15px/60px 30px ,radial-gradie…

…nd:linear-gradient(30deg,#eeaaaa00 38%,#eeaaaaff 42%,#eeaaaa00 46%,#eeaaaaff 50%,#eeaaaa00 54%,#eeaaaaff 58%,#eeaaaa00 62%) 0 0/30px 30px,linear-gradient(-30deg,#aaaaee00 38%,#aaaaeeff 42%,#aaaaee00 46%,#aaaaeeff 50%,#aaaaee00 54%,#aaaaeeff…

どうも！LSSです！！ ちょっとまた謎な？ゲームを即興で作ってみました。 ナンバー☆ピッカー 遊び方 こういう、乱数で問題生成できるパズル 改善の余地 ナンバー☆ピッカー やり直す 遊び方 画面上にある数字の行から、全ての数字を取り除くゲームです。 画面上に「１」～「９」までの数字が並んだいくつかの行と、「next」で１つの数字を示した行があります。 「next」の数字は「次に取る数字」を示しています。 数字が並んだ行から「一番右」にある、「next」が示す数字をクリックで取…