…ge='conic-gradient(#88ff88 '+grph+'deg,#000000 '+grph+'deg)';},false);/*自動スクロール*/scrlauto=0;scrlm.addEventListener('click',()=>{scrlauto++;scrlauto%=3;if(scrlauto>0){scrltm=setInterval(()=>{window.scrollBy(0,3*scrlauto)},100);}else{{clearIn…

…e='linear-gradient(90deg,#88ff88 '+a+'%,#000000 '+a+'%)';}</script> コード解説 まずスクリプト内１行目。 document.addEventListener('scroll',fscr,false); document（ページ）そのものに対してイベントリスナーを設定しています。 イベントの種類は'scroll'（スクロール）。 ページスクロールが行われるたびに、fscrという関数を呼び出します。 a=100-…

…ge:linear-gradient(#89cb9e 25%,brown 30%);}.weed .cbs3{background-color:#89cb9e;}.weed .cbs4{background-color:brown;}.snow div{border:1px solid #dddddd;border-radius:5px;}.snow .cbs1,.snow .cbs2,.snow .cbs5,.snow .cbs6{background-image:line…

どうも！LSSです！！ 今年も残すところあとわずかとなりました。 一年を振り返ると…だいぶCSSばかりやってたような気がしますｗ ある動画で、CSSで奇妙な動きを表現したものがあり（動画にはコードでてこず）、推測しながら劣化コピーを試みてみました。 SVGやJavaScript不使用で、CSS・HTMLのみでこういう表現が出来るんだなぁ、というところまでいけたものの…自分のオリジナリティがない＆使いどころが謎なのでこれから考えようかな、と^^; ってなとこで、今回はこのへんで…

…age:conic-gradient(from 93deg at -20% -10%,#000000,#ff0000,#ff8800,#ffff00,#ffffff,#ffffff,#ffff00,#ff8800,#ff0000,#000000 55deg);}</style><div class="fire">Little Strange Software</div> 「炎」に関わるのは一部分のみ 色々コード書いていますが、「炎」ぽさをめざしているのは、 backgroun…

…ng-linear-gradient(180deg,#448844 25%,#000000 30%);}.l1{transform-origin:0px 100px;transform:rotateY(270deg);z-index:9;}.l2{transform-origin:0px 100px;transform:translateZ(-200px) rotateY(270deg);z-index:7;}.l3{transform-origin:0px 100px;tr…

…ing-conic-gradient(from 45deg,#ffffff,#99bbff,#ffffff 180deg);background-size:40px 40px;padding:0.6em;font-size:120%;font-weight:bold;}</style><div class="kirakira">こういうキラキラの背景を考えてみました。<br />もっと色を増やしたり色々試みていたんですが…結局シンプルな方が美しい？</div> 赤太字部分は好…

…ge:radial-gradient(#ffffff40 2%,#ffffff00 6%),radial-gradient(#ffffff80 0%,#ffffff00 5%);background-position:0px 0px,200px 200px;background-size:400px 400px,300px 300px;}#scr1{animation:kaiten1 20s linear infinite;}#scr2{animation:kaiten2 2…

…ge:linear-gradient(#89cb9e 25%,brown 30%);}.weed .cbs3{background-color:#89cb9e;}.weed .cbs4{background-color:brown;}.stone div{border:1px solid #dddddd;background-color:#888888;border-radius:5px;}.water div{background-color:#0000ff80;}</st…

…ge:radial-gradient(closest-side,#888888ff 90%,#000000ff 95%,#00000000 100%),linear-gradient(90deg,#44cc44,#668866,#228822),linear-gradient(90deg,#44cc44,#668866,#228822);background-repeat:no-repeat;background-position:10% 115%,80% 0%,90% 0%…

…e: linear-gradient(to bottom right,#ffd900,#ffffff,#ffd900), repeating-linear-gradient(to bottom right,#cc0000 0px 20px,#00aa00 21px 40px);background-clip: content-box,padding-box;">Dear サンタさん<br /><br />今年のクリスマスプレゼントは<br />Core i9のCPUが欲しいで…

…す！！ conic-gradientを使って、矢印を描いてみました。 2021/12/1 コードちょっと修正 左矢印 上矢印 あとがき 左矢印 ここ見て！ コード <style>.arrowl{display:inline-block;background-image:conic-gradient(from 45deg at 0% 50%,#ff0000ff 0deg 90deg,#ff000000 90deg),conic-gradient(from 75deg at 0%…

…ge:radial-gradient(circle at 50% 50%,#ff0000ff 19%,#ff000000 20%);transform:translateZ(75px);}.cbs2{background-image:radial-gradient(circle at 75% 25%,#000000ff 10%,#00000000 11%),radial-gradient(circle at 25% 75%,#000000ff 10%,#00000000 11…

今週のお題「お気に入りの靴下」 どうも！LSSです！！ さて、はてなブログ今週のお題「お気に入りの靴下」ですが…。 元々、衣類にあまり頓着しない性分なもので、まして個性の出づらい「靴下」にお気に入りも何もありません^^; （上着などなら、例えばポケットが多いなどの機能性を求める事はあります） が、ちょっと最近思うところがありました。 昔々、昭和の時代に 世の中、どんどん便利に改善されていってますが… この問題についての対策を考えました 昔々、昭和の時代に 国民的人気漫画「サザ…

…！！ radial-gradient（円形グラデーション）をやたらと並べて、リアリティのない迫ってくるような虹を作ってみました。 コード <style>.bgrbw{width:300px;height:185px;border-radius:10px;background-color:#000000;background-image:radial-gradient(closest-side circle,#000000ff 99%,#00000000 100%),radia…

…age:conic-gradient(from 300deg,#88ffaaff 0deg,#88ffaa00 240deg);/*周囲を廻っているいる色と長さ*/padding:10px 20px 15px 0px;animation:wa1a 5s linear infinite;}.wa2{box-sizing:border-box;width:100%;height:100%;border-radius:50%;background-color:#ffffff;/*内…

…mage:radilgradientを駆使して、コードでサイコロの６つの目を描いてみます。 こういうのは一度作っておくと、色々使いまわせそうですね^^ １の目 ２の目 ３の目 ４の目 ５の目 ６の目 書き方は何通りか考えましたが… 早速、サイコロを転がしてみよう！ 色付きスケルトンダイス １の目 コード <style>.sai1{width:150px;height:150px;border-radius:5px;border:1px solid black;backgrou…

…ge:linear-gradient(#ffcccc00 90%,#ffccccff 100%),linear-gradient(90deg,#ffcccc00 90%,#ffccccff 100%)!important;background-size:10px 10px!important;}</style> というコードを入れると、こんな風に背景に10pxサイズのマス目が描かれる事になります。 コード解説 CSSのセレクタを article としています。 CSSのセレク…

…ラデーション、○○-gradient系は、できる事が多くて奥が深いです。 凝れば凝るほどコードが複雑になり、「分かりにくい」という印象を受けてしまう事も。 色々な事ができるがゆえに、色々やろうとすると難しい部分も出てきますが、「もっとも簡単なグラデーション」はとってもシンプルだったりします。 ごくシンプルなグラデーション例 色を付け足してみましょう 今回のまとめ ごくシンプルなグラデーション例 分かりやすい色で、「青→黄→赤」の順に変化するグラデーションを例に挙げてみます。 …

…今年は「conic-gradient」が使えます！ conic-gradientを使う事でも三角形を表現できるので、コードの書き方が変わってきそう。 ちょっと練習してみます。 コード <style>.midori{width:300px;height:300px;border:1px solid black;background-image:conic-gradient(at 50% 0%,#00880000 150deg,#008800ff 150deg 210deg,#0…

…す！！ conic-gradient を使って絵を描いてみました。 絵のほとんどは「conic-gradient」で完結しますが、最後の仕上げには「linear-gradient」と「radial-gradient」も参加してもらいます^^ 先に完成したものをお見せすると、こんな感じのものが出来上がりました！ 今回の記事内容は、この完成絵に至るまでの制作過程です。 はじめに、天と地があった そして山が生まれた 俺の後ろに道はできる 構図を意識してみる 東の空しらむ頃 月が綺麗…

…e='radial-gradient(farthest-side,#cccceeff 30%,#ccccee00 90%,#cccceeff 99%,#ccccee00 100%)';}else{ maru.style.backgroundImage='radial-gradient(farthest-side,#eeccccff 30%,#eecccc00 90%,#eeccccff 99%,#eecccc00 100%)';}}function gw(){//ゲームメイン…

どうも！LSSです！！ なにげなくAmazonを見ていると、ふと面白そうなおもちゃを見つけました。 フライングボール 対象年齢６歳以上 フライングボール FLYNOVA PRO ミニドローンおもちゃ 球状飛行ジャイロ フライングボール 360°回転 スピニング LEDライト 付き自動回避機能 超軽量 子供/大人向けギフト 誕生日ブーメランスピナーおもちゃプレゼント アップグレード - 青 FLYNOVA Amazon ボールのようでもあり、ドローンのようでもあり？ 中にプロペ…

…ちょっとconic-gradientを使った実験です。 スマホでは分かりにくいかもですが、この記事の画面、右上から光が差し込んでいるような効果を作ってみました。 実用性は…結構邪魔かも？なので、現段階では「実験」扱いです^^; 消す時はここから コード 消す方のコード あとがき 消す時はここから ↑のボタンを押すと効果が消えます。 コード まず、光が差し込む方のコード <style>#ray{position:fixed;top:0px;left:0px;width:100%…

…e: radial-gradient(farthest-side,#0000ff00 80%,#0000ffaa 90%,#0000ff00 100%);">かきくけこ</span> さしすせそ 青太字部分が、今回の〇を描くコード、赤太字部分が〇がのる文字部分になります。 コピペして青太字部分以外を書き換えて使う事ができます^^ クイズ さて、ここで問題です！ 2021年11月7日、「はてなブログ」は何周年を迎えたでしょうか？ １周年 １０周年 １００周年 ↑正解だと思うもの…

…e: linear-gradient(to top left,#ff000000 45%,#ff0000aa 50%,#ff000000 55%),linear-gradient(to top right,#ff000000 45%,#ff0000aa 50%,#ff000000 55%);">赤いバッテンがのる言葉</span> ↑をコピーして、赤文字部分を書き換えて使えます。 例えば、 あいうえお<span style="background-image: linear-…

…ge:linear-gradient(to bottom right,#aed58180 50%,#00000080 51%);padding:15px;text-shadow:3px 3px 0px #555555;} 「#blog-title-content」は、このタイトルや説明文を取り囲んでいるdivタグにつけられているidですね。 他に、以前から書いていたCSSで影響していそうなのは… #title a { position: relative; padding: …

…ge:linear-gradient(pink,red);background-clip:border-box; という２行を加えてみました。 「上から下に、ピンクから赤に変化するグラデーション」…なんですが…10px幅の枠線部分だけ、配色がおかしくなってます^^;（chromeの場合。他ブラウザだと違う可能性も？） コード <style>.bgtest2{display:inline-block;border-radius:50px;border:10px dotted b…

…')+'conic-gradient(';for(i=0;i<cl.length;i++){txt+=cl[i]+',';}txt+=cl[0]+(ctrrng.value=='1'?'':' '+(360/ctrrng.value)+'deg')+');\n';txt+='}\n';txt+='</style>\n';txt+='<div class="grdx"></div>\n';gamen.innerHTML=txt;cgamen.innerHTML=txt.repl…

…として「conic-gradient生成ツール」を作ってみました。 conic-gradient生成ツール 使い方 あとがき conic-gradient生成ツール 繰り返し回数 コード 使い方 上から順に、「繰り返し回数」のスライダー「色追加」ボタン「カラーパレット（最初は２つ）」「表示サンプル」「コード」が並んでいます。 ２つあるカラーパレットから色を選択すると、表示サンプルがその色によるグラデーションに変化し、同時にコードもそれに合わせたものに変更されます。 ２色だけで…