…も！LSSです！！ CSSを知らなくてもなんとなく遊べる（？）、CSSパズル第三問です！ CSSパズル カテゴリーの記事一覧 - Little Strange Software CSSパズル 第三問！ 「現在のコード」について やっている事と言えば… 応用例 CSSパズル 第三問！ ２つの写真があります。 上が「お手本」で、下が「回答」です。そのさらに下に、赤い枠線で囲んだコードがあり、その中にいくつかの選択肢が入っています。 選択肢を変更すると「回答」の表示がそのコードで生…

…も！LSSです！！ CSSで表現されるものに「ドッグイヤー」と呼ばれるものがあります。 ちょうど紙の角を少し、45度に折ったような表現で、使われている例もCSSコードもあちこちで見かけます。 今回は「ピシッと折ったドッグイヤーではなく、ふんわりめくれたような表現」をradial-gradientで考えてみました。 ドッグイヤーもどき コード 欠点と対処法 ドッグイヤーもどき .dogy{ width:280px; height:280px; padding:10px; bac…

…工するのも手ですが、CSSなら画像はそのままでコードに少し手を加える事で、懐かしい白フチ写真を演出できます。 写真っぽい写真 コード 手順 その他の例：楕円 写真っぽい写真 コード はてなブログの「写真を投稿」機能で写真をアップロード・記事に挿入した後に、コードを付け足します。 <p style="border: 1px solid black; padding: 3%; box-shadow: 10px 10px 5px 0px gray;"><img style="dis…

…！ これまで何度か「CSSでお絵描き」をやってきましたが、今回はその中でも特にシンプルな「linear-gradientで風景を描く」ものをツール化してみました。 linear-gradientで遊ぼう！ 使い方 linear-gradientで遊ぼう！ #gamen{width:280px;height:400px;border:1px solid black;} コード ctr.addEventListener('input',gw,false); gw(); funct…

…SSです！！ 今回はCSS小ネタです。 CSSの3D表現を忘れそうになっていたので、個人的なリハビリにｗ ドアの向こうに コード 向こうの風景 ドアの向こうに @keyframes brbr{ 0%{transform:rotateY(-95deg);} 100%{transform:rotateY(95deg);} } .waku{ position:relative; width:280px; height:200px; background:linear-gradien…

どうも！LSSです！！ わざわざお姫様の画像を描いてまで作ったネタ、 little-strange.hatenablog.com お姫様の画像にしたのは、「高貴な身分の方の、ちょっとかがんだお辞儀」のような動きになるかな？と思ったからですが、出来上がった動きが「やはりどう見てもスクワット」でしたｗ 画像の作り方によっても違ってくるのかもですが、コードのほうでなんとかもう少し「お辞儀」らしくならないかな？と考えてみました。 姫のお辞儀 マウスホバーで「ごきげんよう」 ざっくり解…

どうも！LSSです！！ little-strange.hatenablog.com ですが、やはり例として分かり辛かったですね^^; 伸び縮みしているのか、単に隠れているのかという辺りが特に。 画像を使ってみるにあたり、 little-strange.hatenablog.com で使った方法をまた用いてみました。 そして、勢いで２パターン作ったので公開します^^ お姫様のお辞儀かと思ったらやっぱりスクワット ノリノリの姫 あとがき お姫様のお辞儀かと思ったらやっぱりスクワッ…

どうも！LSSです！！ little-strange.hatenablog.com は、「１枚の画像を別々に扱う」という試みでした。 元の発想は、「人物の画像の、下半分だけが縦に伸び縮みするアニメーションだったら、スクワット（または高位の女性のお辞儀）みたいになるかな？」というところでした。 今回は「下半分だけ伸び縮み」を、画像を伴わずにkeyframesで再現する事を試みてみました。 スクワットの動きを表現できるか試してみた、だけ コード 結局のところ、高さも縦位置も動作指…

…422/20220422232137.jpg'); のようになります。 あとがき 「一枚の画像を上下別々に扱う」という事をやろうとしていたのですが、それをとりあえずどう見せるか？と考えてるうちに、久々にCSSの3Dアニメになりました。 little-strange.hatenablog.com の機能限定版のような気がしないでもないですｗ 下半分のほうにオチがあるような画像を使うとなお面白いかもですね^^ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…も！LSSです！！ CSS小ネタとして、跳ねるボールを作ってみました。 と、ボールが跳ねるようなものはこれまでにも作っていましたが、「着地して跳ね返る時に横長にひしゃげる」という細かい芸を入れています。 跳ね続けるボールとfloat:left; コード 色々… 跳ね続けるボールとfloat:left; @keyframes bnda{ 0%,100%{background-position:0 0;} 50%{background-position:0 100%;} 0%,4…

…！LSSです！！ 【CSS】要素のリサイズを可能にしてみました - Little Strange Software で、CSSでのリサイズ許可を行う方法について書きましたが、これがどうもiPhoneではうまく行かない^^; ので、JavaScriptを使って「PCでもiPhoneでも、大きさを変えられる」ようにしてみました。 JavaScriptで要素リサイズ コード 難がない…わけでもなかったり 個人的な裏話 JavaScriptで要素リサイズ #rsz{ overflow…

…れて表示されますが、CSSには「ユーザー（読者）が自由にサイズ変更できるようにする」という指定があります。 今回はそれを利用して「最初は指定したサイズで表示され、ユーザーがサイズ変更で大きくする事で中身が見えるようにする」コードです。 ※追記！スマホだと操作しづらかったり、出来なかったりする場合もあるようです。試してみた範囲では、「Androidスマホ＋はてなアプリ→右下角を捉えにくいがなんとか」「iPhone＋はてなアプリ or Chrome or Safari→いずれも試…

…！LSSです！！ 「CSSのkeyframesでリズミカルなアニメーションを作ろう」という試み、なんだかこんなのが出来ました。 謎リズムアニメーション コード なんなんでしょうね？これ 変更例 謎リズムアニメーション @keyframes nazorzma{ 0%,87.6%,100%{background-position:0 0;} 12.5%,25%,37.5%{background-position:0 100%;} 37.6%,50%{background-posi…

…HTML=txt; cssc.innerHTML=txt.replace(/&/g,'&').replace(//g,'>').replace(/\n/g,''); cnvx.clearRect(0,0,650,100); cnvx.beginPath(); cnvx.moveTo(0,80-20*bt[0]); for(i=1;i0){ cnvx.lineTo(i*10,80-20*bt[i]); } } cnvx.stroke(); } 使い方 画面上に、 0～64の数字…

…も！LSSです！！ CSSのkeyframesアニメーションで、リズミカルな動きを作ったら面白いかな？と試みてみました。 たんたたたんたん、たんたん♪ コード 要となるのは%指定部分 0～100%を2の累乗数で分断するぞう君 リズム あとがき たんたたたんたん、たんたん♪ @keyframes rzma{ 0%,12.5%,18.75%,25%,37.5%,50%,62.5%,75%,87.5%,100%{transform:translatey(0px);} 3.125%,…

…何に使うん？ 例えばCSS。 keyframesやgradientで、%指定で均等に分断したくなる事がよくあります（←自分だけ？）。 そんな時、「0,50,100」や「0,25,50,75,100」程度なら即座に分かりますが、さらにその半分、そしてさらにもう半分…となると、なかなか計算が面倒くさくなってくるので、この際、コードに転用しやすい形で出力してくれるツールを、と作ってしまいました。 リズミカルなアニメーションを目指して もっと書くと、keyframesアニメーションを…

…！LSSです！！ 【CSS】でっかい下向き矢印、もうひとつのバリエーション - Little Strange Software に、 421miyako(id:m421miyako) 端を波線にするとか、全体に小さな円を書いたら水玉になりますね。色々遊べそう。 とのコメントをいただきました。 「端を波線…難しそうで面白そう」と思ったので、まずは「端が波線」の枠を作ってみる事に^^ 波打つ枠 コード 改変を考慮すると… 波打つ枠 .wvbox{ box-sizing:borde…

…」を指定する事でとっています。矢印の「傘」と「根」の高さがそれぞれ100pxなので、それに少し（10px）足して、傘の中に文字が収まるように110pxとしました。 かなり近いものを先にアレンジしていただいてたり^^ 秋の気配と夏休みの終わり - 日々のこと 前回のコードを元に、今回のものとかなり近いものを先に作られていたりしますｗ イメージを形にできると、CSSのgradientは俄然楽しくなりますね^^ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…す！！ 以前に、 【CSS小ネタ】conic-gradientで矢印を描いてみた - Little Strange Software で文中に埋め込む矢印 を作りましたが、ふと思いついて「でっかい矢印」を考えてみました。 .arrowl{ display:inline-block; background-image: conic-gradient(from 45deg at 0% 50%,#ff0000ff 0deg 90deg,#ff000000 90deg), conic…

…も！LSSです！！ CSSはお絵描きツールではありませんが、backgroundプロパティやgradient関数を使う事でちょっとしたお絵描きを楽しむ事もできます。 backgroundプロパティもgradient関数も、自在に扱えるようになるまでには色々と飲み込まないといけないところが多くて、使い慣れていかないとなかなか意味を理解する事も難しいと思われます。 そこで、今回は解説を加えながら、CSSお絵描きの入門の助けになるかも？な記事を書いてみました。 まず、divタグを用…

どうも！LSSです！！ 最近の記事、 little-strange.hatenablog.com little-strange.hatenablog.com では、多数のgradientを組み合わせて線を引き、それで囲んで枠を作ってみました。 当初思っていた以上に、（繰り返しを考えなければ）結構自由に線が引けるもので色々作ってみましたが、アレンジを加えてくださる方もおられる今、この「線の引き方」について手順をなぞって記事を書いてみるのもいいかな、と思ったりしています。 …また…

…お絵描き用途ではないCSSを強引にお絵描き風に使ってみると、こんな感じになります。 もこもこの雲 キャンディ リボン あとがき もこもこの雲 .crd{ width:300px; height:200px; padding:40px; background: radial-gradient(farthest-side at 50% 100%,transparent 94%,black 97%,transparent 100%) 30px 0/calc(33.3% - 20px…

…いない辺の長さをｚとすると、他２つの角度がなんであっても「ｘ二乗＋ｙ二乗＝ｚ二乗が成り立つ」というアレ。 CSSには calc という、計算式を扱う手段が用意されていますが、二乗は掛け算でなんとかできても平方根が取れないな、とかも考えたり。 そこから更に色々考えてるうちに、また違った囲み枠の案を思いついてしまいました。 が、記事にするには時間がちょっとかかりそうなので、後日のネタって事になりそうです^^; ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…SSです！！ 以前、CSSとSVGを併用した、 little-strange.hatenablog.com というコード記事をあげていました。 バクダンってアレです。広告の特価品や、漫画でいうと叫んでる吹き出しに使われる、トゲトゲの囲み枠ですね。 SVGを使うと本当に表現の幅がグンと広がる、広がり過ぎて面白くないぐらいですが、CSSだけで近いものは作れないか？ってな事を考えていました。 で、思いついた方法をひとつ試してみたのですが…出来上がりはなんとも言えないものになり、しば…

…すが、いつものようにCSSコードを書いてみるとどんな感じかな？と試してみました。 書いてみたコード コード さほど目新しいものはないサンプルですが^^; 今のところ、コード記事を書くのにそれほど支障なし 書いてみたコード @keyframes rbwa{ 0%,50%{background-position-x:0%;} 100%{background-position-x:100%;} } .rbw{ height:5px; background:repeating-lin…

…トで使いやすそうな CSSネタを考えてみようと思うと、枠や区切り線あたりに落ち着くのかな？という気がする今日この頃。 …そして、使えるんだかどうなんだか？な謎CSS「アニメーション区切り線」が出来ました^^; アニメーション区切り線 コード コード概要 余談：ニュートンじゃないゆりかご アニメーション区切り線 @keyframes hrcrka{ 0%,20%,28%,36%,44%,52%,60%,68%,76%,84%,92%,100%{background-positi…

…も！LSSです！！ CSSをいじっているうちに、また謎のアニメーションができました。 光の龍…？ コード 仕組み どうしてこうなった 光の龍…？ @keyframes stardragonx{ 0%{background-position-x:0%;} 100%{background-position-x:100%;} } @keyframes stardragony{ 0%{background-position-y:0%;} 100%{background-positio…

…！LSSです！！ 【CSS】疑似３D 前後関係 - Little Strange Software の回転体を増やしてみました。 疑似３D コード CSS変数を使って、個々の回転体の設定を簡略化 もっと凝った疑似３Dを見たい！という方は 疑似３D @keyframes d3dzx{ 0%{background-position-x:var(--i);} 100%{background-position-x:calc(100% - var(--i));} } @keyframe…

…Sです！！ 先日、【CSS】流星群というCSSアニメーションネタを公開しました。 光の点が斜めに移動する、というものでしたが 残念なこと - 私の好きなバラとシェルティー の影響を受け、「尾を引いて線状になった流れ星」を自分なりに考えてみました^^ また流星群 コード 仕組み あとがき また流星群 @keyframes shtstra{ 0%{background-position-y:0,100%;} 50%,100%{background-position-y:0,0%;…

…う欠点があります。 CSSには3D表現があるので、そちらを使えば良いのですが（そちらには球や曲面の表示が苦手という弱点もありますが）なんとか「疑似３D」のままで誤魔化せないか？試みてみました。 疑似３D 前後関係 コード HTML部分 外枠のCSS 他、３つのセレクタ keyframes内にz-indexの指定を追加 疑似３D 前後関係 @keyframes d3dzx{ 0%{background-position-x:0%;} 100%{background-positi…