どうも！LSSです！！ デジタルカメラやスマートフォンが普及した昨今。 フィルムカメラのように「フィルムの無駄」を気にせず、パシャパシャと気軽に撮影が楽しめるようになりましたね^^ それでも時々ふと、あの白いフチのある写真に懐かしさを覚えたりします。 スマホで撮影後に画像加工するのも手ですが、CSSなら画像はそのままでコードに少し手を加える事で、懐かしい白フチ写真を演出できます。 写真っぽい写真 コード 手順 その他の例：楕円 写真っぽい写真 コード はてなブログの「写真を投稿」機能で写真をアップロード・記事に挿入した後に、コードを付け足します。 <p style="border: 1px solid black; padding: 3%; box-shadow: 10px 10px 5px 0px gray;"><img style="display: block;" src="http

どうも！LSSです！！ 今回はブラウザゲーム…なんですが、これをゲームと言っていいのやら、どうなのやらｗ まったく考える余地のない、「完全なる運ゲー」です。 ＡかＢか？x5 というものを作ってみました ＡかＢか？x5 下にある「Ａ」または「Ｂ」。 どちらかが正解でどちらかがハズレです。 直感でどちらかをクリックすると結果が出て、次の「Ａ」「Ｂ」が現れます。 ５回出題され、正解率と その正解率に辿り着く確率が表示されます。 どちらが正解か？は完全に運任せ。完全なる運ゲーです。 本日の貴方の『直観力』を測ってみましょう^^ というものを作ってみました 「プレイヤーによる選択」があるにも関わらず、正解かハズレかは完全に運。 ちなみに、ＡＢどちらが正解かはページを開いた時点でランダムで決められていますが、２種類×５回なのでパターン数でいうと32通り（2の5乗）。 「全て正解」あるいは「全てハズレ」

どうも！LSSです！！ 以前に、様々な「ページ（記事）内に文字を隠す」方法を書いていましたが、今回もそんなひとつ。 通常、Webページ内の要素（画像・段落など）はページ記述者が指定したサイズ（指定していなければデフォルトのサイズ）で固定されて表示されますが、CSSには 「ユーザー（読者）が自由にサイズ変更できるようにする」 という指定があります。 今回はそれを利用して「最初は指定したサイズで表示され、ユーザーがサイズ変更で大きくする事で中身が見えるようにする」コードです。 ※追記！スマホだと操作しづらかったり、出来なかったりする場合もあるようです。 試してみた範囲では、「Androidスマホ＋はてなアプリ→右下角を捉えにくいがなんとか」「iPhone＋はてなアプリ or Chrome or Safari→いずれも試みるもできず」 【JavaScript】iPhoneでも要素のリサイズ -

どうも！LSSです！！ 【ツール】簡易お絵描きアプリ【試作品＋】 - Little Strange Software の「線の引き方」を根本的に見直そうとしていたところ、「完成版には入れるつもりはないけどちょっと面白い機能」がたまたま出来てしまいましたｗ 闇に葬る前に、ちょっと他の人にも見てもらいたくて、晒してみます^^ お絵描きアプリ劣化版 操作説明 ちょっと面白い機能 どうしてこうなった お絵描きアプリ劣化版 線を引く 塗りつぶす 描画時に都度消去 パスを閉じる 操作説明 まず「劣化版」としているのは、すでに作っていた「画像保存」「サイズ変更」「筆圧による太さ変更」などが実装されていない状態だからです。 キャンバス（グレーの格子模様の枠）上で、マウスドラッグか指やペンで自由に線を引く事ができます。 キャンバスの下に「線を引く」「塗りつぶす」「描画時に都度消去」「パスを閉じる」の４つのチ

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

どうも！LSSです！！ 【ツール】簡易お絵描きアプリ【試作品】 - Little Strange Software に少し機能追加したバージョンです。 簡易お絵描きアプリ 使い方 試作品＋ゆえの謎仕様 ファイルとして保存、について現在判明している事 履歴機能の実装 簡易お絵描きアプリ 幅 : px 高 : px 使い方 グレーの格子模様の四角形がキャンバスです。 キャンバス上で、マウスの左ボタンを押しながらマウスを動かすか、スマホ・タブレット等のタッチ操作可能な端末では指またはペンで、線を描く事ができます。 タッチ操作の場合、筆圧によって線の太さを調整できます（筆圧感知対応端末の場合）。 キャンバスの↑にあるスライダー及び「-」「+」のボタンで、キャンバスの幅・高さを変更する事ができます。（ボタンは微調整用で、１ピクセル単位で変更できます。） キャンバスの↓にあるもののうち、一番最初にある

どうも！LSSです！！ JavaScriptによる筆圧感知のテストがてら、簡易ながらお絵描きアプリを作ってみました。 簡易お絵描きアプリ 使い方 コード イケてないところ だいぶ悩んだところ 簡易お絵描きアプリ 使い方 マウスドラッグ、またはタッチ（ペンでも指でも）で枠内に絵を描けます。 タッチ操作の場合、筆圧感知に対応しています（お使いの端末が対応していた場合）。 枠下のメニューは左から「色変更」「全て消す」「ファイルとして保存」です。 「全て消す」は描いた絵が消えますが、一応確認ダイアログが出ます。 「ファイルとして保存」をクリックすると、日付・時刻をファイル名としたpngファイルとしてお使いの端末に保存されます。 ※追記：動作確認報告。WindowsPC＋Chrome…問題無し。Androidスマホ＋Chrome…問題無し。iPhone7（iOS15.6.1）はSafariやChro

どうも！LSSです！！ 以前に、 【CSS小ネタ】conic-gradientで矢印を描いてみた - Little Strange Software で文中に埋め込む矢印 を作りましたが、ふと思いついて「でっかい矢印」を考えてみました。 でっかい下向き矢印！ コード コードを見やすく整形するとこんな感じ 画面幅に合わせて伸縮 でっかい下向き矢印！ コード <div style="height: 200px; background:linear-gradient(to top right,#ff000000 49.9%,#ff0000 50%) 1px 100%/50% 100px no-repeat,linear-gradient(to top left,#ff000000 49.9%,#ff0000 50%) 100% 100%/50% 100px no-repeat,linear-gr

どうも！LSSです！！ radial-gradientとlinear-gradientを駆使して、囲み枠を作ってみました。 本来お絵描き用途ではないCSSを強引にお絵描き風に使ってみると、こんな感じになります。 もこもこの雲 キャンディ リボン あとがき もこもこの雲 もこもこの雲 コード <style> .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) 30px no-repeat, radial-gradient(farthest-side at 50% 100%,transparent 94%,b

どうも！LSSです！！ ブログ・Webサイトで使いやすそうな CSSネタを考えてみようと思うと、枠や区切り線あたりに落ち着くのかな？という気がする今日この頃。 …そして、使えるんだかどうなんだか？な謎CSS「アニメーション区切り線」が出来ました^^; アニメーション区切り線 コード コード概要 余談：ニュートンじゃないゆりかご アニメーション区切り線 コード <style> @keyframes hrcrka{ 0%,20%,28%,36%,44%,52%,60%,68%,76%,84%,92%,100%{background-position-x:calc(50% - 40px),calc(50% - 20px),50%,calc(50% + 20px),calc(50% + 40px);} 24%{background-position-x:0,calc(50% - 20px),50%

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

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

どうも！LSSです！！ little-strange.hatenablog.com で、惑星の公転運動っぽい動きを作っていました。 が、あくまでも「疑似」の悲しさ、 little-strange.hatenablog.com と同じで「前後関係が表現できない」事から、例えば中央に太陽、動くのを地球とすると、重なると３Dではない事が露呈してしまうという欠点があります。 CSSには3D表現があるので、そちらを使えば良いのですが（そちらには球や曲面の表示が苦手という弱点もありますが）なんとか「疑似３D」のままで誤魔化せないか？試みてみました。 疑似３D 前後関係 コード HTML部分 外枠のCSS 他、３つのセレクタ keyframes内にz-indexの指定を追加 疑似３D 前後関係 地球（？）が太陽（？）の向こう側を回る時には隠れ、手前側を回る時には太陽を隠しています。 コード <style

どうも！LSSです！！ ふと思いついて、CSSで流星群を作ってみました。 流星群 コード あとがき 流星群 流星群をCSSで作ってみました。 コード <style> @keyframes stardusta{ 0%{background-position:0 0,5000px 0,0 0;} 100%{background-position:0 0,0 0,0 0;} } .stardust{ height:200px; background-image: repeating-linear-gradient(135deg,#000000 0px 9px,#00000000 10px 13px,#000000 14px 100px), repeating-linear-gradient(45deg,#000000 0px 132px,#00000000 133px 136px,#000000

どうも！LSSです！！ このブログで、keyframesとanimationを使ったCSSアニメーションを色々試みてきました。 とっつきにくいながらも、分かってくると面白いkeyframesですが、LSSだけ分かっていても他の方が置いてけぼりだと「コードを少し変えて使いたい」時などに手をつけられない、というのがありそうです。 今回はこれまでに自分が理解してきたkeyframesアニメーションを、keyframes定義の内容に絞って、簡単なものから徐々に手を加えていく様子を記事にしてみました。 その１ シンプルに落下 その２ 着地後静止 その３ バウンド その４ ちょっとだけリアルに あとがき その１ シンプルに落下 コード <style> @keyframes rakka{ 0%{top:0px;} 100%{top:330px;} } .waku{ position:relative;

どうも！LSSです！！ little-strange.hatenablog.com に少し手を加え、水滴が水面に落ちてそこに波紋が広がる、というものにしてみました。 サンプルとコード、そして「LSSがコード改変した手順を長々と」書いています。 水滴落下、からの透過波紋 コード コード改変の流れ あとがき おまけ：波紋の色変更 水滴落下、からの透過波紋 コード <style> @keyframes trwavea{ 0%{background-size:20px 10px,100% 100%,100% 100%;} 95%,100%{background-size:20px 30px,2000% 2000%,100% 100%;} 0%{background-position:50% -100%,50% 50%,0 0;} 100%{background-position:50% 50%,5

どうも！LSSです！！ 以前、 【CSS】水面の波紋アニメーション - Little Strange Software 【CSS】音波攻撃！【水面の波紋アレンジ】 - Little Strange Software と、波紋アニメーションCSSを２種類、作ってみました。 どちらも、輪がだんだん大きくなり、最後は枠外に出ていくもので、その後の波がどうなったのかは誰も知らない…というものでした。 その波紋を「枠の中で完結させたい」「ただし、パッと消えるような事にはしたくない」と思った場合、「徐々に透過していく」という表現が考えられます。 ただ…そもそもこのアニメーション、「radial-gradientの内容は、keyframesの『徐々に変化』に対応させられない」のを、「background-sizeを変化させる」事で 円の大きさをアニメーション変化させていたもので、輪の色（透過度含む）もま

どうも！LSSです！！ 「雨降りCSSコード生成ツール」完成しました！ 雨降りCSSコード生成ツール 使い方 雨降りCSSコード生成ツール 速度:秒（雨枠１つ分、横に移動するのにかかる時間） 雨の色: 雨の太さ:px 雨の角度:deg 雨の横位置:px（雨の長さにも影響） 雨枠の幅:px 雨枠の高さpx 雨２の横ズレ:px 雨２の縦ズレ:px 雨３の横ズレ:px 雨３の縦ズレ:px 背景色グラデーション: コード 使い方 雨が降っているアニメーション、調整用コントロール、コード、があります。 調整用コントロールの内容を変更する事で、リアルタイムに雨のアニメーションが変化します。（アニメーション速度、雨の角度など） 色々変えてみて遊べる他、調整を加えたアニメーションを表示するためのコードが表示されます。（こちらも調整用コントロールの内容を変更した時点でリアルタイムに内容生成されます） 気に入

どうも！LSSです！！ はてなブログには、Twitterとの連携機能があります。 自分もTwitterとは連携していて、記事を書き上げて投稿した後は、その画面からTwitterにも投稿のお知らせを投げています^^ と、その他に、はてなブログにはアイキャッチ画像を指定したり、Canvaの機能と提携してアイキャッチ画像を作る機能もあります。 特に指定しないで、記事中に画像を使っているとそれがアイキャッチ画像になったりもしますね。 と、そこで…ブログ投稿＆ツイートした後で、「ああ！アイキャッチ画像これにするつもりじゃなかったのに！！」とか、画像自体の内容にとんでもない間違いを見つけて訂正したくなる事も出てきますｗ ブログのアイキャッチ画像は普通に訂正できます ツイート上のアイキャッチ画像も変えるには という事例を最近ちらほら見かけるので、 ブログのアイキャッチ画像は普通に訂正できます 投稿済みの

どうも！LSSです！！ 今回はまた、CSSのkeyframesアニメーションで遊んでみました。 瞬く星空 コード 星が瞬く仕組み というネタを考えたのですが 瞬く星空 瞬く星空 コード <style> @keyframes twstara{ 0%{background-position:0px 0px,0px 0px,0px 0px;} 100%{background-position:0px 0px,0px 0px,0px 300px;} } .twstar{ height:300px; background-image: repeating-linear-gradient(45deg,black 0px 11px,transparent 13px,black 15px 30px), repeating-linear-gradient(135deg,black 0px 11px,tran