どうも！LSSです！！ これまで何度か「CSSでお絵描き」をやってきましたが、今回はその中でも特にシンプルな「linear-gradientで風景を描く」ものをツール化してみました。 linear-gradientで遊ぼう！ 使い方 linear-gradientで遊ぼう！ コード 使い方 色選択ボックスとスライダーのセットが９つ、並んでいます。 ここで指定された色がそのまま、「上から下に向かうlinear-gradient」に設定されたグラデーションが、下の枠に反映されます。 スライダーはそれぞれの位置指定（%）に該当します。 色選択やスライダーをいじると、リアルタイムに枠のグラデーションが変化し、またその状態のlinear-gradientのコードが表示されます。 CSSとしてこの生成されたコードを使用する場合は、 background-image:linear-gradient(なん

どうも！LSSです！！ わざわざお姫様の画像を描いてまで作ったネタ、 little-strange.hatenablog.com お姫様の画像にしたのは、「高貴な身分の方の、ちょっとかがんだお辞儀」のような動きになるかな？と思ったからですが、出来上がった動きが「やはりどう見てもスクワット」でしたｗ 画像の作り方によっても違ってくるのかもですが、コードのほうでなんとかもう少し「お辞儀」らしくならないかな？と考えてみました。 姫のお辞儀 マウスホバーで「ごきげんよう」 ざっくり解説 姫のお辞儀 延々とお辞儀を繰り返す、腰の低いお姫様です^^ コード <style> @keyframes ozga{ 0%,30%{height:200px;} 90%,100%{height:100px;} } @keyframes ozgb{ 0%,30%{top:0px;} 90%,100%{top:100p

どうも！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です！！ ブログやWebサイトで使用できる、虹色の区切り線を４種、用意してみました。 虹色区切り線 境目のない虹色グラデーション 虹色繰り返し区切り線 虹色繰り返しドット区切り線 区切り線の太さ・マーカーとしての使用について 虹色区切り線 コード <div style="background: linear-gradient(90deg,red 0% 13%,orange 16% 27%,yellow 30% 41%,green 44% 55%,lightblue 58% 69%,blue 72% 83%,purple 86% 100%) 0 50%/100% 3px repeat-x;"> </div> ７色、わかれていながらも境目を少しグラデーションでぼかしているタイプの区切り線です。 境目のない虹色グラデーション コード <div style="background:

どうも！LSSです！！ 長く勤めた職場に退職届を提出し、4/5付で退職の有給休暇消化期間中です。 次の仕事どうするかな…さほど貯えがあるでもなし、とりあえず失業保険もらって食いつなげるうちに就職活動なりバイトなり探すか？と思っていたのですが…。 フリーランスになる事になりました 長所・短所 一年先んじてフリーランスになった先輩ブロガーさん フリーランスになる事になりました フリーランス…個人事業主…他人事でなくなってきた感。 やってやれない事はない精神でいきますか。まだ決まってないけども🤣— LSS (@LSS0324) 2022年3月23日 ありがたい事に、ある企業様から一年限定のオファーをいただいており、内容的には「辞めた意味がなくなる」恐れをはらんでいながらも、話を進めていました。 そこからも紆余曲折ありましたが、結局「正社員・契約社員といった雇用関係ではなく、業務委託という形で」

どうも！LSSです！！ 先日、 little-strange.hatenablog.com にて、フォームパーツであるボタンをリンク代わりに使用するサンプルを公開しました。 「ページ移動の処理をJavaScriptで行う」というものでしたが、本来ならページの移動は「aタグによるリンク」で行うものなので、aタグをCSS装飾でボタン風に見せかけるほうがスマートですね。（デザインの自由も効く、という利点もあります^^） という事で、今回は「マウスカーソルがボタンに乗った時」「ボタンをクリックした時」に見た目が変化するボタン風のリンクの作り方をご紹介します。 リンクボタン CSS版 コード コード概要 なので、作り方としては リンクボタン CSS版 クリックするのはこちらです！ コード <style> .linkbtn{ border:1px solid black; border-radius:

どうも！LSSです！！ 昨日のおみくじのコード解説をやってみます。 little-strange.hatenablog.com おみくじのコード コード解説 配列変数.lengthを使用しているので 容赦のない均等な確率 おみくじのコード <style> #omikuji{ width:280px; padding:10px; font-size:40px; font-weight:bold; background-color:#eeeeee; border:1px solid black; background-image:radial-gradient(circle 80px at 70% 30%,white,#eeeeee); user-select:none; } </style> <div id="omikuji">おみくじ</div> <script> cnt=0; kuji=

どうも！LSSです！！ 以前、公開した little-strange.hatenablog.com というフォトギャラリーの仕組みがあります。 「六角」の名の通り、見せたい画像が６枚ある場合にちょっと面白い見せ方ができる、というものでしたが、より多い・少ない場合には使えないという最大の欠点が！ 今回はその欠点を解消し、より多い枚数でも少ない枚数でも使えるようにしたものを「多角形フォトギャラリー」として公開します^^ 多角形フォトギャラリー コード 使い方 難点 多角形フォトギャラリー コード <style> #ph3d{ position:relative; transform-style:preserve-3d; width:150px; height:150px; left:75px; transition:1.5s; transform:rotateX(-10deg) rotateY

どうも！LSSです！！ ※画面がアレですが、お使いの端末は（多分）正常ですｗ １２月もそろそろ中盤。 クリスマスや大晦日が近づいていると同時に、大掃除のシーズンでもありますね。 去年のこの時期、このブログではクリスマスに向けて、 little-strange.hatenablog.com という準備を経て、 little-strange.hatenablog.com で盛大に雪を降らせたりしたものでした。 今年もクリスマスにはなにか凝った装飾をやってみたいものですが…ちょっと準備的に、思いついた事をこの記事上で試してみます。 画面上に浮遊しています コード 仕組み 降ってはいないので、雪とは言えない… 画面上に浮遊しています 昨年のクリスマス時点ではまだ身についていなかった、LSS自身のCSS知識として、 preserve-3d による立体表現 pointer-events: none;

どうも！LSSです！！ ブロガーの皆様の中には、写真や絵などの画像をコンテンツのメインに据えられている方も多いかと思います。 普通に並べても素敵な写真、こんな見せ方はいかがでしょうか？ ※2021/12/25追記！機能改善した【CSS/JavaScript】多角形フォトギャラリー改訂版もあります^^ 六角フォトギャラリー コード あとがき 六角フォトギャラリー 六枚の環状に並んだ画像のどれかをクリックすると、その画像がその下に大きく表示されます。 コード <style> #ph3d{ position:relative; transform-style:preserve-3d; width:150px; height:150px; left:75px; transition:1.5s; transform:rotateX(-10deg) rotateY(-10deg); } #ph3d i

どうも！LSSです！！ 先日の記事、【CSS】回転＋移動＝渦巻き？【実験作】にいただいたコメントを元に、別バージョンを作ってみました。 文中の一部が渦を巻く コード いただいたコメント 文中の一部が渦を巻く こちらは、Little Strange Softwareという名称のブログです。以後、お見知りおきを。 コード <style><!-- @keyframes bfrnda1{ 0%,20%{transform:rotate(0deg) translateX(0px) scale(1);} 60%{transform:rotate(360deg) translateX(70px) scale(4);} 100%{transform:rotate(720deg) translateX(0px) scale(1);} } @keyframes bfrnda2{ 0%,30%{transfor