CSS3 のカラー値 RGBA とグラデーションカラーの使用方法の紹介

CSS3以前は、グラデーション画像は背景画像としてのみ使用できました。
CSS3 のグラデーション構文を使用すると、画像のダウンロードコストを節約でき、ブラウザの解像度を変更するときに効果を高めることができます。

色値RGBA

私たちがよく知っている RGB カラー標準は、r (赤)、g (緑)、b (青) の 3 つの色で構成され、0 ～ 255、または 0 ～ 100% の値を持つさまざまな色を形成します。

RGBA は RGB にアルファ不透明度パラメータを追加します。

例1: 通常の赤のRGBカラー

.デモ{
    幅: 100ピクセル;
    高さ: 100px;
    背景色: rgb(255, 0, 0);
}

例2: RGBAを使用して赤い半透明効果を作成する

.デモ{
    幅: 100ピクセル;
    高さ: 100px;
    背景色: rgba(255, 0, 0, 0.5);
}

アルファ値の範囲は 0 ～ 1 です。値が小さいほど透明度が高くなります。一般的に、最も一般的な値は 0.2 ～ 0.5 です。

線形グラデーション

グラデーションは「傾斜」を意味し、リニアは「直線」を意味します。グラデーションカラーは、複数の色を滑らかに移行して美しい色を形成します。リニアグラデーションパラメータには、グラデーションの方向 (オプション) と任意の数のグラデーションカラーが含まれます。

例3: 赤、緑、青のグラデーションカラー

.デモ{
    幅: 100ピクセル;
    高さ: 100px;
    背景: 線形グラデーション(赤、ライム、青);
}

ここでbackground-colorではなくbackgroundと書いたことに注意してください。
(実際、グラデーションカラーは背景画像の関数です)

グラデーションの方向が入力されていない場合は、デフォルトで上から下になります。

グラデーション方向には次のプロパティ値があります
上へ、下へ（デフォルト）、左へ、右へ
左上へ、右上へ、左下へ、右下へ
または角度xxxdegを入力してください
たとえば、「to top left」は方向が左上に向かうことを意味します。

.デモ{
    幅: 100ピクセル;
    高さ: 100px;
    背景: 線形グラデーション(左上、赤、ライム、青)
}

角度0度は上向きに等しく、角度を大きくすると時計回りに回転するのと同じになります。

.デモ{
    幅: 100ピクセル;
    高さ: 100px;
    背景: 線形グラデーション(20度、赤、ライム、青);
}

各色の後に各色のグラデーションの位置を追加できます

.デモ{
    幅: 100ピクセル;
    高さ: 100px;
    背景: 線形グラデーション(赤 30%、ライム 50%、青 70%);
}

記入しない場合は、ブラウザがデフォルトで均等に分割します。たとえば、3 つの色の値は、デフォルトで 0%、50%、100% です。

また、線形グラデーションを繰り返すことができる珍しい関数repeating-linear-gradientもあります。

.デモ{
    幅: 100ピクセル;
    高さ: 100px;
    背景: repeating-linear-gradient(赤、rgba(100,100,100,0.5)、青 50%);
}

その結果、この醜いグラデーションカラーが生まれました。

放射状グラデーション

ラジアルは「放射状の、放射状の」という意味です。
中心から外側に向かって放射状に広がるグラデーションです。

.デモ{
    幅: 200ピクセル;
    高さ: 100px;
    背景: 放射状グラデーション(赤、ライム、青);
}

線形グラデーションに似ていますが、最初のパラメーター (オプション) は放射状グラデーションのグラデーションの形状です。位置は円または楕円 (デフォルト) にすることができます。

.デモ{
    幅: 200ピクセル;
    高さ: 100px;
    背景: 放射状グラデーション(円、赤、ライム、青);
}

位置の図形形式を使用して、グラデーションの中心の位置を定義できます。

.デモ{
    幅: 200ピクセル;
    高さ: 100px;
    背景: 放射状グラデーション(30% 30% の円、赤、ライム、青)。
}

グラデーションの位置は、パーセンテージまたはピクセル形式で表すことができます。 1 つの値のみ入力した場合、もう 1 つの値はデフォルトで中央の位置の 50% になります。

.デモ{
    幅: 200ピクセル;
    高さ: 100px;
    背景: 放射状グラデーション(30% の円、赤、ライム、青)
}

キーワードを使用したくない場合は、グラデーションのサイズに数字を使用することもできます。

.デモ{
    幅: 200ピクセル;
    高さ: 100px;
    背景: 放射状グラデーション(100px 100px at 50px 50px、赤、ライム、青);
}

グラデーションのサイズは100px*100px、グラデーションの位置は50px*50pxです

放射状グラデーションにも、線形グラデーションに似た繰り返しグラデーション機能があります。ここでは説明しません。

.デモ{
    幅: 200ピクセル;
    高さ: 100px;
    背景: 繰り返し放射状グラデーション(赤 10%、ライム 20%、青 30%)。
}

CSS3 のカラー値 RGBA とグラデーションカラーの使用に関するこの記事はこれで終わりです。CSS3 RGBA とグラデーションカラーに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: IDEA が Docker を統合してリモート展開を実現するための詳細な手順

>>: 優れた登録プロセスの手順