[CSSチュートリアル】CSSプロパティ*-gradientの有用性を探る

まず、興味深いプロパティから見てみましょう。 conic-gradient

円錐形グラデーション !

に使えることを発見し、興味を持ちました。 円グラフ 円グラフ
例えば、こんな感じ。

そんな

原理も非常にシンプルで、始点を中心とし、その周りを時計回りに回ってグラデーション効果を得るというものです。これは複数の色パラメータを取る必要があり、それぞれのパラメータには、現在の色値の開始点と終了点（スペースで区切られる）の2つのパーセンテージが続くことが可能です。

background: conic-gradient(pink 0 30%, yellow 0 70%, lime 0 100%);

また、別に次のように書くこともできる。

{{コード

(2番目の方法は、1番目の方法よりも少し互換性があります)

ちょっと待った! 上の2番目の写真は、私たちが欲しいものではないのでしょうか？
/{br この画像をもとに、次のようなコードを考えるのは難しいことではありません。

background: conic-gradient(pink 0, pink 30%, yellow 30%, yellow 70%, lime 70%, lime 100%);

しかし、これでは完全に「静止画」です。

私たちの多くは、グラフィックを描くためにechartsを使ったことがあるでしょう。バックエンドからのデータをechartsのMapオブジェクトの指定されたパラメータ（配列）にレンダリングすると、要件を満たす異なる色を持つ円グラフを得ることができます。これがCSSではどうなるのでしょうか？

もちろんJSを使わなければなりませんが -- なぜならCSS3では カスタム変数 これは、CSS プロパティと JavaScript 変数を組み合わせる素晴らしい方法です。
を調べた結果 グラデーションカラーの開始位置と終了位置をカスタム変数として設定し、JavaScriptがデータを取得した際にその値を変更することで円グラフの色分布を変更するのが良い方法でしょう

以前書いたデモはこちらです。

{
    width: 200px;
    height: 200px;
    background: conic-gradient(deeppink 0, deeppink 30%, yellowgreen 30%, yellowgreen 70%, teal 70%, teal 100%);
    border-radius: 50%;
}

:root{
	--zero:0;
	--one:50%;
}
.circle{
	width: 300px;
	height: 300px;
	border-radius: 50%;
	/* background: conic-gradient(red, yellow, lime, aqua, blue, fuchsia, red); *	background: conic-gradient(red var(--zero) var(--one),yellow var(--one) 100%);
}

色値を動的に追加する場合（新しい調査オブジェクトなど）には、スタイルでプロパティを動的に変更します。

<div class="circle"></div>
<button id="but">Click me to change the pie chart distribution</button>
<script>
	but.onclick=function(){
		document.documentElement.style.setProperty('--zero', '10%');
		document.documentElement.style.setProperty('--one', '70%');
	}
</script>

を使用するよりもはるかに優れています。 強 ::後 擬似要素 "の実装がより簡単になりました。

擬似要素のアプローチは、多くの人が遊んだことがあるかもしれません。transformのrotateプロパティを使ってコンテンツボックスを回転させ、その一部を目的に合わせて表示させるというものです。

他にもネットで検索すべき「派手な操作」はたくさんあるので、ここでは触れません(: 最初の2年間、この属性にブラウザが「無関心」だったのに比べれば、今回一部サポートされたのも大きな進歩です、引き続き期待しましょう)

について リニアグラデーション

この属性は、いくつかのサイトで要素の背景として使われる以外は、あまり関心がないようです。
例えば 縞模様の背景
"複数のカラーカーソルが同じ位置にある場合、それらは無限に小さい遷移領域を作成します。
遷移の開始色と終了色は、それぞれ最初に指定された値と最後に指定された値になります。効果から、色はその中の
の位置が突然に、滑らかなグラデーション処理ではなく、"
グラデーションはコードで生成された画像なので、他の背景画像と同様に扱うことができ、background-size でサイズを変更することもできます。また、背景はデフォルトで繰り返しタイル状になるので、実際にはコンテナ全体が横縞で埋め尽くされます:.

xxx.style.xxx="xxx"; /

画像

縦縞
/{br 縦縞のコードは横縞のコードとほぼ同じですが、主な違いは、横縞のコードに
の冒頭に、グラデーションの方向を指定するための追加パラメータを追加する必要があります。水平方向のストライプを表すコードでは
パラメータがありますが、そのデフォルト値である to bottom は、私たちが意図したものと同じだったでしょう。
ということで、省略されています。最後に、background-sizeの値も反転させる必要があります。
を少し。

background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;

なお、linear-gradientは最初のパラメータが追加されるとデフォルトで「ボトムアップ」になるので、ルーキーチュートリアルにメールして、ドキュメントの文言を変更するように提案しました。

チルトストライプ
/{br 線形グラデーションの最初のパラメータである角度値を変更するだけの「伝統的な」方法や、background-size で「精度」を追加する方法は、本当に完璧な傾斜した背景を実現するには効果的ではありません：サイズや傾斜を変更すると、常にパターン全体を台無しにしてしまいます " は、真に完璧な傾斜した背景を実現するために効果的ではありません: サイズや傾斜を変更すると、常にパターン全体が台無しになります! {ということです。
幸いなことに、斜めの縞模様を作るより良い方法があります。あまり知られていませんが、linear-gradient() と radial-gradient() にはそれぞれ repeat-linear-gradient() と repeating-radial-gradient() という再帰的な拡張機能があるのです。
これらは最初の2つと同じように動作しますが、1つだけ違うのは、カラースケールが無限ループで繰り返され、直線的であることです。
背景全体が埋まるまで

background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%;

画像

あ、ちなみに、上記のように、開始位置と終了位置に制限がない場合、すべての「-gradient」属性は「グラデーションのハレーション」を起こすので、以下のように変更するとよいでしょう。

background: repeating-linear-gradient(45deg, #fb3, #58a 30px);

画像

この写真を見て、有名な事件である「三角形」を思い浮かべましたか？

background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);

以前は一般的にこのような書き方をするCSSを使っていたのに対し

background: #eee;
background-image: linear-gradient(45deg, transparent 75%, #bbb 0);

実は、linear-gradientには、これ以外にもいろいろな機能があるのです...

更新日：2020-10-17

radial-gradientと全体的なアプリケーション

スクロールバーは、ある要素に見える以上のコンテンツが含まれていることを知らせるために使われる、一般的なインターフェースコントロールです。しかし、スクロールバーはかさばり、視覚的に圧倒されることが多いため、最近のオペレーティングシステムでは、ユーザーがスクロール可能な要素を操作していないときはスクロールバーを完全に非表示にして、外観を簡素化し始めています。 {このため、最近のオペレーティングシステムでは、ユーザーがスクロール可能な要素を操作していないときは、スクロールバーを完全に隠して外観を簡素化するようになっています。
スクロールバーを消す」方法としては、以下のようなものがよく知られています。 {{コード が、明らかに IE では動作しません -- スクロールバーの色を変えることしかできないのです。

CSS3の時代には、スクロールバーを付けたい場所をdivで囲み、その中に width: 0; height: 0; border: 50px solid transparent; border-top-color: black ; で内側を ::-webkit-scrollbar{display:none;} 関数を使って動的に幅を計算し、オーバーフローするようにします。これにより、IEでの互換性問題を効果的に解決することができます。

スクロールバーでページをスクロールすることはもうほとんどありませんが（タッチジェスチャーの方が多い）、要素のコンテンツがスクロール可能であることを、それと相互作用しない要素に対しても示すために、スクロールバーはまだ有用です；そしてこれはそれを示す非常に賢い方法です。
かつてGoogleがRSSリーダー（現在は販売されていない）を導入した際、そのUXデザイナーが、コンテンツが増えるとサイドバーのコンテナの上下にかすかな影が現れるという、非常にエレガントな方法を見つけたと言われている。このようなものだ。

まず、単純な構造コードから見てみましょう。図式的な内容を持つ単純な非順序型リストです。

overflow:hidden

我们可以给 {コード

{{コード 元素设置一些本的样式，让它的高度略短于内容，从而让其内容可以滚动：设置一些本的样式，让它的高度略短于内容，从而让其内容可以滚动：.

calc()

次に、面白いことが起ころうとしています。放射状のグラデーションで上部に影を追加しています。

<ul>
	<li>Ada Catlace</li>
	<li>Alan Purring</li>
	<li>Schrödingcat</li>
	<li>Tim Purrners-Lee</li>
	<li>WebKitty</li>
	<li>Json</li>
	<li>Void</li>
	<li>Neko</li>
	<li>NaN</li>
	<li>Cat5</li>
	<li>Vector</li>
	<li>Ada Catlace</li>
	<li>Alan Purring</li>
	<li>Schrödingcat</li>
	<li>Tim Purrners-Lee</li>
	<li>WebKitty</li>
	<li>Json</li>
	<li>Void</li>
	<li>Neko</li>
	<li>NaN</li>
	<li>Cat5</li>
	<li>Vector</li>
	<li>Ada Catlace</li>
	<li>Alan Purring</li>
	<li>Schrödingcat</li>
	<li>Tim Purrners-Lee</li>
	<li>WebKitty</li>
	<li>Json</li>
	<li>Void</li>
	<li>Neko</li>
	<li>NaN</li>
	<li>Cat5</li>
	<li>Vector</li>
	<li>Ada Catlace</li>
	<li>Alan Purring</li>
	<li>Schrödingcat</li>
	<li>Tim Purrners-Lee</li>
	<li>WebKitty</li>
	<li>Json</li>
	<li>Void</li>
	<li>Neko</li>
	<li>NaN</li>
	<li>Cat5</li>
	<li>Vector</li>
</ul>

さて、リストをスクロールすると、この影は同じ位置にとどまります。これはまさに背景画像のデフォルトの動作です。要素のコンテンツがスクロールされるかどうかに関係なく、背景画像の位置は要素に対して固定されています! これは を背景画像に使用します。両者の唯一の違いは、後者はページがスクロールされたときにビューポートに対して固定されることです。背景画像を要素のコンテンツと一緒にスクロールさせる方法はありますか？

現在、一般的な値として知られているのは overflow: auto; width: 10em; height: 8em; padding: .3em .5em; border: 1px solid silver; {コード background: radial-gradient(at top, rgba(0,0,0,.2),transparent 70%) no-repeat; background-size: 100% 15px; {{コード {{コード {{コード {{コード


{{コード background-attachment: fixed

{{コード {{コード inherit scroll , fixed but from the W3C documentation: the later is background-attachment attribute, a new keyword was added called local !
If we apply this property to this shadow, it gives us the opposite effect: when we scroll to the top, we can see a shadow, but when we scroll down, the shadow disappears. But it doesn't matter, we're on the right track! I came up with a very common hack: we need two layers of background: one to generate that shadow, and another layer that is basically a white rectangle to cover the shadow, which acts like a mask layer. The layer that generates the shadow will have the default background-attachment value (scroll), because we want it to always stay in place. We put the masked background's background-attachment attribute to local so that it will cover the shadow when we scroll to the top and follow as we scroll down to reveal the shadow. The background: linear-gradient(white 30%, transparent), radial-gradient(at 50% 0, rgba(0,0,0,.2), transparent 70%); background-repeat: no-repeat; background-size: 100% 50px, 100% 15px; background-attachment: local, scroll; Yes, that's another application of linear-gradient -- a gradient mask layer! But now we'll see: now only the top side is there, what about the bottom side?
/{br This is where the "shorthand" in css comes in and the *-gradient If the first argument is not added (no direction is specified), the default is a top-down gradient, but if the first argument is added but not specified to bottom or 100% then it defaults to a bottom-up fade! background: linear-gradient(white 30%, transparent) top / 100% 50px, radial-gradient(at 50% 0, rgba(0,0,0,.2),transparent 72%) top / 100% 15px, linear-gradient(to top, white 15px, hsla(0,0%,100%,0)) bottom / 100% 50px, radial-gradient(at bottom, rgba(0,0,0,.2), transparent 72%) bottom / 100% 15px; background-repeat: no-repeat; background-attachment: local, scroll,local, scroll; /pre{{コード

{{コード
{{コード
scroll

fixed but from the W3C documentation: the later is background-attachment attribute, a new keyword was added called local !
If we apply this property to this shadow, it gives us the opposite effect: when we scroll to the top, we can see a shadow, but when we scroll down, the shadow disappears.

{{コード {{コード
background-attachment {コード {{コード

{{コード
{{コード
background: linear-gradient(white 30%, transparent),
 			radial-gradient(at 50% 0, rgba(0,0,0,.2), transparent 70%);
background-repeat: no-repeat;
background-size: 100% 50px, 100% 15px;
background-attachment: local, scroll;

{{コード *-gradient