…！LSSです！！ 【CSS】疑似３D【実験】 - Little Strange Software で、楕円（っぽい）動きで３D（っぽい）ものを表現してみました。 記事中で、「最初だけ発生する遅延を変更するとどうなるか」を書いていましたが、他に「横の動き」と「縦の動き＋サイズ変更」を指定する秒数を変えてみたらどうなるか？を試してみます。 2sと1.8s 2sと1s 2sと3s 2sと6s あとがき 2sと1.8s @keyframes d3dax{ 0%{background-…

…も！LSSです！！ CSSには３Dを表現するためのプロパティが用意されています。 参考：【CSS】ブロック遊び【実験】 - Little Strange Software が、少々欠点もあって…例えば「球」を表現するのが苦手だったりもするんですね。 一方で、radial-gradientを用いて「球っぽい円」を描く事はできますが、 これも３D回転させると平面の円である事が露呈してしまいます。 今回は実験的に「CSSの3D表現を使わず、疑似的に３Dっぽい動きを表現」する事に挑戦…

…！ ふと思いついて、CSSで流星群を作ってみました。 流星群 コード あとがき 流星群 @keyframes stardusta{ 0%{background-position:0 0,5000px 0,0 0;} 100%{background-position:0 0,0 0,0 0;} } .stardust{ height:200px; background-image: repeating-linear-gradient(135deg,#000000 0px 9px…

…mationを使ったCSSアニメーションを色々試みてきました。 とっつきにくいながらも、分かってくると面白いkeyframesですが、LSSだけ分かっていても他の方が置いてけぼりだと「コードを少し変えて使いたい」時などに手をつけられない、というのがありそうです。 今回はこれまでに自分が理解してきたkeyframesアニメーションを、keyframes定義の内容に絞って、簡単なものから徐々に手を加えていく様子を記事にしてみました。 その１ シンプルに落下 その２ 着地後静止 そ…

どうも！LSSです！！ ちょっとCSSアニメーションについて書こうと思ったら…書き始めたのが遅くて、とても日が変わるまでに書ききれないな…と思ったのが23:45。 ちなみに書き始めたのが23時頃なので、動きだすのが遅すぎましたね^^;;; というわけで、後日にまわします。 …そろそろ本気で、毎日更新に無理が出てきたようなｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

…カテゴリー」で様々なCSSアイデアを書いてきました。 「どういう表現に使えるか」が明確なものが、使用するのをオススメしやすくて望ましいのですが、「とりあえず作っては見たけど…何に使えるんだ？コレ」とお蔵入りする事も多々あります。 また、最近では自分でイマイチ使い途が思いつかないネタでも、うまくアレンジして試していただいている読者の方もおられ、それに甘えている自分もいますｗ …という前置きで、また実験的によく分からないものが出来てしまいました。 なんとも言えない色 コード ３つ…

…みましたｗ はてなブログの「編集 見たまま」で設定できる「大見出し」はh3、「中見出し」はh4、「小見出し」はh5で、h2はLSSが主に使っている見出しですが、例えばこれをはてなブログの「大見出し」に対応させる場合は、６行目にある article h2{ この部分を変更する事で対応可能です。 この部分は「セレクタ」と呼ばれ、「{から}までに書いたCSS指定を、どの部分に反映させるか」を書く箇所となります。 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

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

…> </div> 【CSS】（トリッキーな方法で）透過波紋！ - Little Strange Software からの追加・変更箇所を赤太字にしています。 コード改変の流れ まず、元の「透過波紋」は、 「下敷きグラデーション」と「部分透過した波紋グラデーション」の２枚を重ねて表示。 「部分透過した波紋グラデーション」だけをアニメーションで拡大。 というものでした。 そこに「波紋が始まる前に水面に落下する水滴」を追加するとしたら… 更にもう一枚の「水滴」を上に重ねて表示。 波…

…です！！ 以前、 【CSS】水面の波紋アニメーション - Little Strange Software 【CSS】音波攻撃！【水面の波紋アレンジ】 - Little Strange Software と、波紋アニメーションCSSを２種類、作ってみました。 どちらも、輪がだんだん大きくなり、最後は枠外に出ていくもので、その後の波がどうなったのかは誰も知らない…というものでした。 その波紋を「枠の中で完結させたい」「ただし、パッと消えるような事にはしたくない」と思った場合、「徐…

…Sです！！ 「雨降りCSSコード生成ツール」完成しました！ 雨降りCSSコード生成ツール 使い方 雨降りCSSコード生成ツール 速度:秒（雨枠１つ分、横に移動するのにかかる時間）雨の色:雨の太さ:px雨の角度:deg雨の横位置:px（雨の長さにも影響）雨枠の幅:px雨枠の高さpx雨２の横ズレ:px雨２の縦ズレ:px雨３の横ズレ:px雨３の縦ズレ:px背景色グラデーション: コード ctr.addEventListener('input',gw,false); gw(); fu…

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

… 数日前から考えてるCSSネタがあるものの、どうにも煮詰まらなくて、結局違う形になっちゃったりしてますｗ とりあえず、その「煮詰まらない」ネタを暴露しちゃいます。 これ、どんな形に見えます？ コード（答え） ずらすのをアニメーションしてみるとよく分かります これ、どんな形に見えます？ …「辺の窪んだ菱形」、ですね。 これ、CSSのbackgroundプロパティにgradientひとつで描いていますが、linear、radial、conicとあるgradient系のどれをどのよ…

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

…も！LSSです！！ CSSのgradient系の関数をbackgroundプロパティに適用する事で、容易に「綺麗なグラデーション」を描く事ができます。 この場合の「綺麗」は悪く言えば機械的、単純という見方もできます。 backgroundプロパティは カンマ区切りで複数の画像を重ねる事ができる gradientで使用する色は「不透過度」を設定する事で半透明の色も使用できる 事から、「汚し」となるようなノイズっぽいgradientを重ねる事で、グラデーションを複雑なものに見せる…

…！LSSです！！ 【CSS】虹色の枠線、もう２種類！ - Little Strange Software で作った枠線ですが、こちらはborder-imageを使って描いていました。 border-imageを使うと枠線の表現の幅が広がって面白いのですが、「border-radius（角丸）」や「border-style（枠線の種類を点線や二重線にする）」の指定と共存できない、というのが、ちょっと惜しいところです^^; 画像ファイルを用意して表現する事は可能ですが、gradi…

…に虹色をテーマにしたCSSを書いていましたが、「虹色の枠線」を２種類、追加でさらに考えてみました^^ 虹色の枠線 追加１ 虹色の枠線 追加2 なお、今回のこれは… 虹色の枠線 追加１ 虹色の枠線 追加１ コード <div style="border: 5px solid; border-image: repeating-linear-gradient(135deg,red 0px 9px,orange 20px 29px,yellow 40px 49px,green 60px…

どうも！LSSです！！ little-strange.hatenablog.com で「border-styleでは表現できない枠線を、border-imageを使って作る」事をやってみました。 border-image を使うと、border-radius（角丸）やborder-style（線種）が無効になってしまいますが、border-imageに指定する画像によって「おおむね」近い表現ができる事もあるようです。 特にradial-gradientはborder-radi…

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

…となっていました。 CSSプロパティの指定は、 プロパティ名:値; というように、「プロパティ名と値の間にコロン（:）、値の後ろにセミコロン（;）」という形で記述します。 （参考→CSS超入門！…のさわりだけ！！ - Little Strange Software） 今回の場合、「値」は「radial-gradient(中略),radial-gradient(中略),radial-gradient(中略),radial-gradient(中略)」の部分、カンマ（,）で区切られ…

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

…center; } CSSで集中線。というネタは以前にも公開していましたが、コードを改善してみました。 コード <style>.concentration{padding:15% 15%;background:radial-gradient(farthest-side,#ffffff 75%,#ffffff00 100%),repeating-conic-gradient(#ffffff 0deg 6.9deg,#000000 7deg 8deg);text-align:ce…

…いる中で、３位以下にCSSやJavaScript関連ネタも入ってくるようになってきています。 が、今日ふと見ると、意外な記事が紛れ込んでいました。 まず、トップは、 little-strange.hatenablog.com で、こちらがGoogleからのアクセス数のうちの18%。 次に、 little-strange.hatenablog.com こちらもAndroid関連の記事で9%。（でもたまにこっちがトップになる事もあります。） ３位が、 little-strange…

…うものがあります。 CSSで「黄金の輝き」をイメージしたグラデーションを目指したもので、 little-strange.hatenablog.com 枠だったり文字だったり、を白・黄色・茶色・黒などの色のグラデーションで表現しようという試みです。 今回、conic-gradientを色々いじっているとたまたま出来上がったので、久しぶりの「きんきらきんのきーん」最新作を公開しますｗ クセが強すぎる黄金背景 コード コード中、赤太字部分だけが クセが強すぎる黄金背景 黄金背景 コ…

どうも！LSSです！！ ちょっとまた、border-imageを試してみました。 border-style:outset;で盛り上がったような枠線になりますが、それよりもborder-colorを四辺別々に設定した方が角が四つとも切れ目が生じてかっこいい！ …のを更に、conic-gradientを用いると四辺の中で更にグラデーション変化を入れる事ができます。 ついでに背景色をアニメーションで変化させて、様々な色に合う事を確認しています。 border-imageとconic…

…ware」において、CSSプロパティの「border-image」との格闘はもう２年越しのものとなりますｗ little-strange.hatenablog.com とても分かり辛いのが、やっぱり結局「border-image-slice」。今回のコードでいうと、 border-image:radial-gradient(at 50% 50%,transparent 14%,purple 15% 19%,blue 20% 24%,lightblue 25% 29%,gree…

…ログでは他にも、 【CSS】赤と青の区切り線【小ネタ】 - Little Strange Software 【CSS】赤と青の波線【小ネタの続き】 - Little Strange Software 【CSS】鎖の区切り線【小ネタ】＋α - Little Strange Software 【CSS】菱餅の区切り線【ギリギリの時節ネタ】 - Little Strange Software など、色々試みていますので、あわせてご確認ください。 ってなとこで、今回はこのへんで！ 次…

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

…てみました。 まず、CSSの中で全体がarticle{と、}に囲まれています。 これは「 { } の間に書かれているのは」、「articleというHTMLタグに対する指定」ですよ、と、記事を読んでいる人の端末（PCとかスマホとか）のブラウザに解釈してもらう指示となります。 そして、{ } の間に書いているのは「background」というプロパティで、「background-color」「background-image」「background-position」「backg…

…ablog.com CSSやJavaScriptがこのブログのメインになっています。 妄想マネタイズ little-strange.hatenablog.com 一年ちょいたった頃に書いたこの記事。 全然進展していませんが、そろそろカタチにしたいところです。 例えばスイッチ迷路を迷路作成可能にして、それでひとつ立ち上げるか？みたいなところからやっていきたいですね^^ という、振り返り記事でした 1000日ブログ活動してきて、一番身についたのはCSS、中でもgradient系が…