どうも！LSSです！！ 当ブログでは、「HTMLなど カテゴリー」で様々なCSSアイデアを書いてきました。 「どういう表現に使えるか」が明確なものが、使用するのをオススメしやすくて望ましいのですが、「とりあえず作っては見たけど…何に使えるんだ？コレ」と…

どうも！LSSです！！ little-strange.hatenablog.com に使用した、「h2見出しを透過波紋にするコード」を公開します。 コード と、なにげなく仕込んだコードを晒してみましたｗ コード <style>@keyframes trwavea{0%{background-size:100% 100%,100% 100%;}30%,100%…

どうも！LSSです！！ 今回は、 little-strange.hatenablog.com のコードアレンジ、という小ネタです。 透過波紋、中心位置変更 コード 元コードには無かった「at」指定を追加しています 0か50か100じゃないと合わないのでは？って 透過波紋、中心位置変更 @k…

どうも！LSSです！！ little-strange.hatenablog.com に少し手を加え、水滴が水面に落ちてそこに波紋が広がる、というものにしてみました。 サンプルとコード、そして「LSSがコード改変した手順を長々と」書いています。 水滴落下、からの透過波紋 コード コ…

どうも！LSSです！！ 以前、 【CSS】水面の波紋アニメーション - Little Strange Software 【CSS】音波攻撃！【水面の波紋アレンジ】 - Little Strange Software と、波紋アニメーションCSSを２種類、作ってみました。 どちらも、輪がだんだん大きくなり、最…

どうも！LSSです！！ 作りかけているCSSネタがあるのですが、汎用性…変更の手の加えやすさ、という面でどうしたものかと考えています。 作りかけCSS～雨～ コード これからのCSS 作りかけCSS～雨～ @keyframes rainya{ 0%{background-position:0px 0px,0px 0…

どうも！LSSです！！ little-strange.hatenablog.com は、実は書き始めた時は全く違うネタだったのが、書いてるうちにああなりました。 数日前から考えてるCSSネタがあるものの、どうにも煮詰まらなくて、結局違う形になっちゃったりしてますｗ とりあえず、…

どうも！LSSです！！ 今回はまた、CSSのkeyframesアニメーションで遊んでみました。 瞬く星空 コード 星が瞬く仕組み というネタを考えたのですが 瞬く星空 @keyframes twstara{ 0%{background-position:0px 0px,0px 0px,0px 0px;} 100%{background-position…

どうも！LSSです！！ CSSのgradient系の関数をbackgroundプロパティに適用する事で、容易に「綺麗なグラデーション」を描く事ができます。 この場合の「綺麗」は悪く言えば機械的、単純という見方もできます。 backgroundプロパティは カンマ区切りで複数の…

どうも！LSSです！！ 【CSS】虹色の枠線、もう２種類！ - Little Strange Software で作った枠線ですが、こちらはborder-imageを使って描いていました。 border-imageを使うと枠線の表現の幅が広がって面白いのですが、「border-radius（角丸）」や「border-…

どうも！LSSです！！ little-strange.hatenablog.com little-strange.hatenablog.com と続けざまに虹色をテーマにしたCSSを書いていましたが、「虹色の枠線」を２種類、追加でさらに考えてみました^^ 虹色の枠線 追加１ 虹色の枠線 追加2 なお、今回のこれは…

どうも！LSSです！！ little-strange.hatenablog.com で「border-styleでは表現できない枠線を、border-imageを使って作る」事をやってみました。 border-image を使うと、border-radius（角丸）やborder-style（線種）が無効になってしまいますが、border-i…

どうも！LSSです！！ 未だ掴みきれないborder-image。 ちょいと試しに「border-image-sliceはkeyframesでアニメーションにできるのか？」を試してみました。 実験 コード アニメ化できましたね！ 実験 @keyframes testa{ 0%{border-image-slice:49%;} 100%{b…

どうも！LSSです！！ 昨日の記事、 little-strange.hatenablog.com に、 421miyako(id:m421miyako) 土台の部分を水の写真にして波紋を乗せるとリアルになりませんか？ mio(id:mio20100501) 応用できたらと思いますがなかなか難しいです。 miyakoさんのコメン…

どうも！LSSです！！ 梅雨ネタのCSSアニメをひとつ、考えてみました。 水面の波紋アニメーション コード radial-gradientが４つ並んでいますが 水面の波紋アニメーション @keyframes suimena{ 0%{background-size:0% 0%,20% 20%,50% 50%,100% 100%;} 100%{ba…

どうも！LSSです！！ 以前、「conic-gradient」の存在を初めて知り、びっくりした時の記事。 little-strange.hatenablog.com 勢いでいくつか試しに作ったコードを書いていましたが、その中の「集中線」をちょっとだけ改善してみました。 集中線 コード 変更…

どうも！LSSです！！ このブログを古くから読んでくださっている方はご存知かもですが、カテゴライズされていないものの「きんきらきんのきーん」シリーズというものがあります。 CSSで「黄金の輝き」をイメージしたグラデーションを目指したもので、 little…

どうも！LSSです！！ ちょっとまた、border-imageを試してみました。 border-style:outset;で盛り上がったような枠線になりますが、それよりもborder-colorを四辺別々に設定した方が角が四つとも切れ目が生じてかっこいい！ …のを更に、conic-gradientを用い…

どうも！LSSです！！ little-strange.hatenablog.com に続き、虹色の枠線（border）を考えてみました。 虹色の枠線 コード borderの太さに準じて虹の太さも変わります！ border-imageを使用しています 虹色の枠線 .bdimg{ border:50px solid; border-image:r…

ブログやWebサイトで使用できる、虹色の区切り線を４種、用意してみました。

どうも！LSSです！！ ちょっと思いつきで「三角形を敷き詰めた背景模様」を考えていたのですが、それを更にkeyframesのアニメーションで動かす、というのをやってみました。 …という実験的な記事です。 動く三角背景 コード 三角形のサイズ 動く三角背景 @ke…

どうも！LSSです！！ ブログを始めてから1000日たちました - Little Strange Software に使用した、「背景にうっすら『１０００』の数字が並んでいる」コードを解説してみます。 こんなコードでした 下から見ていきましょう その上に白で上書き あとは同じ要…

どうも！LSSです！！ little-strange.hatenablog.com にブックマークコメントで、 3Dみたい。これ、大量にランダムに跳ねてたら可愛いかも。めんどくさい？笑 css conasaji 2022/06/04 23:15 といただきました^^ さじ様、ありがとうございます！ 大量に跳ね…

どうも！LSSです！！ little-strange.hatenablog.com に続く、gradient＋keyframes実験、radial-gradient版です。 linear-gradient の時は傾きを指定する箇所に「to left top」を指定する事で、「画像サイズの変化に応じて角度変化」という手法を実験しまし…

どうも！LSSです！！ 先日、 little-strange.hatenablog.com という実験的な記事を公開していました。 「実験」だったのは、今ひとつネタとして活用する方法でピンとくるアイデアがなかったからなのですが、その状態でも、 non704.hatenablog.com whisky-cok…

どうも！LSSです！！ CSSのbackground-imageにlinear-gradientを指定し、それをkeyframesアニメーションの対象にした場合。 例えば、 @keyframes キーフレーム名{0%{background-image:linear-gradient(0deg , 色１ , 色２);}100%{background-image:linear-gr…

どうも！LSSです！！ はてなブログに記事を書く際に、 [:contents] と書くと、その部分が記事中に入れた「見出し」の一覧、「目次」になります。 今回は、その「目次」をCSS装飾で遊んでみました。 コード 作ってみたものの… また、１文字めの背景色が違うの…

どうも！LSSです！！ little-strange.hatenablog.com にて、いかにもな手抜きキャラを描きましたが、それにちょっと手を加えました。（いかに手をかけずに…と考えていたのにそれに反するかのようなｗ） これで完成ってことにしてもいいかな？ キャラクター …

どうも！LSSです！！ 最近、こんな事を考えていました。 「迷路ゲームを作成するにあたり、自キャラもこの際コードで描きだしたい。また、どうせなら４方向の画像、かつ手足を振って各２パターン用意。ただし、極力労力をそれにさきたくない！」とｗ そうし…

どうも！LSSです！！mioさん(id:mio20100501)が、はてなブログの記事背景でダイバーが潜水するアニメーション背景に挑戦されていました。美麗な画像で、潜水するダイバーの動きにとても迫力があります^^ mio20100501.hatenablog.com そこで、「潜水するダイ…