Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

HTMLなど

【CSS小ネタ】radialなドッグイヤーもどき

どうも!LSSです!! CSSで表現されるものに「ドッグイヤー」と呼ばれるものがあります。 ちょうど紙の角を少し、45度に折ったような表現で、使われている例もCSSコードもあちこちで見かけます。 今回は「ピシッと折ったドッグイヤーではなく、ふんわりめく…

【CSS小ネタ】写真っぽい写真【はてなブログ用】

どうも!LSSです!! デジタルカメラやスマートフォンが普及した昨今。 フィルムカメラのように「フィルムの無駄」を気にせず、パシャパシャと気軽に撮影が楽しめるようになりましたね^^ それでも時々ふと、あの白いフチのある写真に懐かしさを覚えたりしま…

【CSS/小ネタ】ドアの向こうに

どうも!LSSです!! 今回はCSS小ネタです。 CSSの3D表現を忘れそうになっていたので、個人的なリハビリにw ドアの向こうに コード 向こうの風景 ドアの向こうに @keyframes brbr{ 0%{transform:rotateY(-95deg);} 100%{transform:rotateY(95deg);} } .waku…

【CSS】姫のお辞儀【backgroundプロパティアニメーション】

どうも!LSSです!! わざわざお姫様の画像を描いてまで作ったネタ、 little-strange.hatenablog.com お姫様の画像にしたのは、「高貴な身分の方の、ちょっとかがんだお辞儀」のような動きになるかな?と思ったからですが、出来上がった動きが「やはりどう見…

【CSS】姫のスクワット(?)

どうも!LSSです!! little-strange.hatenablog.com ですが、やはり例として分かり辛かったですね^^; 伸び縮みしているのか、単に隠れているのかという辺りが特に。 画像を使ってみるにあたり、 little-strange.hatenablog.com で使った方法をまた用いてみ…

【CSS/実験】スクワットの動きを表現できるか試してみた、だけ

どうも!LSSです!! little-strange.hatenablog.com は、「1枚の画像を別々に扱う」という試みでした。 元の発想は、「人物の画像の、下半分だけが縦に伸び縮みするアニメーションだったら、スクワット(または高位の女性のお辞儀)みたいになるかな?」と…

【CSS】画像の下半分がマウスホバーで出現

どうも!LSSです!! 画像の下半分がマウスホバーで出現 コード 枠サイズの調整 画像の指定 あとがき 画像の下半分がマウスホバーで出現 写真にマウスカーソルをのせてみてください(スマホの場合はタップ) .halfpic{ position:relative; width:280px; heig…

【CSS】跳ね続けるボールとfloat:left;【小ネタ】

どうも!LSSです!! CSS小ネタとして、跳ねるボールを作ってみました。 と、ボールが跳ねるようなものはこれまでにも作っていましたが、「着地して跳ね返る時に横長にひしゃげる」という細かい芸を入れています。 跳ね続けるボールとfloat:left; コード 色…

【JavaScript】iPhoneでも要素のリサイズ

どうも!LSSです!! 【CSS】要素のリサイズを可能にしてみました - Little Strange Software で、CSSでのリサイズ許可を行う方法について書きましたが、これがどうもiPhoneではうまく行かない^^; ので、JavaScriptを使って「PCでもiPhoneでも、大きさを変え…

【CSS】要素のリサイズを可能にしてみました

どうも!LSSです!! 以前に、様々な「ページ(記事)内に文字を隠す」方法を書いていましたが、今回もそんなひとつ。 通常、Webページ内の要素(画像・段落など)はページ記述者が指定したサイズ(指定していなければデフォルトのサイズ)で固定されて表示…

【CSS】謎リズムアニメーション

どうも!LSSです!! 「CSSのkeyframesでリズミカルなアニメーションを作ろう」という試み、なんだかこんなのが出来ました。 謎リズムアニメーション コード なんなんでしょうね?これ 変更例 謎リズムアニメーション @keyframes nazorzma{ 0%,87.6%,100%{ba…

【JavaScript】イベントオブジェクトの子要素【調査用】

どうも!LSSです!! 最近、JavaScriptのマウスイベント・タッチイベントに反応する仕掛けを作る事が増えてきました。 【ツール?】いろは歌作成補助ツール - Little Strange Software 【ツール】簡易お絵描きアプリ【試作品+】 - Little Strange Software …

【CSS】リズミカルなアニメーション【実験段階】

どうも!LSSです!! CSSのkeyframesアニメーションで、リズミカルな動きを作ったら面白いかな?と試みてみました。 たんたたたんたん、たんたん♪ コード 要となるのは%指定部分 0~100%を2の累乗数で分断するぞう君 リズム あとがき たんたたたんたん、たん…

【JavaScript】0~100%を2の累乗数で分断するぞう君【謎ツール】

どうも!LSSです!! …謎なものを作ってしまいました。 0~100%を2の累乗数で分断するぞう君 What's this? 何に使うん? リズミカルなアニメーションを目指して このツールのコード 0~100%を2の累乗数で分断するぞう君 2 4 8 16 32 64 slct.addEventListener(…

簡易お絵描きアプリ、ブラウザごとの差異

どうも!LSSです!! little-strange.hatenablog.com では、公開前の動作検証にもだいぶ悩まされましたが、公開後にも色々と閲覧環境ごとの違いが見つかりました。 自分で確認できる部分は確認し、「使い方」のところに赤文字で「追記」として書き足しておき…

【CSS】波打つ枠

どうも!LSSです!! 【CSS】でっかい下向き矢印、もうひとつのバリエーション - Little Strange Software に、 421miyako(id:m421miyako) 端を波線にするとか、全体に小さな円を書いたら水玉になりますね。色々遊べそう。 とのコメントをいただきました。 …

【CSS】でっかい下向き矢印、もうひとつのバリエーション

どうも!LSSです!! little-strange.hatenablog.com のバリエーション、もうひとつ考えていたものを公開します。 だんだん太くなる線 コード 文字関連の指定 かなり近いものを先にアレンジしていただいてたり^^ だんだん太くなる線 ちょっとアレンジ コード

【CSS】ブログで使える、でっかい下向き矢印!【小ネタ】

どうも!LSSです!! 以前に、 【CSS小ネタ】conic-gradientで矢印を描いてみた - Little Strange Software で文中に埋め込む矢印 を作りましたが、ふと思いついて「でっかい矢印」を考えてみました。 .arrowl{ display:inline-block; background-image: con…

gradientお絵描きについて【ぼんやり構想中】

どうも!LSSです!! 最近の記事、 little-strange.hatenablog.com little-strange.hatenablog.com では、多数のgradientを組み合わせて線を引き、それで囲んで枠を作ってみました。 当初思っていた以上に、(繰り返しを考えなければ)結構自由に線が引ける…

【CSS】gradientで描く線画囲み枠3種!【雲/キャンディ/リボン】

どうも!LSSです!! radial-gradientとlinear-gradientを駆使して、囲み枠を作ってみました。 本来お絵描き用途ではないCSSを強引にお絵描き風に使ってみると、こんな感じになります。 もこもこの雲 キャンディ リボン あとがき もこもこの雲 .crd{ width:3…

【謎CSS】バクダンになりそこねた囲み枠

どうも!LSSです!! 以前、CSSとSVGを併用した、 little-strange.hatenablog.com というコード記事をあげていました。 バクダンってアレです。広告の特価品や、漫画でいうと叫んでる吹き出しに使われる、トゲトゲの囲み枠ですね。 SVGを使うと本当に表現の…

【謎CSS】アニメーション区切線

どうも!LSSです!! ブログ・Webサイトで使いやすそうな CSSネタを考えてみようと思うと、枠や区切り線あたりに落ち着くのかな?という気がする今日この頃。 …そして、使えるんだかどうなんだか?な謎CSS「アニメーション区切り線」が出来ました^^; アニメ…

【謎CSSアニメーション】光の龍…?

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

【CSS】回転体を増やした疑似3D

どうも!LSSです!! 【CSS】疑似3D 前後関係 - Little Strange Software の回転体を増やしてみました。 疑似3D コード CSS変数を使って、個々の回転体の設定を簡略化 もっと凝った疑似3Dを見たい!という方は 疑似3D @keyframes d3dzx{ 0%{background-p…

【CSS】また流星群(今度は線形)

どうも!LSSです!! 先日、【CSS】流星群というCSSアニメーションネタを公開しました。 光の点が斜めに移動する、というものでしたが 残念なこと - 私の好きなバラとシェルティー の影響を受け、「尾を引いて線状になった流れ星」を自分なりに考えてみまし…

【CSS】疑似3D 前後関係

どうも!LSSです!! little-strange.hatenablog.com で、惑星の公転運動っぽい動きを作っていました。 が、あくまでも「疑似」の悲しさ、 little-strange.hatenablog.com と同じで「前後関係が表現できない」事から、例えば中央に太陽、動くのを地球とする…

【おまけ】疑似3D、再生時間をずらすと…?

どうも!LSSです!! 【CSS】疑似3D【実験】 - Little Strange Software で、楕円(っぽい)動きで3D(っぽい)ものを表現してみました。 記事中で、「最初だけ発生する遅延を変更するとどうなるか」を書いていましたが、他に「横の動き」と「縦の動き+サ…

【CSS】疑似3D【実験】

どうも!LSSです!! CSSには3Dを表現するためのプロパティが用意されています。 参考:【CSS】ブロック遊び【実験】 - Little Strange Software が、少々欠点もあって…例えば「球」を表現するのが苦手だったりもするんですね。 一方で、radial-gradientを…

【CSS】流星群

どうも!LSSです!! ふと思いついて、CSSで流星群を作ってみました。 流星群 コード あとがき 流星群 @keyframes stardusta{ 0%{background-position:0 0,5000px 0,0 0;} 100%{background-position:0 0,0 0,0 0;} } .stardust{ height:200px; background-im…

【CSS】落下アニメーション【keyframesの復習】

どうも!LSSです!! このブログで、keyframesとanimationを使ったCSSアニメーションを色々試みてきました。 とっつきにくいながらも、分かってくると面白いkeyframesですが、LSSだけ分かっていても他の方が置いてけぼりだと「コードを少し変えて使いたい」…