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

…e: radial-gradient(farthest-side at 0% 50%,#8888ff 5%,#8888ff00 6%,#8888ff 7%,#8888ff00 8%,#8888ff 9%,#8888ff00 10%,#8888ff 11%,#8888ff00 12%,#8888ff 13%), radial-gradient(farthest-side at 0% 50%,#6666bb,#8888ff 100%); background-position:0…

…e: radial-gradient(farthest-side,#7777ee 60%,#7777ee00 100%), radial-gradient(farthest-side,#8888ff 5%,#8888ff00 6%,#8888ff 7%,#8888ff00 8%,#8888ff 9%,#8888ff00 10%,#8888ff 11%,#8888ff00 12%,#8888ff 13%), radial-gradient(farthest-side,#6666…

…ン、「radial-gradientの内容は、keyframesの『徐々に変化』に対応させられない」のを、「background-sizeを変化させる」事で 円の大きさをアニメーション変化させていたもので、輪の色（透過度含む）もまた「radial-gradientの内容」に書く内容なのにどうやって変化させたものか？ という、新たな壁に直面する事になります。 今回は、「トリッキーな方法」で、「それっぽい」ものを実現してみました。 透過波紋 コード トリッキーな方法 あとがき 透…

…+='linear-gradient('+(parseInt(cdeg.value)+90)+'deg,'+crc.value+'00 '+(parseInt(cleft.value)-parseInt(crw.value))+'px,'+crc.value+'80 '+cleft.value+'px,'+crc.value+'00 '+(parseInt(cleft.value)+parseInt(crw.value))+'px)\n'; txt+=',linear-gra…

…ge:linear-gradient(110deg,#ffffff00 10px,#ffffff80 12px,#ffffff00 14px) ,linear-gradient(black,blue,white); background-size:50px 69px,100% 100%; animation:rainya 1s linear infinite; } コード <style>@keyframes rainya{0%{background-position:0px …

…oundプロパティにgradientひとつで描いていますが、linear、radial、conicとあるgradient系のどれをどのように使っているでしょうか？ コード（答え） <div style="width: 100px; height: 100px; background: radial-gradient(farthest-side,transparent 99%,orange 100%) 50px 50px/100% 100%;"> </div> 答えは「radi…

…ng-linear-gradient(45deg,black 0px 11px,transparent 13px,black 15px 30px), repeating-linear-gradient(135deg,black 0px 11px,transparent 13px,black 15px 30px), repeating-linear-gradient(20deg,black 0px 24px,lightblue 27px,white 36px,#ffff88 4…

…Sです！！ CSSのgradient系の関数をbackgroundプロパティに適用する事で、容易に「綺麗なグラデーション」を描く事ができます。 この場合の「綺麗」は悪く言えば機械的、単純という見方もできます。 backgroundプロパティは カンマ区切りで複数の画像を重ねる事ができる gradientで使用する色は「不透過度」を設定する事で半透明の色も使用できる 事から、「汚し」となるようなノイズっぽいgradientを重ねる事で、グラデーションを複雑なものに見せる事ができ…

…する事は可能ですが、gradientを使って…となるとあまり自由が利かなかったりもします。 今回は、「なかばインチキ」な方法ではありますが、「虹色の枠線」を角丸にする方法を試してみました！ 虹色の角丸枠線 解説 border-box、padding-box、content-box あとがき 虹色の角丸枠線 虹色の枠線 角丸１ コード <div style="border: 5px solid transparent; border-radius: 10px; padding:…

…ng-linear-gradient(135deg,red 0px 9px,orange 20px 29px,yellow 40px 49px,green 60px 69px,lightblue 80px 89px,blue 100px 109px,purple 120px 129px,red 140px) 5;">虹色の枠線 追加１</div> 虹色の枠線 追加2 虹色の枠線 追加2 コード <div style="border: 5px solid; border-ima…

… 特にradial-gradientはborder-radiusの代わりに角丸を表現するのに使えて、中身を工夫するとborder-styleでは表現できなかった事もできちゃったりしますね^^ 今回は、そんなborder-imageならではの枠線を考えてみました。 枠線３種 コード とりあえず３種、ですが 枠線３種 ぼやけた角丸枠 トリプル角丸枠線 縦に虹色 コード <div style="border: 30px solid; border-image: radial-gra…

…ce:radial-gradient(farthest-side,transparent 59%,gray 60%,white,gray 89%,transparent 90%); animation:testa 3s infinite alternate; } 呼吸してるみたい コード <style>@keyframes testa{0%{border-image-slice:49%;}100%{border-image-slice:35%;}}.test{height:2…

…った・radial-gradientがカンマ区切りで並んでいるところの最後に「url(画像ファイルURL)」を追加とありましたがその場所がわかりませんでした。 とコメントをいただきました。 ありがとうございます^^ 書き換える箇所が複数あり、コメント欄に書いたものだけでは分かり辛いかと思いましたので、実際にやってみたものを今回記事にしてみました！ 水面の波紋アニメーション 改め 三つ首竜の音波攻撃！ コード コード解説 なぜに三つ首竜？？ 水面の波紋アニメーション 改め 三つ…

…ード radial-gradientが４つ並んでいますが 水面の波紋アニメーション @keyframes suimena{ 0%{background-size:0% 0%,20% 20%,50% 50%,100% 100%;} 100%{background-size:20% 20%,50% 50%,100% 100%,200% 200%;} } .suimen{ height:100px; background-color:#8888aa; background-imag…

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

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

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

…ge:radial-gradient(at 50% 50%,transparent 14%,purple 15% 19%,blue 20% 24%,lightblue 25% 29%,green 30% 34%,yellow 35% 39%,orange 40% 44%,red 45% 49%,transparent 50%) 49%; } 虹色の枠線ができました^^border-imageはやはり手強いですが、だいぶ分かってきた…かも？ コード <style>.bdimg{…

…d: linear-gradient(90deg,red 0% 13%,orange 16% 27%,yellow 30% 41%,green 44% 55%,lightblue 58% 69%,blue 72% 83%,purple 86% 100%) 0 50%/100% 3px repeat-x;"> </div> ７色、わかれていながらも境目を少しグラデーションでぼかしているタイプの区切り線です。 境目のない虹色グラデーション コード <div style="back…

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

…und: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 0/160p…

…nd: 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 0/16…

…ge:radial-gradient(farthest-side,#ffffff 5%,#00ffff 90%,#000000 99%,#00000000 100%); animation-duration:7s,5s,3s; } .radials div:nth-child(2){ background-image:radial-gradient(farthest-side,#ffffff 5%,#ff00ff 90%,#000000 99%,#00000000 100%)…

…g.com に続く、gradient＋keyframes実験、radial-gradient版です。 linear-gradient の時は傾きを指定する箇所に「to left top」を指定する事で、「画像サイズの変化に応じて角度変化」という手法を実験しました。 では、radial-gradientの場合は？？ 実験 コード 解説 組み合わせでこんな事も！ linear、radialときたら… 実験 @keyframes rtesta{ 0%,100%{background…

…e: linear-gradient(to left top,#ff0000 0%,#880000 20%,#ff0000 25%,#880000 30%,#ff0000 35%,#880000 40%,#ff0000 45%,#880000 50%,#88000000 50.1%), linear-gradient(to right top,#ff0000 0%,#880000 20%,#ff0000 25%,#880000 30%,#ff0000 35%,#880000 …

…geにlinear-gradientを指定し、それをkeyframesアニメーションの対象にした場合。 例えば、 @keyframes キーフレーム名{0%{background-image:linear-gradient(0deg , 色１ , 色２);}100%{background-image:linear-gradient(90deg , 色１ , 色２);} のように指定したとしても、角度が「0degから90degに徐々に変化」…とはなりません。他のgradient…

…CSSで、３種類あるgradientを用いて「模様が繰り返すタイルパターン」のような背景を描画できます。 中でも、repeating-conic-gradientがfromの角度指定を変更する事で、思いがけないような模様の変化をもたらすのが面白いです^^ 【CSS】謎の背景模様『山』【小ネタ】 - Little Strange Software 今回はその「repeating-conic-gradientの模様変化」を手軽に体験できるツールを作ってみました。 repeatin…

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

…d: radial-gradient(7px 5px at 20px 23px,#ffffff 84%,#000000 85% 99%,#00000000 100%), radial-gradient(7px 5px at 34px 23px,#ffffff 84%,#000000 85% 99%,#00000000 100%), radial-gradient(15px 13px at 27px 23px,#ffffff 10%,#eeee00 80% 92%,#00000…