CSS線形グラデーションプロパティ事例

linear-gradientはcss3の強力なプロパティですが、その柔軟な使い方は、これまで触れたことがない人には難しいものです。

I. はじめに

linear-gradientは、線形グラデーションを実装したプロパティで、その名の通り、特徴的に線形的なグラデーションを制御するのが特徴である。

属性の説明です。

linear-gradient([[[上|下||], ]]? [, ]+);

これを簡略化すると

1. 線形変化を制御するパラメータは、カンマで区切って複数指定することができます。
2. 線形変動を制御する各ユニットは、以下の2つの構成要素を持っています。
3. 最初の部分は線形変化の方向で，2つの形式があります：最初の形式は角度で，時計回りに増加し，より柔軟です；2番目の形式はtoと2つのキーワードを含みます：最初のキーワードは水平位置左または右を示し，次のキーワードは垂直位置上または下を示します。キーワードの順序は影響せず，すべて任意です。to top, to top, to bottom, to left, to rightは0，180，270および90°の角に転換されます。残りの値は，上部中心に向かって時計回りに回転した状態から始まる角度に変換される。この角度に対する設定はかなり特異で、8方向しか設定できません（2方向はピンチ方向）。
4. 2つ目の部分は変化の色で、デフォルトでは全体をフラットに分けるグラデーション処理になっています。特定の色の変化の位置間隔は、色＋停止位置という形で設定でき、複数にも対応し、理論上は無制限です。

すなわち、linear-gradient（角度または（to + 方向）、カラーセル）です。

II. 使い方のヒント

2.1 正方形の背景

バッケージサイズによる直線的なグラデーションは、次のような意外な効果をもたらします。

インプリメンテーションです。

background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 10%)です。
linear-gradient(rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 10%)。
background-size: 30px 30px。
background-color: 白。
height: 200px;

2.2 市松模様効果

インプリメンテーションです。

background-image: linear-gradient(45deg,#ccc 25%,transparent 0)。
linear-gradient(45deg,transparent 75%,#ccc 0)を使用します。
linear-gradient(45deg,#ccc 25%,transparent 0)。
linear-gradient(45deg,transparent 75%,#ccc 0)。
background-position: 0 0,-15px 15px,15px -15px,30px 30px。
background-size: 30px 30px;
background-color: white;

<リンク

CSSのlinear-gradientプロパティについては以上となります。CSS linear-gradientプロパティの詳細については、過去の記事を検索いただくか、引き続き以下の関連記事をご覧ください。