…d: linear-gradient(135deg,#ffffff 5%,#000000 5.25%,transparent 5.5%), linear-gradient(315deg,#ffffff 5%,#000000 5.25%,transparent 5.5%); } #ans{font-size:150%;color:red;} <style>.photo{position:relative;display:inline-block;padding: 0% 2% 1…

…現」をradial-gradientで考えてみました。 ドッグイヤーもどき コード 欠点と対処法 ドッグイヤーもどき .dogy{ width:280px; height:280px; padding:10px; background-image: conic-gradient(from 180deg,#eeeedd 0deg 270deg,#eeeedd00 271deg), radial-gradient(50% 30%,#eeeedd 99%,#eeeedd00 100…

…ルな「linear-gradientで風景を描く」ものをツール化してみました。 linear-gradientで遊ぼう！ 使い方 linear-gradientで遊ぼう！ #gamen{width:280px;height:400px;border:1px solid black;} コード ctr.addEventListener('input',gw,false); gw(); function gw(){ txt='linear-gradient('; for(i=0;…

…nd:linear-gradient(#aaaaee,#eeeeee 80%,#aaeeaa 81%,#88aa88) 0 0/100% 100%; } .waku>div{ position:relative; width:100%; height:100%; transform-style:preserve-3d; perspective:600px; border:1px solid black; } .waku>div>div{ position:absolute; …

…ge:radial-gradient(farthest-side,#aaffaa 99%,#aaffaa00 100%); background-repeat:no-repeat; float:left; animation:bnda 3s linear infinite; } ボールが跳ね続けます。 そして、float:left;を指定しているため、それ以降の文章がこのように回り込むカタチになります。 float:left;の一行を削除すると、横に文章が並ぶ事がなくなります…

…ing-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-window.page…

…ge:radial-gradient(farthest-side,#ccccff 99%,#ccccff00 100%); background-repeat:no-repeat; animation:nazorzma 1.6s linear infinite; } コード <style>@keyframes nazorzma{0%,87.6%,100%{background-position:0 0;}12.5%,25%,37.5%{background-position:…

…keyframesやgradientで、%指定で均等に分断したくなる事がよくあります（←自分だけ？）。 そんな時、「0,50,100」や「0,25,50,75,100」程度なら即座に分かりますが、さらにその半分、そしてさらにもう半分…となると、なかなか計算が面倒くさくなってくるので、この際、コードに転用しやすい形で出力してくれるツールを、と作ってしまいました。 リズミカルなアニメーションを目指して もっと書くと、keyframesアニメーションを作成する際に、４拍子系のリズム…

…ing-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; user-s…

…ing-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=>Math…

…ing-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.left; sy=…

…d: radial-gradient(farthest-side at 0% 100%,var(--brc) 99.9%,transparent 100%) 0 0/16.6% var(--brdw) no-repeat, radial-gradient(farthest-side at 50% 0,transparent 99.9%,var(--brc) 100%) 25% var(--brdw)/33.3% var(--brdw) no-repeat, radial-gr…

…d: linear-gradient(to top right,#ff000000 49.9%,#ff0000 50%) 1px 100%/50% 100px no-repeat,linear-gradient(to top left,#ff000000 49.9%,#ff0000 50%) 100% 100%/50% 100px no-repeat,linear-gradient(#ff0000ff 0% 3%,#ff000000 4% 8%,#ff0000ff 9% 17…

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

…oundプロパティやgradient関数を使う事でちょっとしたお絵描きを楽しむ事もできます。 backgroundプロパティもgradient関数も、自在に扱えるようになるまでには色々と飲み込まないといけないところが多くて、使い慣れていかないとなかなか意味を理解する事も難しいと思われます。 そこで、今回は解説を加えながら、CSSお絵描きの入門の助けになるかも？な記事を書いてみました。 まず、divタグを用意しましょう testクラスを装飾するCSSを書き始めます CSSコード…

…log.com little-strange.hatenablog.com では、多数のgradientを組み合わせて線を引き、それで囲んで枠を作ってみました。 当初思っていた以上に、（繰り返しを考えなければ）結構自由に線が引けるもので色々作ってみましたが、アレンジを加えてくださる方もおられる今、この「線の引き方」について手順をなぞって記事を書いてみるのもいいかな、と思ったりしています。 …またの機械にｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…！！ radial-gradientとlinear-gradientを駆使して、囲み枠を作ってみました。 本来お絵描き用途ではないCSSを強引にお絵描き風に使ってみると、こんな感じになります。 もこもこの雲 キャンディ リボン あとがき もこもこの雲 .crd{ width:300px; height:200px; padding:40px; background: radial-gradient(farthest-side at 50% 100%,transparent 9…

…大量のlinear-gradient バクダンになりそこねた囲み枠 .bkdn{ height:300px; padding:30px; background: linear-gradient(to top right,transparent 48%,black,transparent 52%) 0 0/25% 20px no-repeat, linear-gradient(to top left,transparent 48%,black,transparent 52%) …

…ng-linear-gradient(120deg,red,yellow,blue,red 10%) 0 0/1000% 100%; animation:rbwa 15s ease infinite; } コード <style>@keyframes rbwa{0%,50%{background-position-x:0%;}100%{background-position-x:100%;}}.rbw{height:5px;background:repeating-linear…

…e: radial-gradient(farthest-side,#f8f8f8 0%,#dddddd 90%,#dddddd00 100%), radial-gradient(farthest-side,#f8f8f8 0%,#dddddd 90%,#dddddd00 100%), radial-gradient(farthest-side,#f8f8f8 0%,#dddddd 90%,#dddddd00 100%), radial-gradient(farthest-si…

…ge:radial-gradient(farthest-side,#ffffff80 0%,#ffffff00 100%); background-size:var(--sz) var(--sz); animation: stardragonx 3.5s ease-in-out var(--d) infinite alternate ,stardragony 1.07s ease-in-out var(--d) infinite alternate; } .stardrago…

…nd:radial-gradient(farthest-side,#ffffff 49%,#ffcc00 50%,#ffcc0000 100%) 50% 50%/80px 80px no-repeat; z-index:10; } .d3dz div:nth-child(1) ~ div{ background-image:radial-gradient(farthest-side,var(--c1) 0%,var(--c2) 49%,var(--c3) 50%,var(--…

…ng-linear-gradient(135deg,#000000 0% 49%,#00000000 50%,#000000 51% 100%), linear-gradient(#000000 0% 33%,#ffff88 66%,#000000 67% 100%); background-size:100% 100%,100% 300%; animation:shtstra 1.4s linear infinite,shtstrb 7s linear infinite; …

…ge:radial-gradient(farthest-side,#444488 0%,#4444cc 49%,#0000ff 50%,#0000ff00 100%); background-repeat:no-repeat; animation: d3dzx 5s ease-in-out 2.5s infinite alternate ,d3dzy 5s ease-in-out infinite alternate; } .d3dz div:nth-child(2){ ba…

…ge:radial-gradient(farthest-side,#ffffff,#bbbbbb 39.9%,#4444ffdd 40%,#4444ff00 100%); background-repeat:no-repeat; animation: d3dax 2s ease-in-out infinite alternate ,d3day 1.8s ease-in-out infinite alternate; } コード <style>@keyframes d3dax{…

…方で、radial-gradientを用いて「球っぽい円」を描く事はできますが、 これも３D回転させると平面の円である事が露呈してしまいます。 今回は実験的に「CSSの3D表現を使わず、疑似的に３Dっぽい動きを表現」する事に挑戦してみました。 疑似３D コード 遅延の値を変更してみるのも面白いかも 疑似３D @keyframes d3dax{ 0%{background-position-x:0%;} 100%{background-position-x:100%;} } @…

…ng-linear-gradient(135deg,#000000 0px 9px,#00000000 10px 13px,#000000 14px 100px), repeating-linear-gradient(45deg,#000000 0px 132px,#00000000 133px 136px,#000000 137px 141px), linear-gradient(#ffffbb,#000000); animation:stardusta 20s linea…

…nd:linear-gradient(#8888ff,#ccccff 69.9%,#884444 70%); } .mono{ position:absolute; width:30px; height:30px; background:radial-gradient(farthest-side,#ff0000 99%,transparent 100%); left:200px; animation:rakka 3s linear infinite; } コード <style…

…d: linear-gradient(to top right,#ff000040,#ff000000),linear-gradient(0deg,#00ff0040,#00ff0000),linear-gradient(to top left,#0000ff40,#0000ff00);"> </div> ３つのグラデーションを重ねています to top right な赤 0deg な緑 to top left な青 赤・緑・青の３色、それぞれ角度の異なるグラデーションを半透…

…ge:radial-gradient(farthest-side at 25% 75%,#8888ff 5%,#8888ff00 6%,#8888ff 7%,#8888ff00 8%,#8888ff 9%,#8888ff00 10%,#8888ff 11%,#8888ff00 12%,#8888ff 13%),radial-gradient(farthest-side at 25% 75%,#ffeebb,#8888ff 100%)!important;background-…