…る、 linear-gradient や conic-garadient という関数の中には 表示角度を指定する箇所がありますが、それらはアニメーションの「滑らかな変化」には対応していません。 今回は、その「できないはずの背景回転アニメーションを強引に実現する」方法を思いついたので、試してみました^^ 背景回転アニメーション コード 強引に実現した方法 おまけ あとがき 背景回転アニメーション ネオンのよう？それとも立体的な折り紙のよう？ コード <style>@keyfra…

…ge:radial-gradient(circle at 50% 50%,#ff666640 0%,#ff6666ff 50%,#ff666600 51%);}.pdws:nth-child(4n+2){background-image:radial-gradient(circle at 50% 50%,#6666ff40 0%,#6666ffff 50%,#6666ff00 51%);}.pdws:nth-child(4n+3){background-image:radia…

…ge:linear-gradient(to bottom right,#cceeeeff 49%,#cceeee00 50%);}#sidel2{grid-column:1/2;grid-row:2/4;border:1px solid black;background-image:linear-gradient(to top right,#cceeeeff 49%,#cceeee00 50%);}#main2{grid-column:2/3;grid-row:2/3;bor…

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

conic-gradientbackground-positionアニメーション どうも！LSSです！！ とりあえず試しに、conic-gradientをアニメーション化してみました。 コード <style>@keyframes cncglda{0%,20%{background-position:0px 0px;}/*経過時間0～20%までの位置*/80%,100%{background-position:-5700px -3800px;}/*経過時間80～100%までの位…

…ョン（linear-gradient radial-gradient）で遊んできましたが…今日初めて知ってびっくり！ CSSのグラデーションは「もう１種類」あったようです！！ conic-gradientのテスト repeating-conic-gradient という事は、こんな事もCSSで出来ちゃいますね！ あとがき conic-gradientのテスト conic-gradient コード <style>.conictest{background-image:conic…

どうも！LSSです！！ CSSには、様々な「フィルター」が用意されています。 以前にも、 little-strange.hatenablog.com で使ってみましたが、このフィルター、CSSアニメーションとも併用が可能で、組み合わせると「徐々に変化」してくれます。 今回は、CSSフィルターとCSSアニメーションを組み合わせて遊んでみました^^ 白トビ→通常の写真に変化 セピア色の思い出がよみがえる transitionについて にじんだ景色も目を凝らすと… コントラストの鼓…

…ge:radial-gradient(#00000080 40%,#00000000 50%);width:8px;height:8px;top:146px;left:146px;}</style><div id="tokei"><div id="tokeih"></div><div id="tokeim"></div><div id="tokeis"></div><div id="tokeic"></div></div><p><script>tokeiz();functio…

…ge:radial-gradient(#00000080 40%,#00000000 50%);width:8px;height:8px;top:146px;left:146px;}</style><div id="tokei"><div id="tokeih"></div><div id="tokeim"></div><div id="tokeis"></div><div id="tokeic"></div></div><p><script>tokeitm=setInter…

…ge:radial-gradient(circle at 50% 50%,#ff8888ff 5%,#ff888800 17%),radial-gradient(circle at 50% 50%,#8888ffff 5%,#8888ff00 17%);background-size:80px 40px;animation:dotkeia 8s linear 0s infinite;}</style><div class="dotkei"> </div> 使い方と仕組み コー…

…ng-linear-gradient('+rg1.value+'deg,'+col1.value+','+col2.value+','+col1.value+' '+rg3.value+'%) '+rg2.value+'; padding: 5px;">こんな感じのシマシマ模様の枠になります。<br/>お気に入りの色・角度を見つけてください^^</div>';gamen.innerHTML=txt;cdtxt.innerHTML=txt.replace(/</g,'&lt;'…

どうも！LSSです！！ 久々に「コード生成ツール」を作ってみました。 この記事の画面上で色を選んだりスライダーで角度やサイズを調整する事で、しましまの囲み枠のコードを生成する事ができます！ しましま枠線メーカー 使い方 あとがき しましま枠線メーカー サンプル 角度: 太さ: シマ: コード 使い方 色を選択できるカラーピッカーが２つと、スライダーが３つあります。 これらを触って変更する事で、その上にある縞々枠線の「サンプル」と、その下にある「コード」がリアルタイムに変化しま…

…みるとradial-gradient内にtransparentを使ってましたねｗ は、iPhone用ボタンを用意しておいたにも関わらず…普通に「鳴らす」ボタンで聴けちゃいましたｗｗｗ そして、一番ややこしそうな は、案の定、画面切り替えはできるものの、うんともすんとも、ですね。（これこそ実機でテストしながらじゃないと対応しきれない類の問題） って事で、ついにiPhoneデビューしてしまいました！ と言っても、どのぐらい使うかはまだ未定なんですが^^; まずはこれまでに分かって…

…ge:linear-gradient(170deg,brown,yellow,white,yellow,brown);transform-origin:100% 50%;transform:rotate(0deg);transition:1s;}.sntk4 input+span+span{position:absolute;width:50%;font-size:100%;padding:0.5em;text-align:center;background-size: 30…

どうも！LSSです！！ 今回は、「HTMLやCSSを使った仕掛け作りに挑戦してみたい」方向けの記事となります。 HTMLでWebページ上に配置できるもののひとつに「チェックボックス」があります。 （←こういうものですね） クリックするたびに オン／オフ が切り替わり、さらにチェックされている時とされていない時に、それぞれCSSによる装飾指定を変更できるので、アイデア次第で面白い使い方ができたりします。 例えばこんな仕掛けとか。 【CSS】カードをめくる その３ idを使わない…

…ge:linear-gradient(60deg,#ffffff00 30%,#ffffff80 70%);background-size:20px 30px;}.chk:checked~.omote{transform:rotateY(0deg);}.chk:checked~.ura{transform:rotateY(-180deg);}--></style><p><label class="card"><input class="chk" type="checkbox"…

…e: radial-gradient(circle at 30% 30%,white,yellow,brown);"> </p> ついでにSILVER BALL コード <p style="width: 130px; height: 130px; border-radius: 50%; background-color: silver; background-image: radial-gradient(circle at 30% 30%,white,#cccccc,#444…

…ge:linear-gradient(90deg, brown,yellow,white,yellow,brown);-webkit-background-clip: text;-webkit-text-fill-color: transparent;animation:goldanm 10s ease-in-out 0s alternate infinite;}--></style><p class="golda">きんきらきんのきーん</p> filter:drop-sh…

…ge:linear-gradient(30deg,#ffffffff 0%,#ffffff40 100%);} .hatena-module-title{background-image:linear-gradient(#ffaaaa00 60%,#ffaaaaa0 90%,#ffaaaa00 100%);} 上のほうは、モジュール毎に枠線をつけてみたり、ビミョーな背景色変化をつけてみたりしたもの。 下のほうは、見出し部分の装飾です。 ↓こんな感じの見た目になりました！ 月別…

…e: linear-gradient(135deg,#bbbbff,#eeeeff,#bbbbff); background-size: 80px 80px; padding: 1em;">普通に四角が並んでいる感じです。<br /><br /><br /><br /><br /><br /><br /><br /><br /></div> 赤文字部分を好きな内容に書き換えて使用できます^^ 斜めに幾重にも筋が走ってる感じ 斜めに幾重にも筋が走ってる感じ。 コード <div …

…ge:radial-gradient(circle 33px at 25% 25%,red 20%,transparent 80%),radial-gradient(circle 33px at 75% 75%,red 20%,black 80%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;animation:snrtanm 10s linear 0s infinite;}--></s…

…ge:linear-gradient(90deg, brown,yellow,white,yellow,brown);-webkit-background-clip: text;-webkit-text-fill-color: transparent;animation:goldanm 10s ease-in-out 0s alternate infinite;}--></style><p style="background-color: gray; text-align: …

どうも！LSSです！！ 以前、【CSS】ボックス装飾によく使うプロパティ おさらいとサンプル集という、それまでに作成したCSSサンプルのまとめ記事を書いていました。 気づけばそれから１年近く経ち、その間にもちょこちょこ作っていたので、その後に作ったものをまとめてみます！ …と言いつつ、見てみると結構作ってるものがバラバラで^^; 書き出すと「まとまりのないまとめ」になりそうだったので、様々なネタの中から 「アニメーションするボックス（枠）」 のまとめ記事とします^^ マウスカ…

…e: linear-gradient(45deg,#040404,#141414); background-size: 7px 7px; border: 6px gold ridge; padding: 0.6em;text-align:center;}#rireki{height:200px;border-radius:15px;background-image:linear-gradient(45deg,#ccc,#fff,#ccc);overflow-y: scroll…

…e: linear-gradient(105deg,#e0d0f0,#e8d8f8,#e0d0f0); background-size: 10px 20px; border: 3px solid #e0e0d0; text-align: right; font-family: serif; font-weight: bold;">４時のニュース メインキャスターの座<br />吉賀ピー太郎<br /><a href="https://little-strange.hatena…

どうも！LSSです！！ 先日公開したブラウザゲーム、 に、速度調節機能をつけてみました！ JoeWars 遊び方 30年前に作ったゲームですが JoeWars 速遅 遊び方 詳しくは前回の記事を見ていただくとして、簡単にいうと「９人づつ６つのグループがあり、一番左が自分のグループ。他のグループをクリックで攻撃して生き残ったら勝ち」 という物騒なゲームですｗ 今回の変更点として、ゲーム画面の上にゲームの進行速度を調節できるスライダーをつけました。 遅めに設定して、じっくり敵たち…

…ge:linear-gradient(120deg,#ffffdd 85%,#ddffff 86%); font-weight:bold;padding-left:0.5em;text-shadow:1px 1px 1px #eeeeee88;font-size:150%;}.q100a{background-color:#ddffff;padding-left:1em; margin-bottom:2em;font-size:120%;}--></style> テンプレート…

どうも！LSSです！！ 新たに覚えた事を忘れないためには、インプットだけで終わらずにアウトプットするのが大事！ なんですが、繰り返す事よりも新しい事に手を出すほうを優先したところ、自分が何をアウトプットしたかも忘れがちになってる困ったちゃんですｗｗｗ というわけで、自分で思い出すためにも、今月前半にどんな記事を書いていたか、振り返ってみます。 6/1【JavaScript】テキストアドベンチャーゲームのシステムを作りかけてみました 月の始めはこれでしたね！ この開かない門のサ…

…ge:linear-gradient(350deg,#000,#444,#000);color:red;font-weight:bold;padding:1em 0px;}#jw a{color:red;}#jwe{text-align:center;color:red;}--></style><p> </p><div id="jw"> </div><div id="jwe"> </div><p><script>// <![CDATA[var turn=0;var nz=[]…

どうも！LSSです！！ ３０年ぐらい前に作ったゲームをリメイクしてみました。↑ ストーリー 遊び方 敵グループ（CPU）の思考 生き残るためのコツ あとがき ストーリー その街には、６つの不良青年たちのグループがあった。 彼らの間には抗争が絶えない。 ある時、そのなかの１つのグループのリーダーが敵弾に倒れた。 「こんな時のため、日本から”Joe”という男を呼んでおいた。そいつが次のリーダーだ。」 そう言い残し、リーダーは息を引き取った。 そしてJoeはやってきた。 そのグルー…