どうも！LSSです！！ little-strange.hatenablog.com に続き、虹色の枠線（border）を考えてみました。 虹色の枠線 コード borderの太さに準じて虹の太さも変わります！ border-imageを使用しています 虹色の枠線 虹色の枠線ができました^^ border-imageはやはり手強いですが、だいぶ分かってきた…かも？ コード <style> .bdimg{ border:50px solid; border-image:radial-gradient(at 50% 50%,transparent 14%,purple 15% 19%,blue 20% 24%,lightblue 25% 29%,green 30% 34%,yellow 35% 39%,orange 40% 44%,red 45% 49%,transparent 50%) 49%;

どうも！LSSです！！ ちょっと思いつきで「三角形を敷き詰めた背景模様」を考えていたのですが、それを更にkeyframesのアニメーションで動かす、というのをやってみました。 …という実験的な記事です。 動く三角背景 コード 三角形のサイズ 動く三角背景 コード <style> @keyframes sankakua{ 0%,10%{background-position:60px 0px,40px 35px,0px 35px,60px 0px,20px 0px,40px 35px,0px 35px,20px 0px;} 20%,30%{background-position:60px 0px,20px 70px,0px 35px,40px 35px,-20px 0px,20px 70px,-40px 35px,0px 35px;} 40%,50%{background-position:

どうも！LSSです！！ ブログを始めてから1000日たちました - Little Strange Software に使用した、「背景にうっすら『１０００』の数字が並んでいる」コードを解説してみます。 こんなコードでした 下から見ていきましょう その上に白で上書き あとは同じ要領で… atとpositionとsize こんなコードでした コード <style> article{ background: conic-gradient(at 150px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 15px 0/160px 80px, conic-gradient(at 140px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 25px 30px/160px 80px, conic-gradient(at 150px 10px,#f8

どうも！LSSです！！ little-strange.hatenablog.com にブックマークコメントで、 3Dみたい。これ、大量にランダムに跳ねてたら可愛いかも。めんどくさい？笑 css conasaji 2022/06/04 23:15 といただきました^^ さじ様、ありがとうございます！ 大量に跳ねてると、楽しくなりそうですね！ ランダムに、の部分については、「横移動」「縦移動」「サイズ変更」のアニメーションの「再生にかかる時間」をずらす事で周期をずれさせてランダムっぽく見せていました。 ので、「大量にランダムに」という感じにしようとすると単一のHTML要素にbackgroundをカンマ区切りで並べる方式ではなく、HTML要素自体を大量に用意するのが良さそうです。 コードは流用できる部分が多いものの、構造から変わってくるので、試しに作ってみました！（汎用性については…謎ｗ） ボー

どうも！LSSです！！ little-strange.hatenablog.com に続く、gradient＋keyframes実験、radial-gradient版です。 linear-gradient の時は傾きを指定する箇所に「to left top」を指定する事で、「画像サイズの変化に応じて角度変化」という手法を実験しました。 では、radial-gradientの場合は？？ 実験 コード 解説 組み合わせでこんな事も！ linear、radialときたら… 実験 コード <style> @keyframes rtesta{ 0%,100%{background-size:10px 10px;} 40%,60%,80%{background-size:75px 75px;} 30%,50%,70%,90%{background-size:100px 100px;} } .rtest

どうも！LSSです！！ 先日、 little-strange.hatenablog.com という実験的な記事を公開していました。 「実験」だったのは、今ひとつネタとして活用する方法でピンとくるアイデアがなかったからなのですが、その状態でも、 non704.hatenablog.com whisky-coke.hatenablog.com norikoさん(id:non704)や、のんべえさん(id:whisky-coke)が使い途を考えて試みてくださっています^^ その、norikoさんの記事のコメントの中で、「カーテンで舞台が開く」という新たなアイデアを出しておられたので、こっちで作ってみました^^ カーテン コード 傾きについて divタグの中に書いたものを覆い隠すのには カーテン 今、新しい時代の幕が開ける…！！ コード <style> @keyframes curtaina{ 0

どうも！LSSです！！ CSSのbackground-imageにlinear-gradientを指定し、それをkeyframesアニメーションの対象にした場合。 例えば、 @keyframes キーフレーム名{ 0%{background-image:linear-gradient(0deg , 色１ , 色２);} 100%{background-image:linear-gradient(90deg , 色１ , 色２); } のように指定したとしても、角度が「0degから90degに徐々に変化」…とはなりません。 他のgradientもそうですが、 ( ) の内容はkeyframesの「徐々に変化」の途中経過の補完対象外のようです。 ですが、background-position や background-size の指定はアニメ変化してくれる事から、「角度がアニメ変化している」よ

どうも！LSSです！！ CSSで、３種類あるgradientを用いて「模様が繰り返すタイルパターン」のような背景を描画できます。 中でも、repeating-conic-gradientがfromの角度指定を変更する事で、思いがけないような模様の変化をもたらすのが面白いです^^ 【CSS】謎の背景模様『山』【小ネタ】 - Little Strange Software 今回はその「repeating-conic-gradientの模様変化」を手軽に体験できるツールを作ってみました。 repeating-conic-gradientによる背景模様生成ツール 使い方 repeating-conic-gradientによる背景模様生成ツール 開始角度： 中心位置（横）： 中心位置（縦）： 繰り返し： 色1：　色2： 幅： 高さ： ランダム設定 コード 使い方 最初は、白と黒の格子模様、オレンジ色

どうも！LSSです！！ かなり前（約２年！？）なんですが、↓こういうCSSネタを書いていました。 little-strange.hatenablog.com CSSを触るようになって、ちょっと慣れてきた頃…でしょうか。 「別バージョン」に苦戦している様子が見られますｗ そして最近になって、これを使って素敵なアニメーションに仕上げていただきました^^ mio20100501.hatenablog.com なるほど、「とことこ歩く」の揺れが蝶のはばたきのように見えますね！ アイデアで拙作のCSSを楽しく活用していただいているのがとても有難いです^^ と、これを見ているうちに「２枚の画像を別々に動かせば、よりリアルにはばたいてるような感じが作れるかも？」と意欲が湧き、挑戦してみました！ 蝶のはばたき コード コード中にコメントを入れてみました あとがき 蝶のはばたき コード <style> @k

どうも！LSSです！！ に続き、第二問目を作ってみました！ いくつかの選択肢から選ぶだけなので、CSSが分からなくてもサンプルの変化を見ながら、正解に辿り着くという遊び方ができます^^ なお、全ての選択肢が正解になった時、「正解です！！」と赤い文字が出てきます。 CSSパズル 第二問！ 第二問です 左が見本です。 下記コードの選択項目を選んで、右が見本と同じになるようにしてください。 コード <div style=" display: inline-block;box-sizing:border-box;width: 140px;height: 80px; : 10px; border:; border-color:; background: linear-gradient(,#000000,#804000,#ffff00,#ffffff,#ffff00,#804000,#000000);

どうも！LSSです！！ 「CSSをこれから勉強したい」方向けに、CSS超入門！…のさわりだけ！！など書いたりしてきましたが、なんというかこう「もっと手軽に、簡単に、なんなら学習する気がなくてもちょっと遊べるぐらいのコンテンツは作れないか」と考えていました。 CSSを再現するような入力をする…だと、CSSは様々な書き方ができますし、正誤判定が難しくなりそう…と思っていましたが「限定的な選択肢を提示して、そこから選択する」という方法なら、パズルっぽく楽しめるかも？^^ と思い、作ってみました。 CSSパズル 第一問！ まずは第一問目！ 左が見本です。下記コードの選択項目を選んで、右が見本と同じになるようにしてください。 コード <div style=" display: inline-block; border: 1pxblack; width: 140px; height: 120px; f

どうも！LSSです！！ 実用性はまったく無いと思いますが…CSSのbackgroundプロパティで「チョコレートケーキ」を描いてみました。 チョコレートケーキ コード 3つのgradientを重ねています あとがき チョコレートケーキ ChocoCake コード <div style=" box-sizing: content-box; width: 100px; height: 100px; background: conic-gradient(from 60deg at 13px 50px,#372006 29.9deg,#37200600 30deg) -13px 0px , radial-gradient(100px 100px at -86px 100px,#372006 99%,#37200600 100%) 86px -50px , linear-gradient(180de

どうも！LSSです！！ little-strange.hatenablog.com について、「どういう理屈であのコードが斜め市松模様になるのか」って話を書きます。 linear-gradient を用いた模様を作る際の%による指定についても書いていますので、gradient系の指定方法を これから覚えたい方にも参考になるかと^^ linear-gradientについて グラデーションに位置を指定してみます 対角線を指定する「to top right」の面白いところ 25%と75% 次に、色を「赤→透明→赤」にしてみます そして左右逆向きのlinear-gradientを重ねます ここで、background-sizeを指定してみます あとがき linear-gradientについて コード <div style=" width: 200px; height: 200px; border:

どうも！LSSです！！ 以前の記事、【CSS】CSSオンリーでレンガ模様・改善版の中で、conic-gradientを用いる事でレンガ模様・格子柄・市松模様を描ける、という事を書いていました。 conic-gradient や radial-gradient は、繰り返しパターンの模様を描く上で、background-sizeやbackground-positionと組み合わせるとなかなか自由度が高い模様を生み出せますが、その点では linear-gradient は「直線的」であるがゆえに作れる模様が限られていると感じています。 が、今回ふと、「 linear-gradient でも、斜め市松模様なら描けるのでは？」と思いつき、試してみました。 斜め市松模様 コード 斜め市松模様 応用 あとがき 斜め市松模様 斜め市松模様です。 コード <style> .chkptn{ height:3

どうも！LSSです！！ もう２年以上前ですが、 little-strange.hatenablog.com というコード生成ツールを公開していました。 色々調整できて面白いツールではありましたが、「ぼかし」をかけておかないとフォントの尖った部分がそのまま尖った袋になる、という仕様だったんですね。 今回は、text-shadowの位置のずらし方をちょっと工夫する事で、角丸袋文字のコードを考えてみました。 角丸袋文字 コード その他、変更を加えられる箇所 文字サイズや画数の多い漢字など とても古いネタの焼き直しをしてしまいました 角丸袋文字 角丸袋文字 コード <span style="--c1: green; font-size: 50px; color: white; font-weight: bold; text-shadow: -3px 0 0 var(--c1),-3px -1px

どうも！LSSです！！ 今回は、ふと思いついたCSS小ネタです。 ブログなどの文中でも、さらっと使いやすいんじゃないかな？ サンプル コード CSSの説明 サンプル文に書いたように、上の行と重なりますが サンプル ただし重要適宜、改行を入れるなどしておかないと上の行と重なってしまいます。 コード ただし<span style="display: inline-block; transform-origin: 0% 50%; transform: rotate(-25deg); padding: 0 0.5em 0 1em; background-image: conic-gradient(from 40deg at 0% 50%,#ff444480 99deg,#ff444400 100deg); color: #ffffff;">重要</span>適宜、改行を入れるなどしておかないと上の

どうも！LSSです！！ CSSをいじっているうちに、「なんだかよく分からないもの」ができてしまいました。 …なんだか、やろうと思っていた事が期待通りの動きにならず、「なんだこりゃ？？」となっていたところで方向性を変えて、「なにか」らしいものに仕上げた…けれどやはり「なんだかよく分からないもの」になっておりますｗ なんだかよく分からないもの コード 当初やろうとしていた事 あっ！ なんだかよく分からないもの なんだかよく分からないものができました^^; コード <style> @keyframes cbig{ 0%{background-size:0% 0%;background-position:50% 50%;} 50%{background-size:100% 100%;background-position:0% 0%;} 100%{background-size:200% 200%

どうも！LSSです！！ 最近、桜のつぼみが開くのを待ちながら撮影散歩していました。 ようやく神戸でもソメイヨシノが開き始めたところで、春っぽいCSSネタを考えてみました！ サンプル コード CSSセレクタについて 文字に対する指定 サンプル 桜の花、開く季節に… コード <style> .hnbr{ border-radius:10px; padding:10px; border:6px groove #ffcccc; background-image: radial-gradient(at 90% 50%,#ffffffff 7%,#ffffff00) ,repeating-conic-gradient(from 40deg at 90% 50%,#ffcccc,#fff0f0 30deg 42deg,#ffcccc 72deg); color:#ffffff; font-size:27

いつも読んで頂きありがとうございます。 今日は何の日かご存じでしょうか。twitterでは風船も飛んでいるはずです。 そうです！私のんべえの誕生日です。ゾロ目のマッハGo!Go!になりました。 マウスものんべえが付きまとうようになっていますので遊んでやってください。 スマホの人はごめんなさい。 Happy Birthday 誕生日のお祝いは何処で 私の誕生日はコロナが出てくる前までは家族で居酒屋に行ってましたが今はテイクアウ トで寿司というふうになっています。今年は居酒屋に行けそうかなと思っていましたが オミクロン株で感染者も増えてきているのでダメそうです。 ただ、テイクアウトにしても寿司ではなくて居酒屋メニューという手もありますので焼 き鳥とかもアリです。ようするに酒の肴が欲しいだけなんです。 何てたってのんべえですから！しかし、結局寿司になりそうです。 ケーキは作ってくれます 誕生日ケ

どうも！LSSです！！ 最初に思った以上に手ごわかった模様「千鳥格子」。 また閃きがあり、試してみたところ、うまくいきました^^ 千鳥格子 コード 模様の構成 繰り返し模様が面白い^^ 千鳥格子 コード <style> .chidori{ width:300px; height:200px; background: conic-gradient(transparent 0deg 90deg,#000000 90deg 180deg,transparent 180deg 270deg,#ffffff 270deg 360deg) 0px 0px/40px 40px ,linear-gradient(45deg,#ffffff 0% 12.5%,#000000 12.5% 25%,#ffffff 25% 37.5%,#000000 37.5% 62.5%,#ffffff 62.5% 75%,#