…-gradientとconic-gradientを重ねた「楕円形の吹き出し」を作ってみました。 吹き出しについては過去に、 【CSS】吹き出しCSSについて解説してみます！ - Little Strange Software 【CSS】色違い吹き出し - Little Strange Software 【CSS】CSSシェイプ…なんてものが存在するのを初めて知りました - Little Strange Software でも試みていましたが、「楕円形」となると…見た目がナチュ…

…ckground: conic-gradient(red 0% 43%,blue 43% 66%,yellow 66% 85%,green 85% 100%);"><div style="position: absolute; left: 120px; top: 60px; background: #ffffff80;">情熱 43%</div><div style="position: absolute; left: 40px; top: 150px; background…

…ckground: conic-gradient(red 0% 43%,blue 43% 66%,yellow 66% 85%,green 85% 100%);"> </div> わずかこれだけのコードで、円グラフが作れます^^ コード解説 分かりやすいように改行を入れてみました↓。 <div style="width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(red 0% 43…

…0px 60px ,conic-gradient(from 45deg at 80% 100%,#000000 45deg,transparent 45deg) 0px 0px/60px 60px ,conic-gradient(from 270deg at 20% 100%,#000000 45deg,transparent 45deg) 0px 0px/60px 60px ,conic-gradient(from 170deg,#000000 20deg,transpar…

…; txtb+=',conic-gradient(from 90deg at '+(100-hsize.value*2)+'% 0%,'+hcol1.value+' 45deg,transparent 45deg) 0px 0px/'+hrpt.value*2+'px '+hrpt.value*2+'px\n'; txtb+=',conic-gradient(from 225deg at '+(hsize.value*2)+'% 0%,'+hcol1.value+' 45de…

…ckground: conic-gradient(transparent 0deg 90deg,#000000 90deg 180deg,transparent 180deg 270deg,#ffffff 270deg 360deg) 0px 0px/40px 40px ,linear-gradient(45deg,#ffffff 0% 12.5%,#000000 12.5% 25%,#ffffff 25% 37.5%,#000000 37.5% 62.5%,#ffffff …

…ckground: conic-gradient(transparent 0deg 90deg,#000000 90deg 180deg,transparent 180deg 270deg,#ffffff 270deg 360deg) 0px 0px/40px 40px ,repeating-linear-gradient(135deg,#ffffff 0% 25%,#000000 25% 50%) 0px 0px/20px 20px ,#ffffff; } 千鳥格子 失敗例…

…ガ模様・改善版 で、conic-gradientを使う事で複雑な繰り返し模様が作れそう、と味をしめました。 四角ベースの模様ならかなり自由に作れそうですが、conic-gradientらしさを活かしつつ、違う繰り返し模様も「ずらし」を使う事で実現できるのでは？と試みたところ、こんな感じのものが出来ました。 亀の甲羅のような模様 コード 模様の構造について 亀の甲羅のような模様 .turtle{ padding:0.6em; background: repeating-coni…

…指定について ２つのconic-gradientでレンガ模様を作る仕組み conic-gradient凄い！ あとがき レンガ模様 .conicrenga{ height:150px; font:120% bold; padding:0.6em; background: conic-gradient(at 5% 45%,#ccaaaa 90deg,transparent 90deg) 0px 0px/40px 40px ,conic-gradient(at 5% 45%,#c…

…undImage='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);}…

…repeating-conic-gradient(#00400000 45deg,#00400080 90deg 180deg); background-size:15px 15px; } .wood .cbs1,.wood .cbs2,.wood .cbs5,.wood .cbs6{ background-image:repeating-linear-gradient(90deg,black 3%,brown 5% 20%,black 23%); } .wood .cbs3…

…nd-image: conic-gradient(from 93deg at -20% -10%,#000000,#ff0000,#ff8800,#ffff00,#ffffff,#ffffff,#ffff00,#ff8800,#ff0000,#000000 55deg); } Little Strange Software コード <style>.fire{width:300px;height:184px;padding:10px;font-size:120%;font-we…

…repeating-conic-gradient(from 45deg,#ffffff,#99bbff,#ffffff 180deg); background-size:40px 40px; padding:0.6em; font-size:120%; font-weight:bold; } こういうキラキラの背景を考えてみました。もっと色を増やしたり色々試みていたんですが…結局シンプルな方が美しい？ コード <style>.kirakira{width:300px;heig…

…repeating-conic-gradientでやったらどうなるかな？と。 Dear サンタさん そして、repeating-radial-gradientだったら… Dear サンタさん …うん、linear-gradientでやるのが無難ですねｗｗｗ ちなみに、欲しがっているものは Intel Corei9 プロセッサー 12900K 3.2GHz（ 最大 5.2GHz ） 第12世代 LGA 1700 BX8071512900K 少々（どころじゃなく）手が出せませんｗ…

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

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

…nd-image: conic-gradient(blue,yellow,red);"> </div> 以上、３つの例は赤太字部分以外は全く同じ文字列です。 グラデーションの種類がどれであれ、 background-image:○○-gradient(blue,yellow,red); という指定だけでグラデーションを背景に描く事ができます。 色を付け足してみましょう 先ほどの例は、「blue,yellow,red」と３つの色をカンマ区切りで並べていました。 この色数は２つ以…

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

…も！LSSです！！ conic-gradient を使って絵を描いてみました。 絵のほとんどは「conic-gradient」で完結しますが、最後の仕上げには「linear-gradient」と「radial-gradient」も参加してもらいます^^ 先に完成したものをお見せすると、こんな感じのものが出来上がりました！ #gz6{ width:300px; height:485px; background-image:radial-gradient(circle at 85…

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

…ating-')+'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=tx…

…生成ツール」として「conic-gradient生成ツール」を作ってみました。 conic-gradient生成ツール 使い方 あとがき conic-gradient生成ツール 繰り返し回数 コード cl=['#000000','#ffffff']; ctrw(); gw(); ctr.addEventListener('input',fctr,false); ctrrng.addEventListener('input',gw,false); ctradd.addEvent…

…repeating-conic-gradient(#ccffcc,#000000,#ffcccc,#000000,#ccccff,#000000,#ccffcc 120deg); animation:bgcnca 15s linear 0s infinite; } .i2bgcnc{ position:relative; padding:0.6em; color:white; text-shadow:1px 1px 0px black; } ネオンのよう？それとも立体的な折り…

どうも！LSSです！！ この間、このブログで「冗談でしかないレイアウト」として、思いついたはいいけど何のメリットがあるか分からない「卍レイアウト」について書きました。 「何のメリットがあるか」は分かりませんが、背景について「卍レイアウトならでは」のデザインを思いつき、その実現に向けて色々考えていたところで、「縦横比がどうであろうと常に対角線を描く方法」が必要となり、見つけたのが↓の記事となります。 …その過程で ↑また面白いものを見つけてしまい、脱線もしつつｗ 今回ようやく「…

…昨日と、 続けざまにconic-gradientネタを書いていました。 が、このconic-gradient、調べものをしていた時に偶然見つけたもので、元々調べていたのはlinear-gradientについてだったりしますｗ CSSで↓のような対角線を扱うのが、予めサイズが決まっているとborderやlinear-gradient+角度指定でも可能なところ、サイズが可変（例えば画面サイズの幅100%とか）の時には極端に難しかったりします。 これが、↓のように、linear-g…

…repeating-conic-gradient(from 0deg at 50% 50%,black,brown,yellow,white,yellow,brown,black 36deg);/*開始角度0deg 横50% 縦50%の位置を中心とする、36degごとに繰り返すきんきらきんのきーんなconicグラデーション*/ background-size:6000px 4000px;/*幅6000px 高さ4000px という、バカでかい仮想の画像サイズ*/ animat…

…あったようです！！ conic-gradientのテスト repeating-conic-gradient という事は、こんな事もCSSで出来ちゃいますね！ あとがき conic-gradientのテスト .conictest{ background-image:conic-gradient(#ff8888,#ffff88,#8888ff,#ff8888); width:300px; height:200px; } conic-gradient コード <style>.con…