Home-theater-designers
インターネットを数分以上使用している場合は、CSSのグラデーションに遭遇した可能性があります。 CSSのbackgroundプロパティを使用して、さまざまなスタイルを作成できます。最も興味深いタイプの1つは、グラデーション値で何ができるかです。
さまざまなCSSグラデーションを設計および作成する方法を知ることは、ソフトウェア設計者または開発者にとっての資産です。この記事から、プロジェクトにCSSグラデーションを組み込み始めるために知っておく必要のあるすべてのことを学びます。
CSSグラデーションとは何ですか？
CSSグラデーションは、基本的に2つ以上の色の組み合わせであり、1つの色から次の色にスムーズに移行します。 CSSグラジエントの遷移状態は、使用するグラジエントのタイプによって異なります。ソフトウェア設計で一般的に使用される勾配には、線形と放射状の2つの主要なタイプがあります。
ただし、あまり人気がなく、円錐曲線として知られている3番目のタイプの勾配があります。
CSSグラデーションの構文
Background-image: gradient-type (direction, color1, color2);
CSSグラデーションは、background-imageCSSプロパティに割り当てる必要があります。グラデーションタイプは、いくつかのいずれかになります。線形グラデーション、放射状グラデーション、または円錐グラデーション。グラデーションタイプの後には、グラデーションの遷移方向と、グラデーションに含まれる色を含む開き括弧と閉じ括弧が続きます。
関連している： CSSで背景画像を設定する方法
上記の例は2つの色を示していますが、グラデーションには複数の異なる色を含めることができます。唯一の要件は、リスト内の各色がコンマで区切られていることです。
線形勾配とは何ですか？
線形グラデーションは、最も一般的なCSSグラデーションです。 2つ以上の色を使用して、水平、垂直、または斜めの遷移グラデーションを作成します。
CSS線形勾配の例
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
上記のコードは、次のCSSグラデーションを生成します。
上記の例から省略されているグラデーション構文の主要なコンポーネントが1つあります。このコンポーネントは勾配の遷移方向であり、線形勾配のデフォルトの配置が垂直（上から下）であるため、省略されています。これが、この例で必要な出力です。
上記のコードは、次のコード行と同じ結果を生成します。 2つの違いは、コードの方向セクションだけです。
下線形勾配の例の使用
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
出力からわかるように、上記のコードは、上部が青で始まり、下部がオレンジにゆっくりと移行するグラデーションを作成します。色の順序を逆にしたい場合は、単に置き換えることができます 下へ と トップに これにより、グラデーションの方向が逆になり、次の出力が生成されます。
垂直方向の配置と同様に、グラデーションの水平方向の配置は、次の2セットの方向キーワードを使用して実現できます。 左へ と 右へ 、それぞれ次の出力を生成します。
Windowsでビデオを回転させる方法
対角線形勾配
線形勾配の任意の方向に対角線形勾配遷移を実現することが可能です。これを可能にするために知っておく必要のあるキーワードの特定のリストは4つだけです。
- 右下へ
- 左下へ
- 右上へ
- 左上へ
対角線形勾配の例の使用
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
上記の例では、次の出力が生成されます。
上記の出力からわかるように、線形グラデーションは、グラデーションの左上から右下のセクションに移動する対角線方向に遷移します。
色とりどりの線形グラデーション
線形グラデーションは2つ以上の色を持つことができますが、グラデーションでより多くの色はどのように見えますか？多色の線形グラデーションの色の配置は、その方向によって異なります。水平方向に遷移するものは、線形グラデーションの正確な方向に応じて、線形グラデーションの左側または右側に新しい色が表示されます。
多色線形勾配の例
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
上記のコード行は、次の出力を生成します。
ご覧のとおり、新しい色がグラデーションの右側に追加され、最終的に虹に変形するものが作成されます。同じ出力を垂直方向に実現できます。ただし、線形グラデーションの特定の色の配置は、垂直方向のキーワード（上または下）によって異なります。
放射状グラデーションとは何ですか？
ラジアルグラデーションは、デフォルトで中心から始まる2色以上のスパイラルグラデーションを作成します。線形勾配が垂直または水平に流れる直線勾配を生成する場合、放射状勾配は中心から外縁に流れる円形勾配を生成します。
放射状グラデーションの例の使用
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
上記のコード行は、次の出力を生成します。
放射状勾配中心の変更
デフォルトでは、放射状グラデーションはグラデーションの中心から始まります。ただし、いくつかのキーワードを導入することで、原点を変更することができます。
複数のメールGmailから添付ファイルをダウンロードする
ラジアル勾配開始位置の変更の例
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
上記のコード行は、次の出力を生成します。
上の出力からわかるように、グラデーションは中央ではなく右上隅から始まります。この変更は、キーワードが含まれているために可能です 右上 上記のコードで。次のキーワードのリストを使用して、放射状勾配の原点を変更することもできます。
- 左上
- 右下
- 左下の
色とりどりの放射状勾配
線形グラデーションと同様に、放射状グラデーションも2つ以上の色を使用できます。主な違いは、線形グラデーションが直線のグラデーションに追加される場合、放射状グラデーションは外縁に新しい色を追加することです。
色とりどりの放射状グラデーションの例
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
上記のコード行は、次の出力を生成します。
グラデーションのカスタマイズ
これまで、グラデーションの方向と中心点を変更する方法を見てきましたが、グラデーションをカスタマイズする方法は見ていません。グラデーションのカスタマイズは大変な作業のように聞こえるかもしれませんが、CSS背景グラデーションの作成の基本を理解したら、次の明らかなステップは、CSSグラデーションをよりユニークにする方法を学ぶことです。
Windowsが外付けハードドライブを検出しない
デフォルトでは、グラデーションの色は均等に分散されたスペースを占め、各色は次の色にスムーズに移行します。したがって、2つの色を組み合わせてグラデーションを形成すると、各色は、一方から他方に移行するときに使用可能なスペースの半分を占めます。 3つの色を組み合わせると、各色が使用可能なスペースの3分の1を占めます。
カスタマイズされたグラデーションを使用すると、明示的に割り当てることにより、グラデーションで色が占めるスペースの量を定義できます。 カラーストップ位置 。
線形勾配のカスタマイズ例1
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
上記のコード行は、次の出力を生成します。
上記の出力は、線形グラデーションの2番目の色が、通常の位置ではなく、グラデーションの最初の色の30％ポイントで停止していることを示しています。また、2番目の色はグラデーションの最終色でもあるため、自然に最後まで拡張されます。 。
上記のコードの最初の色の最後に30％を配置すると、状況がより明確になるはずです。
線形勾配のカスタマイズ例2
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
上記のコードは、次の出力を生成します。
上記の出力は、グラデーションの最初の色がグラデーションの2番目の色の30％ポイントで停止していることを明確に示しています。この例と上記の例は、カラーストップのカスタマイズを理解しやすくするのに役立つはずです。
放射状グラデーションのカスタマイズは、線形グラデーションと同じ方法で行われます。放射状グラデーションで上記と同じ結果を達成するために必要なのは、グラデーションのタイプと方向を変更することだけです。
CSSグラデーションの作成がこれまでになく簡単になりました
このチュートリアル記事では、線形および放射状のグラデーションを識別して作成するためのツールを提供します。ここまで進んだら、グラデーションの方向と中心を変更する方法を学びました。さらに、CSSグラデーションをカスタマイズし、独自の背景グラデーションを作成するスキルが身に付きました。
ただし、新しい独自のグラデーションを直接作成したくない場合は、見栄えのする既存のグラデーションを作成することから始めることができます。
共有 共有 つぶやき Eメール 27スタイリッシュなCSS背景グラデーションの例去年は無地です。グラデーションが入っています！しかし、CSSでどのように作成しますか？
次を読む 関連トピック- プログラミング
- ウェブ開発
- ウェブデザイン
- CSS
Kadeisha Keanは、フルスタックソフトウェア開発者およびテクニカル/テクノロジーライターです。彼女は、最も複雑な技術的概念のいくつかを単純化する明確な能力を持っています。技術初心者なら誰でも簡単に理解できる素材を作る。彼女は、執筆、興味深いソフトウェアの開発、そして（ドキュメンタリーを通じて）世界中を旅することに情熱を注いでいます。
KadeishaKeanのその他の作品ニュースレターを購読する
ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。
購読するにはここをクリックしてください