CSS プロパティ *-gradient の実用的な価値を探る

まず興味深い性質であるconic-gradientを紹介しましょう。

円錐グラデーション！

円グラフの作成に使用できることを発見したので、興味を持ちました。
例えば：

このような：

原理も非常にシンプルです。開始点を中心として、中心の周りを時計回りに移動してグラデーション効果を実現します。複数のカラー値パラメータを受け入れる必要があり、各パラメータの後に現在のカラー値の開始点と終了点である 2 つのパーセンテージを続けることができます (スペースで区切る)。

背景: 円錐グラデーション(ピンク 0 30%、黄色 0 70%、ライム 0 100%);

別々に書くこともできます:

背景: conic-gradient(ピンク 0、ピンク 30%、黄色 30%、黄色 70%、ライム 70%、ライム 100%);

（2番目の方法は最初の方法よりも互換性が優れています）

待って！上の2番目の画像が私たちが望んでいるものではありませんか?
図によれば、次のコードを導き出すのは難しくありません。

{
    幅: 200ピクセル;
    高さ: 200px;
    背景: conic-gradient(ディープピンク 0、ディープピンク 30%、イエローグリーン 30%、イエローグリーン 70%、ティール 70%、ティール 100%);
    境界線の半径: 50%;
}

しかし、ここでは完全に「静的」です。

私たちのほとんどは、おそらく echarts を使用してグラフィックを描画したことがあるでしょう。バックエンドからのデータを echarts Map オブジェクトの指定されたパラメーター (配列) にレンダリングすることで、要件を満たすさまざまな色の円グラフを取得できます。 CSS でこれをどうやって実現するのでしょうか?

もちろん、JS の助けも必要です。CSS3 ではカスタム変数が導入され、CSS プロパティと JavaScript 変数をうまく組み合わせることができるためです。
調査の結果、現時点では、グラデーション カラーの開始位置と終了位置をカスタム変数として設定し、JavaScript がデータを取得するときにその値を変更して円グラフの色の分布を変更するのがベスト プラクティスであることがわかりました。

以前書いたデモは次のとおりです。

：根{
	--ゼロ:0;
	--1:50%;
}
。丸{
	幅: 300ピクセル;
	高さ: 300px;
	境界線の半径: 50%;
	/* 背景: conic-gradient(赤、黄、ライム、水色、青、フクシア、赤); */
	背景: conic-gradient(赤 var(--zero) var(--one),黄 var(--one) 100%);
}

<div class="circle"></div>
<button id="but">クリックすると円グラフの分布が変更されます</button>
<スクリプト>
	but.onclick=関数(){
		document.documentElement.style.setProperty('--zero', '10%');
		document.documentElement.style.setProperty('--one', '70%');
	}
</スクリプト>

色の値を動的に追加したい場合（たとえば、新しい調査対象を追加する場合）、スタイルの属性を動的に変更できます。

xxx.style.xxx="xxx"; //変更

これは、「 ::after疑似要素」を使用するよりもはるかに簡単に実装できます。

多くの人は、目的を達成するために、transform の rotate プロパティを使用してコンテンツ ボックスを回転させ、その一部を表示するという疑似要素方式を使用したことがあるかもしれません。

他にも「セクシーな操作」はインターネットで検索すればたくさん見つかるので、ここでは詳しくは触れません（過去 2 年間のブラウザのこの属性に対する「無関心」から現在の部分的なサポートまでを比較すると、これも大きな進歩であり、引き続き期待しましょう）。

線形勾配について

この属性は、一部の Web サイトの要素の背景として使用される以外にはあまり役に立たないようです。
ストライプの背景など
「複数のカラーストップが同じ位置にある場合、極めて小さな遷移領域が作成されます。
遷移は、それぞれ最初に指定された値と最後に指定された値で開始および終了します。実際には、滑らかなグラデーションではなく、その場所で色が急激に変化します。 ”
グラデーションはコード生成画像なので、他の背景画像と同じように扱い、background-size でサイズを調整できます。また、背景はデフォルトでタイル化されるため、コンテナー全体が実際には水平方向のストライプで埋め尽くされます。

背景: 線形グラデーション(#fb3 50%, #58a 50%);
背景サイズ: 100% 30px; 

縦縞<br /> 縦縞のコードは横縞のコードとほぼ同じですが、主な違いは、グラデーションの方向を指定するために先頭に追加のパラメータを追加する必要があることです。水平ストライプのコードでは、実際にこのパラメータを追加できますが、デフォルト値の bottom は意図と一致しているため省略されています。最後に、background-size の値も反転する必要があります。

背景: linear-gradient(右へ、#fb3 50%、#58a 0);
背景サイズ: 30px 100%;

最初のパラメータを linear-gradient に追加すると、デフォルトの方向が「下から上」になることに注意してください。このため、著者は Novice Tutorial に電子メールを送信し、ドキュメントの文言を変更するよう提案しました。

斜めのストライプ
linear-gradient の最初のパラメータ (角度値) を変更するか、background-size で「精度」を上げるだけの「従来の」方法では、真に完璧な傾斜した背景を効果的に実現することはできません。サイズや傾きが変わると、必ずパターン全体が台無しになってしまいます。
幸いなことに、斜めのストライプを作成するためのより良い方法があります。あまり知られていない事実ですが、linear-gradient() と radial-gradient() にはそれぞれループ バージョン、repeating-linear-gradient() と repeating-radial-gradient() があります。
これらは前の 2 つと同様に機能しますが、1 つの違いがあります。それは、背景全体が塗りつぶされるまで、カラー スケールが無限ループで繰り返されることです。

背景: 繰り返し線形グラデーション(45度、#fb3、#58a 30px); 

ちなみに、上記と同様に、開始位置と終了位置に制限がない場合、すべての「-gradient」プロパティには「gradient halo」が含まれます。これを次のように変更します。

背景: 繰り返し線形グラデーション(60度, #fb3 0 15px, #58a 0 30px); 

この写真を見ると、有名な三角形のケースを思い浮かべますか?

背景: #eee;
背景画像: 線形グラデーション(45度、透明度75%、#bbb 0);

以前は CSS を次のように記述していました。

幅: 0;
高さ: 0;
境界線: 50px 透明の実線;
上の境界線の色: 黒;

実際、 linear-gradient はこれよりもはるかに便利です...

2020-10-17 更新

放射状グラデーションと全体適用

スクロール バーは、要素に表示されているコンテンツ以外にもコンテンツが含まれていることを示すために使用される一般的なインターフェイス コントロールであることは、おそらく誰もが知っているでしょう。しかし、スクロールバーは扱いにくく、視覚的に邪魔になることが多かったため、最近のオペレーティング システムではスクロールバーの外観を簡素化し、ユーザーがスクロール可能な要素を操作していないときはスクロールバーを完全に非表示にするようになりました。
現在知られている「スクロール バーを削除する」方法の中で最もよく使用されるのは::-webkit-scrollbar{display:none;}ですが、明らかに IE では使用できません。スクロール バーの色を変更することしかできません。

CSS3 の時代では、スクロール バーを追加したい場所を div のレイヤーで囲み、 overflow:hiddenを設定し、 calc()関数を使用して幅を動的に計算してオーバーフローさせることができます。これにより、IE での互換性の問題を効果的に解決できます。

現在、ページをスクロールするためにスクロール バーを使用することはほとんどありません (タッチ ジェスチャを使用することが多い)。ただし、スクロール バーは、インタラクティブでない要素であっても、要素のコンテンツがスクロール可能であることを示すのに非常に役立ちます。このプロンプト メソッドは非常に巧妙です。
Google はかつて RSS リーダー (現在は廃止) をリリースしたと言われていますが、そのユーザー エクスペリエンス デザイナーは、同様のプロンプトを作成する非常にエレガントな方法を見つけました。サイドバー コンテナーにコンテンツが追加されると、コンテナーの上部と下部に薄い影が表示されます。このような：

シンプルな構造、つまりサンプルコンテンツを含む単純な順序なしリストから始めましょう。

<ul>
	<li>エイダ・キャットレース</li>
	<li>アラン・パーリング</li>
	<li>シュレディング猫</li>
	<li>ティム・パーナーズ・リー</li>
	<li>ウェブキティ</li>
	<li>Json</li>
	<li>ボイド</li>
	<li>ネコ</li>
	<li>NaN</li>
	<li>Cat5</li>
	<li>ベクター</li>
	<li>エイダ・キャットレース</li>
	<li>アラン・パーリング</li>
	<li>シュレディング猫</li>
	<li>ティム・パーナーズ・リー</li>
	<li>ウェブキティ</li>
	<li>Json</li>
	<li>ボイド</li>
	<li>ネコ</li>
	<li>NaN</li>
	<li>Cat5</li>
	<li>ベクター</li>
	<li>エイダ・キャットレース</li>
	<li>アラン・パーリング</li>
	<li>シュレディング猫</li>
	<li>ティム・パーナーズ・リー</li>
	<li>ウェブキティ</li>
	<li>Json</li>
	<li>ボイド</li>
	<li>ネコ</li>
	<li>NaN</li>
	<li>Cat5</li>
	<li>ベクター</li>
	<li>エイダ・キャットレース</li>
	<li>アラン・パーリング</li>
	<li>シュレディング猫</li>
	<li>ティム・パーナーズ・リー</li>
	<li>ウェブキティ</li>
	<li>Json</li>
	<li>ボイド</li>
	<li>ネコ</li>
	<li>NaN</li>
	<li>Cat5</li>
	<li>ベクター</li>
</ul>

<ul>要素にいくつかの基本的なスタイルを設定して、高さをコンテンツよりわずかに短くし、コンテンツをスクロールできるようにすることができます。

オーバーフロー:自動;
幅: 10em;
高さ: 8em;
パディング: .3em .5em;
境界線: 1px 銀色;

次に、何か面白いことが起こります。放射状グラデーションを使用して上に影を追加します。

背景: 放射状グラデーション(上部、rgba(0,0,0,.2)、透明 70%)、繰り返しなし;
背景サイズ: 100% 15px;

これで、リストをスクロールしても、この影は同じ位置に留まります。これはまさに背景画像のデフォルトの動作です。背景画像の位置は要素に対して固定されます。要素のコンテンツがスクロールされたかどうか。これはbackground-attachment: fixedの背景画像にも適用されます。両者の唯一の違いは、後者はページがスクロールされるときにビューポートに対して固定されることです。背景画像を要素のコンテンツに合わせてスクロールさせる方法はありますか?

現在、共通の値はinherit 、 scroll 、 fixedだけですが、W3C ドキュメントからは、 localという新しいキーワードがbackground-attachmentプロパティに追加されたことがわかります。
このプロパティを影に適用すると、まったく逆の効果が得られます。つまり、一番上までスクロールすると影が見えますが、下にスクロールすると影は消えます。

しかし、それは問題ではありません。私たちには正しい考えがあるのです!

非常に一般的なハックを思いつきました。背景レイヤーが 2 つ必要です。1 つは影を生成するために使用され、もう 1 つは基本的に影を覆うために使用される白い長方形で、マスク レイヤーのように機能します。影を生成する背景レイヤーには、常に所定の位置に留まるようにするため、デフォルトのbackground-attachment値 (スクロール) が設定されます。マスク背景のbackground-attachmentプロパティを local に設定して、上にスクロールすると影が覆われ、下にスクロールすると一緒にスクロールして影が表示されるようにします。

背景: 線形グラデーション(白 30%、透明)、
 			放射状グラデーション(50% 0、rgba(0,0,0,.2)、透明70%);
背景繰り返し: 繰り返しなし;
背景サイズ: 100% 50px、100% 15px;
背景添付: ローカル、スクロール;

そうです、これは線形グラデーションの別の応用、つまりグラデーション マスク レイヤーです。

しかし、今私たちは気づきます。今は上部しかありません。下部をどうすればいいのでしょうか?
これには、CSS の「略語」の使用と*-gradientの理解が必要です。最初のパラメータが追加されていない場合 (方向が指定されていない場合)、デフォルトでは上から下へのグラデーションになりますが、最初のパラメータがto bottom追加されているか100%が指定されていない場合は、デフォルトで下から上へのグラデーションになります。

背景: 線形グラデーション(白 30%、透明) 上 / 100% 50px、
	放射状グラデーション(50% 0、rgba(0,0,0,.2)、透明 72%) 上 / 100% 15px、
	線形グラデーション(上、白 15px、hsla(0,0%,100%,0)) 下 / 100% 50px、
 	放射状グラデーション(下部、rgba(0,0,0,.2)、透明72%) 下部 / 100% 15px;
背景繰り返し: 繰り返しなし;
背景アタッチメント: ローカル、スクロール、ローカル、スクロール;

CSS 属性 *-gradient の実用的な価値を探るこの記事はこれで終わりです。CSS 属性 gradient の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。