CSS はこのように使用できますか?気まぐれなグラデーションの芸術

前回の記事「1行のCSSコードの魅力」では、たった1行のCSSコードで生成できる美しい（奇妙な感じと言ったほうが適切かもしれません）背景を紹介しました。

この記事では、引き続き背景に関する興味深い知識をいくつか紹介します。非常に小さなユニットを使用することで、わずか数行のコードで美しく興味深い背景効果を生み出すことができます。

背景グラフィックにおける大きさの影響

この記事の主な登場人物は以下のとおりです。

繰り返し放射状グラデーション
繰り返し円錐グラデーション

背景グラフィックの大きさのオーダーはどれくらいですか?次のような興味深い現象を見てみましょう。

グラフィックを実装するために、 repeating-conic-gradient複数の角度グラデーションを使用します。コードは非常にシンプルで、次のようになります。

<div></div>
div {
    幅：100vw;
    高さ：100vh;
    背景: repeating-conic-gradient(#fff, #000, #fff 30deg);
}

30degを0.1degに置き換える

次に、上記のコードの30deg次のような非常に小さな値に置き換えます。

{
    背景: repeating-conic-gradient(#fff, #000, #fff 0.1deg);
}

これは何ですか？考えてみてください。このコード行によって描画されるグラフはどのようになるでしょうか?

効果をご覧ください:

わあ、信じられない。ここでの0.1deg非常に重要です。この角度が小さいほど (1 度未満が望ましい)、グラフィックはよりクールになります。これが背景グラフィックに対する桁違いの影響です。

CodePen -- ワンライン CSS パターン

CSS @propertyで変更を観察する

以前は、次の遷移コードを直接記述すると、補間された遷移アニメーションは取得されず、フレームごとのアニメーションのみが得られました。

div{
    背景: repeating-conic-gradient(#fff, #000, #fff 0.1deg);
    トランジション: 背景 1 秒;
}

div:ホバー{
    背景: repeating-conic-gradient(#fff, #000, #fff 30deg);
}

CSS はこのような複雑なグラデーションの直接遷移アニメーションをサポートしていないため、得られる効果は次のようになります。

さて、次に、この記事で紹介したCSS @propertyの知識、つまり不可能を可能にする CSS @property を使用して、 CSS @property 2 つの状態変化のプロセスを観察することができます。

コードを単純に変換すると、コアコードは次のようになります。

@property --angle {
  構文: '<角度>';
  継承: false;
  初期値: 0.1度;
}
div{
    背景: repeating-conic-gradient(#fff, #000, #fff var(--angle));
    遷移: --angle 2s;
}
html:ホバー{
    --角度: 30度;
}

わあ、このグラフで異なる桁数の単位の影響を調べるために、偶然、魔法のような遷移アニメーション効果が得られました。変換の効果を体験するには、DEMO をクリックすることを強くお勧めします。

CodePen – repeating-conic-gradient CSS パターン遷移 (Chrome 85 以上のみ)

CSS @propertyによって実現される補間遷移アニメーションを通じて、 30degから0.1degへの変化のプロセスを見ると、 0.1deg小さな単位がグラフィックにどのような影響を与えるかを大まかに確認できます。

同時に、このユニットが小さいほど、画像の詳細度が高くなります。詳細については、ご自身で試してみてください。

複数の放射状グラデーションと小さなユニットを持つ複数の角度グラデーションで興味深い背景を作成します

上記のヒントを使用すると、repeating-radial-gradient と repeating-conic-gradient を使用して非常に興味深い背景画像を生成できます。

いくつか挙げると、

div {
    背景画像: 繰り返し放射状グラデーション(
        中心の円、中心、
        rgb(241, 43, 239)、
        rgb(239, 246, 244) 3ピクセル
    );
}

div {
    背景画像: 繰り返し放射状グラデーション(
        15% 30%の円、
        rgb(4, 4, 0)、
        rgb(52, 72, 197)、
        rgb(115, 252, 224)、
        rgb(116, 71, 5)、
        rgb(223, 46, 169)、
        rgb(0, 160, 56)、
        rgb(234, 255, 0) 2ピクセル
    );
}

div {
    背景画像: 繰り返し放射状グラデーション(
        中心の円、中心、
        rgb(81, 9, 72)、
        rgb(72, 90, 223)、
        rgb(80, 0, 34)、
        rgb(34, 134, 255)、
        rgb(65, 217, 176)、
        rgb(241, 15, 15)、
        rgb(148, 213, 118) 0.1ピクセル
    );
}

div {
    背景画像: 繰り返し放射状グラデーション(
        中心の楕円、
        rgb(75, 154, 242)、
        rgb(64, 135, 228)、
        rgb(54, 117, 214)、
        rgb(43, 98, 200)、
        rgb(33, 79, 185)、
        rgb(22, 60, 171)、
        rgb(12, 42, 157)、
        rgb(1, 23, 143) 0.01ピクセル
    );
}

おもしろいと思いませんか? もっと面白いグラフィックを自分で試すことができます。完全なデモコードについては、ここをクリックしてご覧ください。

CodePen デモ - 魔法のグラデーションアート

どれくらい小さくできるのでしょうか？

repeating-radial-gradientこれは、 radial-gradient()に似ており、同じパラメータを取りますが、コンテナー全体をカバーするためにすべての方向に色を繰り返します。

次のコードを例に挙げます。単一の描画の終点は1px 、これがこの記事の焦点です。どのくらい小さくできるでしょうか?

：根 {
    --長さ: 1ピクセル
}
{
    背景画像: 繰り返し放射状グラデーション(
        17% 32%の円、
        rgb(4, 4, 0)、
        rgb(52, 72, 197)、
        rgb(115, 252, 224)、
        rgb(116, 71, 5)、
        rgb(223, 46, 169)、
        rgb(0, 160, 56)、
        rgb(234, 255, 0) var(--長さ)
    );
}

比較のために、 100pxから0.00001pxまでの 8 つのグラフィックを描きました。

0.001pxから0.0001pxの範囲では、グラフィックスは基本的にパーティクルグラフィックスに退化し、放射状グラデーションのアウトラインは見えなくなります。 0.00001pxレベルでは、実際に単色のイメージに退化しています。

CodePen デモ - 繰り返し放射状グラデーショングラフィックにおける異なるレベルの長さ単位の効果

repeating-radial-gradient を使用して TV の雪の音アニメーションを実装する

上記のデモでは、 0.001pxから0.0001pxの範囲で、 repeating-radial-gradient基本的に粒子の形状に退化していることがわかりました。

{
    背景画像: 繰り返し放射状グラデーション(
        17% 32%の円、
        rgb(4, 4, 0)、
        rgb(52, 72, 197)、
        rgb(115, 252, 224)、
        rgb(116, 71, 5)、
        rgb(223, 46, 169)、
        rgb(0, 160, 56)、
        rgb(234, 255, 0) 0.0008ピクセル
    );
}

これはテレビのスノースクリーンの効果と非常に似ていませんか? 0.0008pxのパラメータを微調整し、いくつかの異なるアニメーションのフレームを使用することで、テレビの雪の音のアニメーションを作成できます。

ああ、とても興味深いですね。完全なソースコードについてはここをクリックしてください:

Copepen デモ - 純粋な CSS TV ノイズ効果 (Chrome 85 以降のみ)

やっと

数行のバックグラウンドコードで何ができるでしょうか?もちろん、それだけではありません。それが CSS の面白さです。最も興味深い CSS 情報を入手したい場合は、私の iCSS 公開アカウントを見逃さないでください - iCSS フロントエンドの楽しみ

さて、この記事はこれで終わりです。お役に立てれば幸いです😃

素晴らしい CSS 技術記事が私の Github -- iCSS に集められています。これらは継続的に更新されています。星をクリックして購読し、収集してください。

ここまで、CSSに関するこの記事はこんな感じでできるのでしょうか？想像力豊かなグラデーションの芸術に関する記事はこれで終わりです。CSS グラデーションに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<: HTMLの表のtbodyは上下左右にスライドできます

>>: