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

…nd:radial-gradient(at 70% 30%,#ffffff,#aaaaaa); } clr=[]; clr[0]=['black,black','darkred,red 20% 80%,darkred','darkblue,blue 20% 80%,darkblue','brown,yellow 20% 80%,brown']; clr[1]=['black,black','darkred,#ff000000 20% 80%,darkred','darkblu…

…+='linear-gradient(90deg,'+clr[mzn==myc?1:0][parseInt(mzn)-1]+') '+(5+59*j)+'px '+(59*i)+'px/54px 5px ,'; } mzn=mz.substr(30+i*5+j,1); if(mzn>'0'){ stxt+='linear-gradient('+clr[mzn==myc?1:0][parseInt(mzn)-1]+') '+(59*i)+'px '+(5+59*j)+'px/5…

…d: 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/5…

…e: 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 …

…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の背景を変えるだけだと、スマホで見た場合に表示される面積が少ないので、記事部…

…d: 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…

…e: 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,#00000…

…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の内容について説明 自動フォトギャラリー @keyframe…

…e: radial-gradient(farthest-side,#00ff0000 90%,#00ff00ff 99%,#00ff0000 100%); animation:cbig 5s linear infinite; background-repeat:no-repeat; padding:10px; color:#ffffff; } なんだかよく分からないものができました^^; コード <style>@keyframes cbig{0%{background-siz…

…e: radial-gradient(at 90% 50%,#ffffffff 7%,#ffffff00) ,repeating-conic-gradient(from 40deg at 90% 50%,#ffcccc,#fff0f0 30deg 42deg,#ffcccc 72deg)!important; color:#ffffff!important; font-size:27px!important; font-weight:bold!important; text-…

…ing-conic-gradient(from 45deg,#ffffff 0deg 60deg,#ddffdd 61deg 120deg) 0 0/50px 50px; } なんだか、CSSを色々いじっているうちに、謎の背景模様ができましたｗrepeating-conic-gradientひとつだけで作った背景ですが、それっぽくないところが面白いかな？と。薄い緑の『山』という字が傾いて並んでいるようでもあり、逆に白い部分も同じように繰り返し並んでいる、という繰り返し背景模様…

…e: 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 2…

…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:c…

…d: 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…

…nd:radial-gradient(at 70% 25%,#ffffff80 10%,#ffffff00 13%),radial-gradient(at 100% 0%,#00000020,#00000000),url(https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20220316/20220316225945.jpg) 0 0/100% 100%; border-radius:50%/70%…

…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; …

…nd:linear-gradient(160deg,#eeee00 20%,#ffffff 50%,#eeee00 80%); } ガチャを引く ソート mycards=[]; ranks=['N','R','SR']; cards=[ '吉賀”ピー”太郎','吉賀”ピー”太郎原桐','３年”ピー”組担任', '孤児ステラ','ステラ＝ブラウン','最終人間兵器STELA', 'カズちゃん','立倉一志','マンションオーナー', '双子姉ターナク','不死者ターナク','田…

…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%,…

…ge: 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 …

…d: 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 ,rad…

…d: 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%,#aaaaeef…

…d: 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%,#aaaaeef…

…nd:radial-gradient(farthest-corner,#ffffff 30%,#888888 100%); user-select: none; } やり直す maxw=6; ptnrpt=5; ptn='123456789'; masu=[]; nownum=0; gamen.addEventListener('click',clk,false); rbtn.addEventListener('click',init,false); init(); func…