…。めんどくさい？笑 css conasaji 2022/06/04 23:15 といただきました^^ さじ様、ありがとうございます！ 大量に跳ねてると、楽しくなりそうですね！ ランダムに、の部分については、「横移動」「縦移動」「サイズ変更」のアニメーションの「再生にかかる時間」をずらす事で周期をずれさせてランダムっぽく見せていました。 ので、「大量にランダムに」という感じにしようとすると単一のHTML要素にbackgroundをカンマ区切りで並べる方式ではなく、HTML要素自…

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

どうも！LSSです！！ 先日、 little-strange.hatenablog.com という実験的な記事を公開していました。 「実験」だったのは、今ひとつネタとして活用する方法でピンとくるアイデアがなかったからなのですが、その状態でも、 non704.hatenablog.com whisky-coke.hatenablog.com norikoさん(id:non704)や、のんべえさん(id:whisky-coke)が使い途を考えて試みてくださっています^^ その、n…

…も！LSSです！！ CSSのbackground-imageにlinear-gradientを指定し、それをkeyframesアニメーションの対象にした場合。 例えば、 @keyframes キーフレーム名{0%{background-image:linear-gradient(0deg , 色１ , 色２);}100%{background-image:linear-gradient(90deg , 色１ , 色２);} のように指定したとしても、角度が「0degから90d…

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

…ツくん」誕生まで 【CSS】いかに手をかけずに、CSSで歩くキャラクターを描くか - Little Strange Software 【CSS】キャラクターデザイン続き【完成でいいかも】 - Little Strange Software 他に考えていて未実装なアイデア エディットモード ちょっと迷路のデータの持ち方が特殊で、新たに迷路を作るのが非常に面倒ですｗ パラレル迷路【完成版】 - Little Strange Software のようにエディットモードを実装して、容…

…回は、その「目次」をCSS装飾で遊んでみました。 コード 作ってみたものの… また、１文字めの背景色が違うのも ちなみに、１文字めだけ背景色を指定するのは コード <style>ul.table-of-contents{transform-style:preserve-3d;perspective:500px;background-color:transparent!important;box-shadow:0 0 0 0 transparent!important;bord…

…点と解決について 【CSS】いかに手をかけずに、CSSで歩くキャラクターを描くか の段階で、いくつかの問題点が見つかりました。 iPhoneで正常に表示されない。 あまりにもドラえもんっぽいｗｗｗ 個性がない。 まず、iPhoneで正常に表示されない件については、keyframesの中でイメージを設定していたのですが、普通に指定すると普通に表示されました。…またしてもiPhone特有のクセが見つかったようですねｗ 次に、あまりにもドラえもんっぽい件について。いくらか試行錯誤し…

どうも！LSSです！！ 最近、こんな事を考えていました。 「迷路ゲームを作成するにあたり、自キャラもこの際コードで描きだしたい。また、どうせなら４方向の画像、かつ手足を振って各２パターン用意。ただし、極力労力をそれにさきたくない！」とｗ そうして考えているうちに、 radial-gradientで描いた円で構成されたキャラなら手軽そう 考えてつめてみると、「８つの円」があれば表示位置すら変えず、「表示する・しない」「表示順の前後だけの調整」で要件は満たせるのでは？ と思い至り…

どうも！LSSです！！mioさん(id:mio20100501)が、はてなブログの記事背景でダイバーが潜水するアニメーション背景に挑戦されていました。美麗な画像で、潜水するダイバーの動きにとても迫力があります^^ mio20100501.hatenablog.com そこで、「潜水するダイバーと浮上するダイバーを同時に表示できるか」という話になったので、ちょっと作ってみました。…ただし、こちらのこの記事ではLSSが適当に描いた画像を使用していますｗ コード 使用画像 表示サイ…

今週のお題「何して遊んだ？」 どうも！LSSです！！ 今週のお題「何して遊んだ？」との事ですが、昔やっていた遊びを ちらほらとこのブログに書いた事もありましたね。 紙テレビ ゲームブック 創作折り紙 その他、まだ記事にしていない中に… 小学生時代 中学生時代 高校時代 紙テレビ little-strange.hatenablog.com 小学生の頃に、こんなのを作って遊んでました。 記事にしてみると、同じような事をされていた方がおられたようでびっくり！ ゲームブック litt…

…Sです！！ 【実験】CSS、backgroundプロパティで迷路を描くテスト（の準備段階） - Little Strange Software 考えてる迷路案「スイッチ迷路」 - Little Strange Software と書いてきた「スイッチ迷路」、とりあえず「おおむねの描画」が出来たのを途中経過ですが晒してみます。 スイッチ迷路・描画案 まだ描いてないもの 今回の迷路 スイッチ迷路・描画案 まだ描いてないもの スタート地点、ゴール地点、迷路を歩むキャラを描き込まない…

…ります。 HTML、CSS、JavaScriptなどの「さわりはじめ」だけを軽く説明するような内容で、はてなブログでも試せるような内容であるところからWeb関連の話のみになっています。 が、仕事のほうで「SQL超入門のさわりだけ」みたいな感じのものを今日ちょっと書いてみました。 タイトルはもちろん異なりますｗ が、「難しそう、と極力思わせないように」というのと「業務なのである程度の硬さ」のバランス…とか考えだすと、なかなか迷うところがあります。 とりあえず「１回２ページ」のを…

…も！LSSです！！ CSSのbackgroundプロパティを使って様々な絵を描くのを試みてきましたが、ここで「迷路の描画をbackgroundだけで出来るか？」をやろうと…し始めてみました。 まず格子状に壁を配置 壁を抜く まず格子状に壁を配置 コード <style>.test{width:300px;height:300px;background:linear-gradient(black,black) 5px 0px/54px 5px ,linear-gradient(b…

…んですが、↓こういうCSSネタを書いていました。 little-strange.hatenablog.com CSSを触るようになって、ちょっと慣れてきた頃…でしょうか。「別バージョン」に苦戦している様子が見られますｗ そして最近になって、これを使って素敵なアニメーションに仕上げていただきました^^ mio20100501.hatenablog.com なるほど、「とことこ歩く」の揺れが蝶のはばたきのように見えますね！ アイデアで拙作のCSSを楽しく活用していただいているのが…

…から選ぶだけなので、CSSが分からなくてもサンプルの変化を見ながら、正解に辿り着くという遊び方ができます^^ なお、全ての選択肢が正解になった時、「正解です！！」と赤い文字が出てきます。 CSSパズル 第二問！ 第二問です 左が見本です。下記コードの選択項目を選んで、右が見本と同じになるようにしてください。 コード <div style="display: inline-block;box-sizing:border-box;width: 140px;height: 80px…

どうも！LSSです！！ ５月５日「こどもの日」でしたね！ もう、その日も終わろうという頃になって、何かそれっぽい事をこなしたくなりましたｗ 気の抜けた「こいのぼり」 コード <style>.koinobori{width:300px;height:450px;background:radial-gradient(15px 40px at 40px 50px,#ffffff 90%,#000000 99%,#00000000 100%),conic-gradient(from …

…！LSSです！！ 「CSSをこれから勉強したい」方向けに、CSS超入門！…のさわりだけ！！など書いたりしてきましたが、なんというかこう「もっと手軽に、簡単に、なんなら学習する気がなくてもちょっと遊べるぐらいのコンテンツは作れないか」と考えていました。 CSSを再現するような入力をする…だと、CSSは様々な書き方ができますし、正誤判定が難しくなりそう…と思っていましたが「限定的な選択肢を提示して、そこから選択する」という方法なら、パズルっぽく楽しめるかも？^^ と思い、作ってみ…

…く無いと思いますが…CSSのbackgroundプロパティで「チョコレートケーキ」を描いてみました。 チョコレートケーキ コード 3つのgradientを重ねています あとがき チョコレートケーキ ChocoCake コード <div style="box-sizing: content-box; width: 100px; height: 100px; background: conic-gradient(from 60deg at 13px 50px,#372006 29…

どうも！LSSです！！ 朗報、と言うべきかどうなんだか？iOSのブラウザにあった、ある問題が解決していたようです。 ３つのグラデーション コード 以前には iOS15.4で修正されたらしい ３つのグラデーション ↑「赤から黄色」に変化するグラデーションを３つ、置いてみました。 この３つが違うグラデーションに見える方はおられますか？ ちなみに、LSSの環境では、「Windows＋GoogleChrome」「Androidのはてなアプリ」「iPhoneのはてなアプリ」で「３つとも…

どうも！LSSです！！ little-strange.hatenablog.com について、「どういう理屈であのコードが斜め市松模様になるのか」って話を書きます。 linear-gradient を用いた模様を作る際の%による指定についても書いていますので、gradient系の指定方法を これから覚えたい方にも参考になるかと^^ linear-gradientについて グラデーションに位置を指定してみます 対角線を指定する「to top right」の面白いところ 25%と…

…！！ 以前の記事、【CSS】CSSオンリーでレンガ模様・改善版の中で、conic-gradientを用いる事でレンガ模様・格子柄・市松模様を描ける、という事を書いていました。 conic-gradient や radial-gradient は、繰り返しパターンの模様を描く上で、background-sizeやbackground-positionと組み合わせるとなかなか自由度が高い模様を生み出せますが、その点では linear-gradient は「直線的」であるがゆえに作…

どうも！LSSです！！ 日曜の終わりですね。 初出社を火曜日に控えた自分、あまり曜日関係ない生活が続いていますがｗ 先日あげた記事の、 little-strange.hatenablog.com 「３枚限定」なのが弱かったネタですが、このやたら長いkeyframes定義、どうやらもうちょっと短くは出来るようです。（余計に分かりにくくなりそうでもあるのが難） 枚数を増やした設定をコード生成ツール化しようかなと思っていましたが…時間が足りなさそうでした^^; とりあえず、そのうち…

…無駄に労力を使って、CSSのbackgroundプロパティを使って「まるいの」を描いてみました。 ついでに、ちょっとだけ動きます（動かす方は全然簡単でした）。 まるいの 一応、コード まるいの まるいの（猫っぽいけど猫ではない） 一応、コード 使えるようなものじゃないですが、一応どんなコードで描いているかだけ。 <style>@keyframes maruinoa{0%,70%{background-position:18% 40%,40% 42%,16% 35%,40% 3…

…できます。 参考→【CSS】色指定 様々な方法（色名・RGB・HSLなど） font-size: 50px; 文字の大きさを変更できます。 color: white; 文字の色（袋の中身）を指定できます。これも色コードなどでの指定も使えます。 font-weight: bold; 文字を太文字にしています。 太文字にする必要がなければ、この記述自体を削除してください。 文字サイズや画数の多い漢字など ABCabc123あいうえお鑑 ↑ font-size:50px; ABCa…

…回は、ふと思いついたCSS小ネタです。 ブログなどの文中でも、さらっと使いやすいんじゃないかな？ サンプル コード CSSの説明 サンプル文に書いたように、上の行と重なりますが サンプル ただし重要適宜、改行を入れるなどしておかないと上の行と重なってしまいます。 コード ただし<span style="display: inline-block; transform-origin: 0% 50%; transform: rotate(-25deg); padding: 0 0…

…す！！ 【つまづき】CSS、animationとradial-gradientの組み合わせ【実験段階】では、うっかりbackground-positionの%指定のクセを忘れて難儀してしまいました^^; が、それはそれで面白い動きだったので、その失敗バージョンを元に何か作れないかな？と思いついたのが今回のネタになります。 自動フォトギャラリー コード ただし、ちょっと難点が… 難点その１ 縦横比 難点その２ 汎用性 一応、その「ややこしい」keyframesの内容について説明…

…も！LSSです！！ CSSをいじっているうちに、「なんだかよく分からないもの」ができてしまいました。 …なんだか、やろうと思っていた事が期待通りの動きにならず、「なんだこりゃ？？」となっていたところで方向性を変えて、「なにか」らしいものに仕上げた…けれどやはり「なんだかよく分からないもの」になっておりますｗ なんだかよく分からないもの コード 当初やろうとしていた事 あっ！ なんだかよく分からないもの なんだかよく分からないものができました^^; コード <style>@ke…

…です！！ なんとなくCSSをいじっていると、謎の背景模様？ができました。 謎の背景模様『山』 コード styleオプションに書く場合 あとがき 謎の背景模様『山』 なんだか、CSSを色々いじっているうちに、謎の背景模様ができましたｗrepeating-conic-gradientひとつだけで作った背景ですが、それっぽくないところが面白いかな？と。薄い緑の『山』という字が傾いて並んでいるようでもあり、逆に白い部分も同じように繰り返し並んでいる、という繰り返し背景模様です。 コー…

どうも！LSSです！！ これまで、コード生成ツール カテゴリーなどでよく「スライダー」を使ってきました。 ↑こういうやつ。 で、たびたび思っていたんですが…「縦のスライダーって出来ないのかな」と。 例えば「横位置」「縦位置」をスライダーで調整可能にする、といった場面で、横位置はいいとしても縦位置は「縦スライダー」であったほうが直感的に分かりやすいですよね。 ところが、数あるinput部品の中にもその「縦スライダー」が無い。 という事で諦めていたのですが…実に単純な方法で解決で…