どうも！LSSです！！ CSSには３Dを表現するためのプロパティが用意されています。 参考：【CSS】ブロック遊び【実験】 - Little Strange Software が、少々欠点もあって…例えば「球」を表現するのが苦手だったりもするんですね。 一方で、radial-gradientを用いて「球っぽい円」を描く事はできますが、 これも３D回転させると平面の円である事が露呈してしまいます。 今回は実験的に「CSSの3D表現を使わず、疑似的に３Dっぽい動きを表現」する事に挑戦してみました。 疑似３D コード 遅延の値を変更してみるのも面白いかも 疑似３D コード <style> @keyframes d3dax{ 0%{background-position-x:0%;} 100%{background-position-x:100%;} } @keyframes d3day{ 0%{

どうも！LSSです！！ ふと思いついて、CSSで流星群を作ってみました。 流星群 コード あとがき 流星群 流星群をCSSで作ってみました。 コード <style> @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,#00000000 10px 13px,#000000 14px 100px), repeating-linear-gradient(45deg,#000000 0px 132px,#00000000 133px 136px,#000000

どうも！LSSです！！ このブログで、keyframesとanimationを使ったCSSアニメーションを色々試みてきました。 とっつきにくいながらも、分かってくると面白いkeyframesですが、LSSだけ分かっていても他の方が置いてけぼりだと「コードを少し変えて使いたい」時などに手をつけられない、というのがありそうです。 今回はこれまでに自分が理解してきたkeyframesアニメーションを、keyframes定義の内容に絞って、簡単なものから徐々に手を加えていく様子を記事にしてみました。 その１ シンプルに落下 その２ 着地後静止 その３ バウンド その４ ちょっとだけリアルに あとがき その１ シンプルに落下 コード <style> @keyframes rakka{ 0%{top:0px;} 100%{top:330px;} } .waku{ position:relative;

どうも！LSSです！！ 当ブログでは、「HTMLなど カテゴリー」で様々なCSSアイデアを書いてきました。 「どういう表現に使えるか」が明確なものが、使用するのをオススメしやすくて望ましいのですが、「とりあえず作っては見たけど…何に使えるんだ？コレ」とお蔵入りする事も多々あります。 また、最近では自分でイマイチ使い途が思いつかないネタでも、うまくアレンジして試していただいている読者の方もおられ、それに甘えている自分もいますｗ …という前置きで、また実験的によく分からないものが出来てしまいました。 なんとも言えない色 コード ３つのグラデーションを重ねています 使うとしたら…何？ なんとも言えない色 コード <div style=" width: 280px; height: 280px; background: linear-gradient(to top right,#ff000040,

どうも！LSSです！！ little-strange.hatenablog.com に使用した、「h2見出しを透過波紋にするコード」を公開します。 コード と、なにげなく仕込んだコードを晒してみましたｗ コード <style> @keyframes trwavea{ 0%{background-size:100% 100%,100% 100%;} 30%,100%{background-size:2000% 2000%,100% 100%;} } article h2{ background-image: radial-gradient(farthest-side at 25% 75%,#8888ff 5%,#8888ff00 6%,#8888ff 7%,#8888ff00 8%,#8888ff 9%,#8888ff00 10%,#8888ff 11%,#8888ff00 12%,#888

どうも！LSSです！！ 今回は、 little-strange.hatenablog.com のコードアレンジ、という小ネタです。 透過波紋、中心位置変更 コード 元コードには無かった「at」指定を追加しています 0か50か100じゃないと合わないのでは？って 透過波紋、中心位置変更 コード <style> @keyframes trwavea{ 0%{background-size:100% 100%,100% 100%;} 95%,100%{background-size:2000% 2000%,100% 100%;} } .trwave{ height:210px; background-image: radial-gradient(farthest-side at 0% 50%,#8888ff 5%,#8888ff00 6%,#8888ff 7%,#8888ff00 8%,#888

どうも！LSSです！！ little-strange.hatenablog.com に少し手を加え、水滴が水面に落ちてそこに波紋が広がる、というものにしてみました。 サンプルとコード、そして「LSSがコード改変した手順を長々と」書いています。 水滴落下、からの透過波紋 コード コード改変の流れ あとがき おまけ：波紋の色変更 水滴落下、からの透過波紋 コード <style> @keyframes trwavea{ 0%{background-size:20px 10px,100% 100%,100% 100%;} 95%,100%{background-size:20px 30px,2000% 2000%,100% 100%;} 0%{background-position:50% -100%,50% 50%,0 0;} 100%{background-position:50% 50%,5

どうも！LSSです！！ 以前、 【CSS】水面の波紋アニメーション - Little Strange Software 【CSS】音波攻撃！【水面の波紋アレンジ】 - Little Strange Software と、波紋アニメーションCSSを２種類、作ってみました。 どちらも、輪がだんだん大きくなり、最後は枠外に出ていくもので、その後の波がどうなったのかは誰も知らない…というものでした。 その波紋を「枠の中で完結させたい」「ただし、パッと消えるような事にはしたくない」と思った場合、「徐々に透過していく」という表現が考えられます。 ただ…そもそもこのアニメーション、「radial-gradientの内容は、keyframesの『徐々に変化』に対応させられない」のを、「background-sizeを変化させる」事で 円の大きさをアニメーション変化させていたもので、輪の色（透過度含む）もま

どうも！LSSです！！ 「雨降りCSSコード生成ツール」完成しました！ 雨降りCSSコード生成ツール 使い方 雨降りCSSコード生成ツール 速度:秒（雨枠１つ分、横に移動するのにかかる時間） 雨の色: 雨の太さ:px 雨の角度:deg 雨の横位置:px（雨の長さにも影響） 雨枠の幅:px 雨枠の高さpx 雨２の横ズレ:px 雨２の縦ズレ:px 雨３の横ズレ:px 雨３の縦ズレ:px 背景色グラデーション: コード 使い方 雨が降っているアニメーション、調整用コントロール、コード、があります。 調整用コントロールの内容を変更する事で、リアルタイムに雨のアニメーションが変化します。（アニメーション速度、雨の角度など） 色々変えてみて遊べる他、調整を加えたアニメーションを表示するためのコードが表示されます。（こちらも調整用コントロールの内容を変更した時点でリアルタイムに内容生成されます） 気に入

どうも！LSSです！！ 作りかけているCSSネタがあるのですが、汎用性…変更の手の加えやすさ、という面でどうしたものかと考えています。 作りかけCSS～雨～ コード これからのCSS 作りかけCSS～雨～ コード <style> @keyframes rainya{ 0%{background-position:0px 0px,0px 0px;} 100%{background-position:-50px 137px,0px 0px;} } .rainy{ width:280px; height:280px; background-image:linear-gradient(110deg,#ffffff00 10px,#ffffff80 12px,#ffffff00 14px) ,linear-gradient(black,blue,white); background-size:50p

どうも！LSSです！！ 今回はまた、CSSのkeyframesアニメーションで遊んでみました。 瞬く星空 コード 星が瞬く仕組み というネタを考えたのですが 瞬く星空 瞬く星空 コード <style> @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: repeating-linear-gradient(45deg,black 0px 11px,transparent 13px,black 15px 30px), repeating-linear-gradient(135deg,black 0px 11px,tran

どうも！LSSです！！ CSSのgradient系の関数をbackgroundプロパティに適用する事で、容易に「綺麗なグラデーション」を描く事ができます。 この場合の「綺麗」は悪く言えば機械的、単純という見方もできます。 backgroundプロパティは カンマ区切りで複数の画像を重ねる事ができる gradientで使用する色は「不透過度」を設定する事で半透明の色も使用できる 事から、「汚し」となるようなノイズっぽいgradientを重ねる事で、グラデーションを複雑なものに見せる事ができるのでは？と思い、実験的に作ってみました。 汚しグラデーション コード 不透過度 あとがき 汚しグラデーション 「汚し」が入ったようなグラデーションを作ってみました。 バックにあるのはシンプルなグラデーションですが、その上に不規則っぽい形状のconic-gradientを「極薄」に透過した色で重ねています。

どうも！LSSです！！ little-strange.hatenablog.com で「border-styleでは表現できない枠線を、border-imageを使って作る」事をやってみました。 border-image を使うと、border-radius（角丸）やborder-style（線種）が無効になってしまいますが、border-imageに指定する画像によって「おおむね」近い表現ができる事もあるようです。 特にradial-gradientはborder-radiusの代わりに角丸を表現するのに使えて、中身を工夫するとborder-styleでは表現できなかった事もできちゃったりしますね^^ 今回は、そんなborder-imageならではの枠線を考えてみました。 枠線３種 コード とりあえず３種、ですが 枠線３種 ぼやけた角丸枠 トリプル角丸枠線 縦に虹色 コード <div s

どうも！LSSです！！ 【CSS】虹色の枠線、もう２種類！ - Little Strange Software で作った枠線ですが、こちらはborder-imageを使って描いていました。 border-imageを使うと枠線の表現の幅が広がって面白いのですが、「border-radius（角丸）」や「border-style（枠線の種類を点線や二重線にする）」の指定と共存できない、というのが、ちょっと惜しいところです^^; 画像ファイルを用意して表現する事は可能ですが、gradientを使って…となるとあまり自由が利かなかったりもします。 今回は、「なかばインチキ」な方法ではありますが、「虹色の枠線」を角丸にする方法を試してみました！ 虹色の角丸枠線 解説 border-box、padding-box、content-box あとがき 虹色の角丸枠線 虹色の枠線 角丸１ コード <div

どうも！LSSです！！ 未だ掴みきれないborder-image。 ちょいと試しに「border-image-sliceはkeyframesでアニメーションにできるのか？」を試してみました。 実験 コード アニメ化できましたね！ 実験 呼吸してるみたい コード <style> @keyframes testa{ 0%{border-image-slice:49%;} 100%{border-image-slice:35%;} } .test{ height:200px; border:40px solid; border-image-source:radial-gradient(farthest-side,transparent 59%,gray 60%,white,gray 89%,transparent 90%); animation:testa 3s infinite alterna

どうも！LSSです！！ 昨日の記事、 little-strange.hatenablog.com に、 421miyako(id:m421miyako) 土台の部分を水の写真にして波紋を乗せるとリアルになりませんか？ mio(id:mio20100501) 応用できたらと思いますがなかなか難しいです。 miyakoさんのコメントにお書きになった ・radial-gradientがカンマ区切りで並んでいるところの最後に「url(画像ファイルURL)」を追加とありましたが その場所がわかりませんでした。 とコメントをいただきました。 ありがとうございます^^ 書き換える箇所が複数あり、コメント欄に書いたものだけでは分かり辛いかと思いましたので、実際にやってみたものを今回記事にしてみました！ 水面の波紋アニメーション 改め 三つ首竜の音波攻撃！ コード コード解説 なぜに三つ首竜？？ 水面の波紋

どうも！LSSです！！ 梅雨ネタのCSSアニメをひとつ、考えてみました。 水面の波紋アニメーション コード radial-gradientが４つ並んでいますが 水面の波紋アニメーション コード <style> @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:100px; background-color:#8888aa; background-image: radial-gradient(farthest-side,#aaaaff00 91.9%,#aaaaff 95.9%,#aaaaff00 100%), radial-gradient(f

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

どうも！LSSです！！ このブログを古くから読んでくださっている方はご存知かもですが、カテゴライズされていないものの「きんきらきんのきーん」シリーズというものがあります。 CSSで「黄金の輝き」をイメージしたグラデーションを目指したもので、 little-strange.hatenablog.com 枠だったり文字だったり、を白・黄色・茶色・黒などの色のグラデーションで表現しようという試みです。 今回、conic-gradientを色々いじっているとたまたま出来上がったので、久しぶりの「きんきらきんのきーん」最新作を公開しますｗ クセが強すぎる黄金背景 コード コード中、赤太字部分だけが クセが強すぎる黄金背景 黄金背景 コード <div style=" width: 300px; height: 160px; background: conic-gradient(from 270deg,

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