…かった、LSS自身のCSS知識として、 preserve-3d による立体表現 pointer-events: none; によるCSSからの要素クリック無効化 の２つを使っています。 特に立体表現によって、比較的単純なCSSコードの割りには複雑な動きになったと思います^^ また、「pointer-events: none;」の指定により、この物体がブログ上のクリックを阻害する事はありません。 コード <style>@keyframes kaiten1{0%{transfor…

…も。 アクション 【CSS】ブロック遊び【実験】 - Little Strange Software 何となくマリオの昔のステージを思い出しました。この上をマリオでぴょんぴょんと飛び跳ねてみたいものです（笑）。 2021/12/12 18:50 b.hatena.ne.jp アクションゲームもいいですね^^ と、ふと、「ジャンプつきアクションゲームで壁や台などの当たり判定のあるものを作った事がない」事に気づきました。 little-strange.hatenablog.com…

…！LSSです！！ 【CSS】サイコロ回転【preserve-3d試してみた】 - Little Strange Software から色々試しているCSSの立体表現ですが、立体を見ているとつい連想しちゃうのが、 little-strange.hatenablog.com マインクラフトです。 CSSでマインクラフトが作れる、というわけではありませんが、ごくごく小規模な、それっぽいブロックを並べる事ぐらいならできるかな？と試みてみました。 ブロック遊び コード JavaScri…

…したが、そこを強引にCSSで描いた「ラフ」みたいな状態です。 こうしてみるとやはり、というか案の定というか、「画像を用意する必要はあるなぁ」と思いましたがｗ 水槽（作りかけ） 一応、コード やった事といえば… あとがき 水槽（作りかけ） やろうとしている事の雰囲気だけは伝わるかな…伝わってほしいなｗ ひょっこり出てくる謎の赤い物体はカニさんだと思ってください。 一応、コード <style>@keyframes roundside{0%,30%{transform:rotate…

…マスカラーを使った、CSSサンプルネタをやってみたい」と思い、やってみたらこうなりました。 サンタさんへの手紙 コード 没案 サンタさんへの手紙 Dear サンタさん今年のクリスマスプレゼントはCore i9のCPUが欲しいです。よろしくお願いいたします。 コード <div style="width: 300px; height: 200px; padding: 20px; border-radius: 25px; background-image: linear-gradi…

…！LSSです！！ 【CSS】preserve-3dを使って直方体を描いてみたら案の定大変だった話で、とりあえず直方体をCSSで描いてみました。 要領はなんとか分かったものの、サイズ変更時のtranslateZの値の指定が少々面倒です^^; という事で、CSSが分からなくても、3Dの概念が分からなくても、画面上でスライダーをいじるだけで「直方体が描けるコード」を出力するツールをJavaScriptで作ってみました！ 3D直方体コード生成ツール 使い方 貼り付けた後のコードの修正…

…log.com で、CSSで立体的な立方体を描いてみました。 その際に、 …ただし、位置決めなどの指定がとても複雑で、例えば今回は立方体でしたが、これを直方体にしようと思っただけでも話がややこしくなりそうです^^; 【CSS】サイコロ回転【preserve-3d試してみた】 - Little Strange Software と書いていましたが、実際に直方体を描こうとしたら結構迷ってしまいました^^; が、なんとか描けました^^ 幅200px高さ100px厚さ20pxの直方体…

どうも！LSSです！！ conic-gradientを使って、矢印を描いてみました。 2021/12/1 コードちょっと修正 左矢印 上矢印 あとがき 左矢印 ここ見て！ コード <style>.arrowl{display:inline-block;background-image:conic-gradient(from 45deg at 0% 50%,#ff0000ff 0deg 90deg,#ff000000 90deg),conic-gradient(from 75d…

どうも！LSSです！！ このブログの、滅多に更新しないカテゴリのひとつに、「はてなブログサイドバーモジュール」というのがあります。 これまで、 little-strange.hatenablog.com little-strange.hatenablog.com の２記事書いていて、今回のが３記事め。 最初に設置した「サイコロ」を「立体サイコロ」に置き換えてみました^^ サイドバーの一番下に ちょっとだけ違うところ 方法はナイショ サイドバーの一番下に ↑こんな風なものを設置…

…追記！機能改善した【CSS/JavaScript】多角形フォトギャラリー改訂版もあります^^ 六角フォトギャラリー コード あとがき 六角フォトギャラリー 六枚の環状に並んだ画像のどれかをクリックすると、その画像がその下に大きく表示されます。 コード <style>#ph3d{position:relative;transform-style:preserve-3d;width:150px;height:150px;left:75px;transition:1.5s;tran…

…組だったようで。 【CSS】サイコロ回転【preserve-3d試してみた】 - Little Strange Software からのCSSでの３Dについては、フォトギャラリーへの転用とかも考えているところですが、ブログ的には「話を６つ用意しておいて、サイコロの出た目に応じた内容が表示される」なんて仕掛け記事も面白いかも？ とか思ったりする今日この頃です。 １つの記事に話を６つ用意する必要があるのがしんどいかもですが…ってそのままですねｗ ってなとこで、今回はこのへんで！ …

…！LSSです！！ 【CSSお絵描き】サイコロの目を描いてみよう - Little Strange Software で、サイコロのデザインが完成していました。 今回はいよいよ、そのサイコロを振って遊べるバージョンの公開です^^ サイコロをクリックまたはタップしてください コード コード解説（CSS部分） コード解説（JavaScript部分） 配列変数の設定 イベントリスナーの設定 あとがき サイコロをクリックまたはタップしてください ※以下、「コード」や「コード解説」が長々…

どうも！LSSです！！ radial-gradient（円形グラデーション）をやたらと並べて、リアリティのない迫ってくるような虹を作ってみました。 コード <style>.bgrbw{width:300px;height:185px;border-radius:10px;background-color:#000000;background-image:radial-gradient(closest-side circle,#000000ff 99%,#00000000 10…

…も！LSSです！！ CSSを色々いじっていると、こんなものが出来ました。 彗星の尾 コード なんだこりゃｗ 彗星の尾 こんな風に取り囲まれた中に文字が入っています コード <style>@keyframes wa1a{0%{transform:rotate(0deg);}100%{transform:rotate(-360deg);}}@keyframes wa2a{0%{transform:rotate(0deg);}100%{transform:rotate(360deg…

…ができます。 一方、CSSには乱数がありません。 ので、乱数が必要ならJavaScriptを併用すれば良いのですが、「CSSのみで疑似的に乱数を作る方法」の案を練っていたので、今回実際に作ってみました。（が、記事タイトル通り難アリです^^;） CSSで疑似乱数 コード 疑似乱数になる仕組み 問題点 結論：JavaScriptを使おうｗ CSSで疑似乱数 ボタン 「ボタン」をクリックすると、上のラジオボタン６つのうちどれかにチェックが入ります。 どこにチェックが入るか、がランダ…

…も！LSSです！！ CSSのbackground-image:radilgradientを駆使して、コードでサイコロの６つの目を描いてみます。 こういうのは一度作っておくと、色々使いまわせそうですね^^ １の目 ２の目 ３の目 ４の目 ５の目 ６の目 書き方は何通りか考えましたが… 早速、サイコロを転がしてみよう！ 色付きスケルトンダイス １の目 コード <style>.sai1{width:150px;height:150px;border-radius:5px;borde…

…ます。 コード解説 CSSのセレクタを article としています。 CSSのセレクタは「.」をつけるとクラス名、「#」をつけるとid名を指定する事になりますが、そのどちらもつけない場合はタグ名を指す事になり、はてなブログにおいて記事部分を囲んでいる<article>タグに対しての指定、という事になります。 もちろん、こんな記事全面じゃなくて一部の要素に対して指定したい場合は、 <div class="nantoka"></div> といった要素を置いて、セレクタ部分を .…

…も！LSSです！！ CSSのプロパティ＆値に、transform-style:preserve-3d;というのがあります。 HTML上に置いた要素を変形（拡大縮小・回転など）させるtransformプロパティを3Dに対応させるための指定…らしいのですが、これがもうひとつよく分からない。 【CSS】裏表画像めくり【カードをめくる改変】 - Little Strange Software のように、preserve-3dを指定しなくても「立体っぽい動き」にはなるので、指定した場合…

…も！LSSです！！ CSSのグラデーション、○○-gradient系は、できる事が多くて奥が深いです。 凝れば凝るほどコードが複雑になり、「分かりにくい」という印象を受けてしまう事も。 色々な事ができるがゆえに、色々やろうとすると難しい部分も出てきますが、「もっとも簡単なグラデーション」はとってもシンプルだったりします。 ごくシンプルなグラデーション例 色を付け足してみましょう 今回のまとめ ごくシンプルなグラデーション例 分かりやすい色で、「青→黄→赤」の順に変化するグラデ…

…ブログでは昨年、 【CSS】CSSでクリスマスツリーを描いてみる【第三弾】 - Little Strange Software といった感じでCSSお絵描きでクリスマスツリーを描いたりしていましたが、ツリーを構成する三角をborderで表現していたんでした。 【CSS・border】borderで三角形が作れる！？という事に今更びっくりした話 - Little Strange Software が、今年は「conic-gradient」が使えます！ conic-gradien…

…div要素に対して、CSSから色々指定を足していく感じでお絵描きを始めます。 idが「gz」なものに対する指定なので、セレクタは「#gz」。そこに、「width:300px; height:485px;」と大きさを指定しました。 その次のbackground-image:conic-gradient(#4444aa 89deg,#558855 90deg 270deg,#4444aa 271deg);の部分で、conic-gradientによって背景を塗り分けていきます。 #…

どうも！LSSです！！ ちょっとconic-gradientを使った実験です。 スマホでは分かりにくいかもですが、この記事の画面、右上から光が差し込んでいるような効果を作ってみました。 実用性は…結構邪魔かも？なので、現段階では「実験」扱いです^^; 消す時はここから コード 消す方のコード あとがき 消す時はここから ↑のボタンを押すと効果が消えます。 コード まず、光が差し込む方のコード <style>#ray{position:fixed;top:0px;left:0p…

どうも！LSSです！！ 先日の記事、 にいただいたブクマで、 tn198403s ばってん。なるほど強調するのに良さそうです。これを応用すれば丸（楕円）とかもできるのでしょうか？あるいは、カーソルを載せたら×や〇が表示されるとか…。すみません、使い途をいろいろ想像しちゃいました。 2021/11/07 とのコメントをいただきました。 なるほど、対になる「〇」があれば、簡単なクイズとか作れそうですね^^ という事で、作ってみました。 青い〇 コード クイズ みたいなクイズのコー…

…使い勝手良さそうな？CSSネタを思いつきました。 赤いバッテン コード コード別例 あとがき 赤いバッテン ちょっと前に思いついたCSSネタを、今週のお題にも合うかも？と思い、お題に便乗公開してみます。 コード <span style="background-image: linear-gradient(to top left,#ff000000 45%,#ff0000aa 50%,#ff000000 55%),linear-gradient(to top right,#ff…

…なブログの「デザインCSS」に、下記のコードを追加しました。 コード #blog-title-content{display:inline-block;background-image:linear-gradient(to bottom right,#aed58180 50%,#00000080 51%);padding:15px;text-shadow:3px 3px 0px #555555;} 「#blog-title-content」は、このタイトルや説明文を取り囲んで…

…あとがき まえがき CSSに「background-clip」というプロパティがあります。 これは、要素に対して背景画像を「background-image」で指定する際に、「要素の中のどれだけの範囲に対して背景画像を適用するか」を指定するプロパティで、値として指定する候補は「border-box」「padding-box」「content-box」「text」があります。 このブログではそのうち「text」を、「グラデーション文字」として使った事がありました。 他の候補、〇…

…^ あとがき 最近、JavaScriptを使わずにCSSで作るマイブームにハマっていて、ちょい久々にJavaScriptで書いた気がします。 なんとか作りきれましたねｗ 欲を言えば、色が並ぶのは linear-gradient も radial-gradient も同じなので、gradientの種類も選べるようにしたり、中心位置を調整できるようにしたり…という強化案もありますが、とりあえずはこんなとこで。 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…も！LSSです！！ CSSのキーフレームアニメーションは、「要素」を滑らかに変化させる事ができます。※ここでいう「要素」はHTMLを構成する<div>などのタグによる領域を指します。 「要素」の変化の対象となるCSSプロパティはかなり多くのものが対応しています。 例えば「要素」のうちの「背景」についても、background-positionを変化させる事で表示位置を滑らかに移動させたり、background-sizeを変化させる事で大きさを滑らかに変化させる事ができます。 …

どうも！LSSです！！ かなり前に、 little-strange.hatenablog.com という記事を出し、その後も何度かそれに似たものを出していました。 これはチェックボックスを使用した、単一のメニューの開閉を実現するものでしたが、今回はラジオボタンを使用して「複数のうちからひとつを開く」開閉メニューを作ってみました。 ラジオボタンによる開閉サンプル コード 使い方 あとがき ラジオボタンによる開閉サンプル 塀「隣の家に塀が出来たんだってね」「へ～え」 囲い「隣の家…

…。 ハロウィン向けのCSSネタを考えてみようかな？と思ったのですが… 割とろくでもないコード <style>@keyframes hlwna{0%,100%{top:-100%;}50%,90%{top:0%;}}.hlwn{position:fixed;left:0px;z-index:100;background-color:#880000;width:100%;height:100%;animation:hlwna 30s ease 10s 1;}</style><di…