どうも！LSSです！！ つい先日、おかえりモッキンバードという記事にて、７月７日に移転オープンした喫茶店の記事を書きました。 調査漏れの事項があったため、「まぁまたそのうち次回行った時に確認しよう」と思っていたのですが…思いのほか、そのタイミングが早くやってきましたｗ というのも、本日、高校時代からの友人から連絡があり、神戸に帰ってくるとの事で「じゃあ昼飯でも」という話になったんですね。 お昼はLSSが良く行くラーメン屋さんに案内する事にして（常連にトッピング無料サービス有、…

…ge: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% …

…ge: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,#6666bb…

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

どうも！LSSです！！ 「雨降りCSSコード生成ツール」完成しました！ 雨降りCSSコード生成ツール 使い方 雨降りCSSコード生成ツール 速度:秒（雨枠１つ分、横に移動するのにかかる時間）雨の色:雨の太さ:px雨の角度:deg雨の横位置:px（雨の長さにも影響）雨枠の幅:px雨枠の高さpx雨２の横ズレ:px雨２の縦ズレ:px雨３の横ズレ:px雨３の縦ズレ:px背景色グラデーション: コード 使い方 雨が降っているアニメーション、調整用コントロール、コード、があります。 調整…

…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><div class="rainy"> </div> この「137」とか「69」といった数値が難点で…^^…

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

…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><div class="test">呼吸してるみたい</div> アニメ化できましたね！ クラス名とかテキトーですが^^;。 gradient系の ( ) の内容はアニメーションにならないですが、それ以外の…

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

…ード radial-gradientが４つ並んでいますが 水面の波紋アニメーション コード <style>@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-…

…以前、「conic-gradient」の存在を初めて知り、びっくりした時の記事。 little-strange.hatenablog.com 勢いでいくつか試しに作ったコードを書いていましたが、その中の「集中線」をちょっとだけ改善してみました。 集中線 コード 変更点 集中線 CSSで集中線。というネタは以前にも公開していましたが、コードを改善してみました。 コード <style>.concentration{padding:15% 15%;background:radial…

… 今回、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 こんな風になります。よく見ると４つの辺の中でも明るさがグラデーション変化し…

…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%;}</style><div class="bdimg">虹色の枠線ができました^^<br />border-imageはやはり手強いですが、だ…

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

…age: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 330…

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

…たのはCSS、中でもgradient系が面白くて未だに色々試みています^^ 例えば今回の記事の背景に、うっすら「1000」の文字を並べていますが、これも画像ファイルではなくconic-gradientを並べて描いてみました。 需要あるかは謎ですが、一応コード晒しておきます！ コード <style>article{background:conic-gradient(at 150px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 15px 0/160…

…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%);ani…

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

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

どうも！LSSです！！ スイッチ迷路、とりあえず一通り遊べるようになったので公開しちゃいます^^迷路データは新たに作りましたので、前回のスイッチ迷路をクリアした方も再び迷う事ができますｗ アナツくんのスイッチ迷路 遊び方 過去記事～ 他に考えていて未実装なアイデア エディットモード 迷路データ圧縮 アナツくんのスイッチ迷路 遊び方 迷路画面内をクリックすると、その方向に向かってキャラクター「アナツくん」が移動します。 迷路には黒い壁の他に、赤・青・黄色の壁と、赤・青・黄色のス…

…nd: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%,#000000 …