どうも！LSSです！！ little-strange.hatenablog.com の派生で、いくつか考えてみました。 ブログでの使い勝手…にとらわれず、CSSアニメーションの動きを見て楽しむ感じ？ 跳ねる画像 跳ねるボール二次元版 ブロック崩し風（ブロックはないけどｗ） あとがき…

どうも！LSSです！！ 【CSS】跳ねるボール【多重アニメーションの実験】 - Little Strange Software に、さじさんからいただいたコメント、 さじ(id:conasaji) 円を足しつつ、タイミングずらしたら不思議な何かができそうです。（何かはわからないw）昨日ち…

どうも！LSSです！！ なんとなく「２つのkeyframesアニメーションで、２つめの動きが１つめの動きの状態に影響されて変化するようなもの」を試してみたい と思いたち、作ってみると こういうものができました。 跳ねるボール コード ２つのアニメーション あ…

どうも！LSSです！！ だいぶ前から「なんとなく雰囲気だけ」のCSSアニメーション案で、雰囲気だけでどんな見た目にするかとか思いつかずにいる案があったりします。 その雰囲気というのも「ウィーン、ガシャン、って感じの」というだけｗ「動」と「静」の組…

どうも！LSSです！！ 15パズル画像版に手をつけはじめて、ほぼほぼ出来かけているのですが…謎の10pxぐらいのズレに気づき、marginやらpaddingやら設定しても治らず。 と、すっごく単純なコードで試しても再現する事に気づき、初めて「imgタグそのものにそう…

どうも！LSSです！！ もう何か月も前の記事ですが、 little-strange.hatenablog.com で頭を悩ませていた問題が解決しました！ 画像の16分割 コード background-positionの%指定の特異性 16分割する意味 画像の16分割 画像を16分割した上で、borderで各枠に盛…

どうも！LSSです！！ 【CSS+SVG】雲型の枠を作れないか試み中…【実験】 - Little Strange Software で試みていた装飾枠ですが、色々と応用してみました。 バクダン その１ バクダン その２ 雲型の枠 その４ その他の調整について あとがき バクダン その１ '…

どうも！LSSです！！ 昨日、少しこぼしましたが、 border-image でやってみたい事があり、radial-gradientとの組み合わせでなんとかできないか、と試みていましたがなかなか思うように行かず^^; で、「コードで仮想的に画像を作る」方法としては、インライン…

どうも！LSSです！！ だいぶ古い記事ですが、 little-strange.hatenablog.com で、CSSフィルターのdrop-shadowを使ってみた事がありました。 CSSフィルターは他にも色々あり、それを用いて little-strange.hatenablog.com ↑こんな事も試してみた事がありまし…

どうも！LSSです！！ ふと思いつきで、radial-gradientとconic-gradientを重ねた「楕円形の吹き出し」を作ってみました。 吹き出しについては過去に、 【CSS】吹き出しCSSについて解説してみます！ - Little Strange Software 【CSS】色違い吹き出し - Littl…

どうも！LSSです！！ 昔、HTML4.0の頃に自分も作ってみた事はありましたが、ちょっと試しに「ありきたりなマウスストーカー」を作ってみました。 ※1/25追記。PC（Windows＋Chrome）とiPhone7で動作確認していましたが、Androidスマホで動作しなかったため、…

どうも！LSSです！！ little-strange.hatenablog.com で作った棒グラフも、 【CSS】お手軽（？）な円グラフの描き方【小ネタ】 - Little Strange Software ↓【CSS】お手軽円グラフの文字入れ・その他 - Little Strange Software と同様に文字を入れてみまし…

どうも！LSSです！！ 【CSS】お手軽（？）な円グラフの描き方【小ネタ】 - Little Strange Software 【CSS】お手軽円グラフの文字入れ・その他 - Little Strange Software で円グラフをCSSで表現する事に挑戦しましたが、その際にコメントでいただいた「棒グ…

どうも！LSSです！！ 【CSS】お手軽（？）な円グラフの描き方【小ネタ】 - Little Strange Software で、お手軽なコードで円グラフをWebページに入れる方法について書きました。 実際に円グラフを置く場合には「どの色が何を示しているのか」や「数値でいう…

どうも！LSSです！！ ブログやWebサイトを構築されている皆様、ページ内に「円グラフ」を使いたくなった事はありますか？ 自分は今のところありません。 が、もし必要となった場合… お絵描きソフトで描く Excelのグラフ機能を使って描く など、他のソフトを…

どうも！LSSです！！ 昨日、「ブログの背景に罫線を描き、その上に文字が綺麗に並ぶ」よう挑戦した記事を書きました。 little-strange.hatenablog.com ただし、これは背景として罫線模様のlinear-gradientを、そして行の高さとなるline-heightプロパティを模…

どうも！LSSです！！ ちょっと背景を罫線にしてみました。 line-height で、行の高さもあわせてみたのですが…さていかがなものか？ …これが、一見うまくいっているように見えて、「ちょっとした事」で崩れたりします^^; 例えば…ちょっと文字を大きくしてみた…

どうも！LSSです！！ 【ツール】ハートマーク背景コード生成ツール - Little Strange Software で様々なハートマークを描けるようになりました。 ハートマークはバレンタインデーからの連想ですが、トランプのマークのひとつでもありますね。 とすれば、スペ…

どうも！LSSです！！ 和柄CSSチャレンジ、今回は「青海波」です。 「あおうみなみ」と訓読みしたくなりましたが、「せいがいは」または「せいかいは」と読むようです。 画像検索してみると、そのパターンも必ずしも決まっているわけではなく、様々なバリエー…

どうも！LSSです！！ 最初に思った以上に手ごわかった模様「千鳥格子」。 また閃きがあり、試してみたところ、うまくいきました^^ 千鳥格子 コード 模様の構成 繰り返し模様が面白い^^ 千鳥格子 .chidori{ width:300px; height:200px; background: conic-gra…

どうも！LSSです！！ CSSの背景模様、今回は「分銅繋ぎ」に挑戦してみました。 分銅繋ぎ コード コード解説 余録・千鳥格子に失敗したの巻 分銅繋ぎ .fundou{ width:300px; height:200px; background: radial-gradient(farthest-side circle at 100% 100%,tr…

どうも！LSSです！！ 【CSS】CSSオンリーでレンガ模様・改善版 で、conic-gradientを使う事で複雑な繰り返し模様が作れそう、と味をしめました。 四角ベースの模様ならかなり自由に作れそうですが、conic-gradientらしさを活かしつつ、違う繰り返し模様も「…

どうも！LSSです！！ little-strange.hatenablog.com では、ながらく方法を思いつけなかった事が、「強引ながら」解決・実現したのですが…その後「強引じゃない上にコード量も少なく、綺麗にレンガ模様を描く」方法を思いついてしまいました。 レンガ模様 コ…

どうも！LSSです！！ もうかなり前の記事になりますが、 little-strange.hatenablog.com 「CSSでレンガ模様の繰り返し背景を作る」事に挑戦しようとして、繰り返し無しならできるものの繰り返しを考慮すると…SVGを併用しないとできなかった、という事があり…

どうも！LSSです！！ 昨日のおみくじのコード解説をやってみます。 little-strange.hatenablog.com おみくじのコード コード解説 配列変数.lengthを使用しているので 容赦のない均等な確率 おみくじのコード <style>#omikuji{width:280px;padding:10px;font-size:40…

どうも！LSSです！！ 2021年もまもなく終わる頃、またちょっと変わったものを作ってみました。 画面左下に表示されています コード 一部解説 あとがき 画面左下に表示されています #scrlm{ position:fixed; bottom:50px; left:10px; border-radius:50%; widt…

どうも！LSSです！！ よく見かける内容ですが、CSSだけでは実装ができない、もしくは難しく、JavaScriptと組み合わせて実現する仕組みを作ってみました。 スクロールに応じた変化 コード コード解説 あとがき スクロールに応じた変化 画面スクロールにあわせ…

どうも！LSSです！！ ちょうど一年前の記事、【Merry】聖なる夜に【Christmas】と同様、この記事限定の背景仕様でお送りします。 年に一度の特別な日。 今年はどんなネタで行こうかな、と考えていました。 クリスマスツリー（ブロック製） 以前の記事の追加…

どうも！LSSです！！ 今年も残すところあとわずかとなりました。 一年を振り返ると…だいぶCSSばかりやってたような気がしますｗ @keyframes linemovea{ 0%{background-position:0% 0%,100% 0%,100% 0%;} 100%{background-position:0% 0%,100% 0%,0% 0%;} } .…

どうも！LSSです！！ すっかり寒くなりましたね。 こたつやヒーター、エアコンなどの暖房器具が恋しくなる今日この頃。 …それはそれとして、最近「炎っぽいものを描こうと思ったら、色遣いはどうするのが良いか」みたいな事を考えていて、それをCSSで試して…