2022-01-01から1ヶ月間の記事一覧
どうも!LSSです!! 【CSS+SVG】雲型の枠を作れないか試み中…【実験】 - Little Strange Software で試みていた装飾枠ですが、色々と応用してみました。 バクダン その1 バクダン その2 雲型の枠 その4 その他の調整について あとがき バクダン その1 '…
どうも!LSSです!! 昨日、少しこぼしましたが、 border-image でやってみたい事があり、radial-gradientとの組み合わせでなんとかできないか、と試みていましたがなかなか思うように行かず^^; で、「コードで仮想的に画像を作る」方法としては、インライン…
どうも!LSSです!! しばらく、border-imageプロパティと格闘していたら、頭が沸きましたw border-image の検索結果 - Little Strange Software …うん、いったん忘れる事にしますw(border-imageとradial-gradientの組み合わせについて考えていました) …
どうも!LSSです!! だいぶ古い記事ですが、 little-strange.hatenablog.com で、CSSフィルターのdrop-shadowを使ってみた事がありました。 CSSフィルターは他にも色々あり、それを用いて little-strange.hatenablog.com ↑こんな事も試してみた事がありまし…
どうも!LSSです!! Microsoft365(旧称Office365)…WordやExcelなどのいわゆるOfficeソフトですね。 それに昔から「図形の挿入」機能があり、多角形や矢印、フキダシなど様々な図形を用意に挿入する機能がありました。(図形・図・オートシェイプなど色々…
どうも!LSSです!! ふと思いつきで、radial-gradientとconic-gradientを重ねた「楕円形の吹き出し」を作ってみました。 吹き出しについては過去に、 【CSS】吹き出しCSSについて解説してみます! - Little Strange Software 【CSS】色違い吹き出し - Littl…
どうも!LSSです!! 昨日の記事、 little-strange.hatenablog.com ですが、公開後に「実はAndroidスマホで動作しない」事が判明し、先ほどAndroidでも動作するように修正しました。 公開前に、PCとiPhoneで動作確認はしていたのですが、まさか「iPhoneで動…
どうも!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です!! はてなブログ「今週のお題」ですが…なんかすごく気の早いお題ですねw 今年が始まって21日めですが、まだこれからというところなので、期待したいものを考えると… 癒 「いやし」、としておきます。 …
どうも!LSSです!! 【CSS】お手軽(?)な円グラフの描き方【小ネタ】 - Little Strange Software で、お手軽なコードで円グラフをWebページに入れる方法について書きました。 実際に円グラフを置く場合には「どの色が何を示しているのか」や「数値でいう…
どうも!LSSです!! ブログやWebサイトを構築されている皆様、ページ内に「円グラフ」を使いたくなった事はありますか? 自分は今のところありません。 が、もし必要となった場合… お絵描きソフトで描く Excelのグラフ機能を使って描く など、他のソフトを…
どうも!LSSです!! ちょっと思いついた事があって、CSSネタで記事を書いていたのですが…iPhoneで見ると見事にズレまくりw 解決方法はありそうな気がするのですが…。という「つまづきの記録」記事です。 丸で囲む文字 PC+Chromeではそこそこ正常 解決策は…
どうも!LSSです!! 「日記」カテゴリですが、これは1/16の日曜日の事。購読中のブログのとある記事に触発され、探索の旅路に出たのでした。 hukunekox.hatenadiary.jp ↑全国の都道府県の名勝・名産を はにわのハニーズが紹介するシリーズ、山形編。の最後…
どうも!LSSです!! 昔、日本ではNHKで放送されていた海外ドラマの名作に「フルハウス」というのがありました。 全世界的に人気があったらしく、とても長く続いたドラマで、今はネットフリックス限定配信の「フラーハウス」という続編がありますね。 大のフ…
どうも!LSSです!! 昨日、「ブログの背景に罫線を描き、その上に文字が綺麗に並ぶ」よう挑戦した記事を書きました。 little-strange.hatenablog.com ただし、これは背景として罫線模様のlinear-gradientを、そして行の高さとなるline-heightプロパティを模…
どうも!LSSです!! ちょっと背景を罫線にしてみました。 line-height で、行の高さもあわせてみたのですが…さていかがなものか? …これが、一見うまくいっているように見えて、「ちょっとした事」で崩れたりします^^; 例えば…ちょっと文字を大きくしてみた…
どうも!LSSです!! 【ツール】ハートマーク背景コード生成ツール - Little Strange Software で様々なハートマークを描けるようになりました。 ハートマークはバレンタインデーからの連想ですが、トランプのマークのひとつでもありますね。 とすれば、スペ…
「ハートマーク背景コード生成ツール」を作ってみました。
どうも!LSSです!! はてなブロガーの皆様には、今さら記事にするまでもない話ですが…今日、はてなスターの仕様ががらっと変わりましたね! staff.hatenablog.com 最初、その時読んでたブログの人がカスタマイズしたのかと思っちゃいましたw まだ変わった…
どうも!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です!! このブログに「ブラウザゲームそのままプレイ カテゴリーの記事一覧」というブラウザゲームカテゴリがありますが、「この正月中にすごろくゲームでも作りたかったな(仕様が固まらなくて作れず)」とか「神経衰弱をpreserved-3dを用いて…
どうも!LSSです!! little-strange.hatenablog.com では、ながらく方法を思いつけなかった事が、「強引ながら」解決・実現したのですが…その後「強引じゃない上にコード量も少なく、綺麗にレンガ模様を描く」方法を思いついてしまいました。 レンガ模様 コ…
どうも!LSSです!! もうかなり前の記事になりますが、 little-strange.hatenablog.com 「CSSでレンガ模様の繰り返し背景を作る」事に挑戦しようとして、繰り返し無しならできるものの繰り返しを考慮すると…SVGを併用しないとできなかった、という事があり…
どうも!LSSです!! 三が日最終日! 姪っ子(赤さん)もすっかり馴染んだところで、帰ってしまいました^^; また当人が忘れる前に来るように、と妹(ママ)には言っておきましたw さて、かなり以前に little-strange.hatenablog.com JavaScriptでcanvas要素…
どうも!LSSです!! 昨日のおみくじのコード解説をやってみます。 little-strange.hatenablog.com おみくじのコード コード解説 配列変数.lengthを使用しているので 容赦のない均等な確率 おみくじのコード <style>#omikuji{width:280px;padding:10px;font-size:40…