…nd-image: conic-gradient(from 180deg,#eeeedd 0deg 270deg,#eeeedd00 271deg), radial-gradient(50% 30%,#eeeedd 99%,#eeeedd00 100%), radial-gradient(30% 50%,#eeeedd 99%,#eeeedd00 100%), radial-gradient(50% 50%,#ccccdd 99%,#ccccdd00 100%); } ドッグ…

…repeating-conic-gradient(#dddddd 0deg 90deg,#cccccc 91deg 180deg) 0 0/20px 20px;} 線を引く 塗りつぶす 描画時に都度消去 パスを閉じる mf=false; hst=[]; hsti=0; lns=[]; cvx=cnvs.getContext('2d'); evX=e=>(e.type.substr(0,5)=='touch'?e.changedTouches[0]:e).pageX-windo…

…repeating-conic-gradient(#668877 0deg 15deg,#667788 16deg 30deg) 0 0/30px 30px; } #gamen div{ position:absolute; box-sizing:border-box; border-radius:5px; border:3px outset #cccccc; background-color:#bbbbbba0; text-align:center; z-index:1; …

…repeating-conic-gradient(#dddddd 0deg 89.9deg,#cccccc 90deg 180deg) 0 0/20px 20px;} 幅 : px 高 : px hst=[]; hsti=0; sx=0; sy=0; cnvx=cnvs.getContext('2d'); evX=e=>Math.floor(e.pageX-window.pageXOffset-cnvs.getBoundingClientRect().left); evY=e…

…repeating-conic-gradient(#dddddd 0deg 89.9deg,#cccccc 90deg 180deg) 0 0/20px 20px;} sx=0; sy=0; cnvx=cnvs.getContext('2d'); tmer=cnvs.getBoundingClientRect(); //タッチ操作 cnvs.addEventListener('touchstart', (e)=>{ sx=e.touches[0].pageX-tmer.lef…

…、 【CSS小ネタ】conic-gradientで矢印を描いてみた - Little Strange Software で文中に埋め込む矢印 を作りましたが、ふと思いついて「でっかい矢印」を考えてみました。 .arrowl{ display:inline-block; background-image: conic-gradient(from 45deg at 0% 50%,#ff0000ff 0deg 90deg,#ff000000 90deg), conic-gradie…

…-gradientやconic-gradientもあります。 一方向に変化していくグラデーションを作る「linear-gradient」は、角度を指定しなかった場合は「上から下へ」変化するグラデーションになります。 今回は単純に内容を「red,blue」としたので、「上から下に、赤から青に徐々に変化するグラデーション」となりました。 グラデーションの位置とサイズを指定します .test3{ border:1px solid black; height:200px; backg…

…に不規則っぽい形状のconic-gradientを「極薄」に透過した色で重ねています。 コード <div style="padding: 10px; background: repeating-conic-gradient(from 200deg at 60% 60%,#ffffff20 0deg 59.9deg,#eeee8820 60deg 120deg) 0 0/30px 10px ,linear-gradient(to bottom right,white,light…

…Sです！！ 以前、「conic-gradient」の存在を初めて知り、びっくりした時の記事。 little-strange.hatenablog.com 勢いでいくつか試しに作ったコードを書いていましたが、その中の「集中線」をちょっとだけ改善してみました。 集中線 コード 変更点 集中線 .concentration{ padding:15% 15%; background: radial-gradient(farthest-side,#ffffff 75%,#ffffff0…

…う試みです。 今回、conic-gradientを色々いじっているとたまたま出来上がったので、久しぶりの「きんきらきんのきーん」最新作を公開しますｗ クセが強すぎる黄金背景 コード コード中、赤太字部分だけが クセが強すぎる黄金背景 黄金背景 コード <div style="width: 300px; height: 160px; background: conic-gradient(from 270deg,#eedd88 89.9deg,transparent 90deg)…

…いい！ …のを更に、conic-gradientを用いると四辺の中で更にグラデーション変化を入れる事ができます。 ついでに背景色をアニメーションで変化させて、様々な色に合う事を確認しています。 border-imageとconic-gradient コード outsetの場合 四辺別々に色設定した場合 ただし、今回のconic-gradient版には欠点が… border-imageとconic-gradient @keyframes bgca{ 0%,20%,100%{ba…

…nd-image: conic-gradient(from 150deg at 50% 50%,#cccc44 59.9deg,#cccc4400 60deg) ,conic-gradient(from 150deg at 50% 50%,#cccc44 59.9deg,#cccc4400 60deg) ,conic-gradient(from 330deg at 50% 50%,#4444cc 59.9deg,#4444cc00 60deg) ,conic-gradient…

…ackground:conic-gradient(at 150px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 15px 0/160px 80px,conic-gradient(at 140px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 25px 30px/160px 80px,conic-gradient(at 150px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 50px …

…ckground: conic-gradient(at 150px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 15px 0/160px 80px, conic-gradient(at 140px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 25px 30px/160px 80px, conic-gradient(at 150px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 50p…

…se-in-out infinite; と、再生時間を7秒・5秒・3秒と互いに倍数とならない３つの秒数をそれぞれに指定する事で、縦・横・奥にバウンドする動きに変化を持たせた感じになっています。 linear、radialときたら… conic-gradient でも、こんな感じの事ができないかな？と思いましたが…特にこれっぽいキーワードもないっぽい？？（角度指定に「右上」とか指定できたら面白そうですが…） ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…repeating-conic-gradientがfromの角度指定を変更する事で、思いがけないような模様の変化をもたらすのが面白いです^^ 【CSS】謎の背景模様『山』【小ネタ】 - Little Strange Software 今回はその「repeating-conic-gradientの模様変化」を手軽に体験できるツールを作ってみました。 repeating-conic-gradientによる背景模様生成ツール 使い方 repeating-conic-gradient…

…repeating-conic-gradient(from 25deg,#999999 0deg 90deg,#888888 91deg 180deg) 0 0/23px 23px repeat'; gamen.style.background=stxt; msg.innerHTML=''; if(mz.substr(60+myy*5+myx,1)>'1' && mz.substr(60+myy*5+myx,1)!=myc){ msg.innerHTML=clr[3][par…

…00 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) 40px -380px ,conic-gradient(from 200deg at 250px 430px,#0000ff 70deg,#0…

…ckground: conic-gradient(from 60deg at 13px 50px,#372006 29.9deg,#37200600 30deg) -13px 0px, radial-gradient(100px 100px at -86px 100px,#372006 99%,#37200600 100%) 86px -50px, linear-gradient(180deg,#2c120700 48%,#2c1207 52% 63%,#85660f 64%…

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

…000 50%) ,conic-gradient(from 285deg at 140% 100%,#000000 9deg,#00000000 10deg) ,conic-gradient(from 75deg at -40% 100%,#000000 9deg,#00000000 10deg) ,conic-gradient(from 115deg at 30% 10%,#000000 7deg,#00000000 8deg 150deg,#000000 151deg 1…

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

…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-shadow:-1px -1px 2px #000000c0,1px 1px 2px #ffffffc0!im…

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

…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 #ffffffc0; } 桜の花、開く季節に… コード <style>.hnbr{border-radi…

…nd-image: 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…

…、</p> 赤と青の線ですが、本当は… 線が途中で赤→青に変わっていますが、本当は「赤三本線と青三本線が交差してる感じ」のものを作ってみたかった…のが、繰り返しを考慮するとだいぶ難しそう^^;;; gradient系の無制限繰り返しは、自分はだいぶ慣れてきた感じもあるのですが、radial-gradientやconic-gradientに比べ、linear-gradientはかなり手ごわい印象がありますｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…ckground: conic-gradient(from 90deg at 24px 24px,#2d1906 90deg,transparent 90deg) 13px 28px ,conic-gradient(from 0deg at 33px 32px,#00000040 45deg,#ffffff80 45deg 90deg,transparent 90deg) ,conic-gradient(from 90deg at 33px 48px,#00000080 45…

…und-image:conic-gradient(#cceecc 90deg,transparent 90deg),conic-gradient(from 180deg,#cceecc 90deg,transparent 90deg); background-size:50px 50px; animation:wga linear 20s infinite; } なんだかよくわからないものを作ってみました。いやぁ、以前からなんとなく「ウィーン、ガシャンって感じのCSSを作って…

…shadowは割と役割がはっきりしているのに対し、filter:drop-shadowは描かれたものの形を認識して、いい感じに影を作ってくれますね^^ ちなみに、今回の実験台に使ったのは、 little-strange.hatenablog.com ですが、吹き出しの尖った部分をconic-gradientからradial-gradientに変えてみました。他に、楕円部分にグラデーションをかけてみたりも。 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^