ホームプログラミング言語 Web関連 css3 CSS gradient (カラーグラデーション) 10 分で始める

CSS gradient (カラーグラデーション) 10 分で始める

CSS のグラデーションとは、2 つ以上の色の間の滑らかな遷移を指します. 過去には、グラデーション効果を実現するために事前に定義された画像を使用する必要がありました. CSS3 の登場後、それははるかに簡単になりました. CSS3 は柔軟なソリューションを提供します. .

CSS3 では、線形グラデーション (linear-gradient() 関数で作成)、放射状グラデーション (radial-gradient() 関数で作成)、円錐グラデーション (conic-gradient() 関数で作成) の 3 種類のグラデーションを定義できます。作成）。または、repeating-linear-gradient()、repeating-radial-gradient()、repeat-conic-gradient() 関数を使用して、繰り返しグラデーションを作成することもできます。

CSS で作成されたグラデーションは、シンプルで柔軟なだけでなく、画像を使用する際に必要な読み込みプロセスをなくすことで、Web ページの読み込み時間を節約します。さらに、CSS で作成されたグラデーション要素は、品質を損なうことなく任意の縮尺に拡大または縮小できます。

コンテンツ 表示

1.linear-gradient

linear-gradient(線形グラデーション)とは、直線に沿ったカラーグラデーション (たとえば、右上から下、左から右など) を指します。線形グラデーションを作成するには、少なくとも 2 つのカラーストップを定義する必要があります (カラーストップは、より複雑なグラデーション効果を作成するには、より多くのカラーストップを定義する必要があります。線形グラデーションを作成するための基本的な構文は次のとおりです。

linear-gradient(direction, color-stop1, color-stop2, …);

パラメータの説明は次のとおりです。

direction(方向)は、グラデーションの方向 (左から右、上から下など) を定義するオプションの値で、特定の角度 (90 度など) にするか、次のようなキーワードを追加して表すことができます。左へ、右へ、上へ、下へ、など。例:
- to left:右から左への意味で、270 度に相当します。
- to right: 左から右への意味で、90度に相当します。
- to top: 下から上を意味し、0度に相当します。
- to bottom: デフォルト値。上から下を意味し、180 度に相当します。
- to right bottom: 左上から右下への意味。
- to right top: 左下から右上への意味。
- to left bottom: 右上から左下を意味します。
- to left top: 右下から左上へという意味です。
color-stop1, color-stop2, …: 複数定義されたカラーストップを示します. 各カラーストップでは、色を定義するだけでなく、数値と単位の形式で色の開始位置と終了位置を定義することもできますまたはパーセンテージ。

[例] linear-gradient() 関数を使用して、線形グラデーションを定義します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 210px;
            height: 50px;
            float: left;
            margin: 10px;
        }
        .ichinichi {
            background: linear-gradient(to right bottom, red, blue 70px);
        }
        .futsuka {
            background: linear-gradient(190deg, #000, #FFF);
        }
        .mikka {
            background: linear-gradient(red, green, blue);
        }
        .yokka {
            background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
        }
    </style>
</head>
<body>
    <div class="ichinichi"></div>
    <div class="futsuka"></div>
    <div class="mikka"></div>
    <div class="yokka"></div>
</body>
</html>

実行結果は次の図のとおりです。

2.radial-gradient

radial-gradientとlinear-gradientの違いは、radial-gradientは中心から外側に向かって伸びるグラデーションで、中心点の位置を指定でき、グラデーションの形状も設定できます。linear-gradientを定義するための基本的な構文は次のとおりです。

radial-gradient(shape size at position, color-stop1, color-stop2, …);

パラメータの説明は次のとおりです。

at: パラメータ位置の前に配置する必要があるキーワード。
position: グラデーションの開始点の座標を指定します. グラデーションの開始点の座標は、値と単位、パーセンテージ、またはキーワード (左、下など) の形式で指定できます。 2 つのパラメーターが提供されます。最初のパラメーターは横座標を示すために使用され、2 番目のパラメーターは縦座標を表すために使用されます。1 つのパラメーターのみが提供される場合、2 番目のパラメーターはデフォルトで 50%、つまり中央に設定されます。
shape：グラデーションの形状を指定します。オプションの値は円（円）、楕円（楕円）です。
size: グラデーション形状のサイズを指定します. 特定の値を使用して円と楕円の半径を指定するだけでなく, 次のキーワードを使用してグラデーション形状のサイズを指定することもできます:
- closest-side: 放射状グラデーションの半径の長さが、円の中心から円の中心に最も近い側までであることを指定します。
- closest-corner: 放射状グラデーションの半径の長さが、円の中心から円の中心に最も近い角までであることを指定します。
- farthest-side: デフォルト値で、放射状グラデーションの半径の長さが円の中心から円の中心から最も離れた側までであることを指定します。
- farthest-corner: 放射状グラデーションの半径の長さが、円の中心から円の中心から最も遠い角までであることを指定します。
color-stop1, color-stop2, …: 複数定義されたカラーストップを示します. 各カラーストップでは、色を定義するだけでなく、数値と単位の形式で色の開始位置と終了位置を定義することもできますまたはパーセンテージ。

[例] Radial-gradient() 関数を使用して、放射状グラデーションを定義します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 210px;
            height: 100px;
            float: left;
            margin: 10px;
            border: 1px solid black;
        }
        .ichi {
            background: radial-gradient(circle at 50%, red, yellow, lime);
        }
        .ni {
            background: radial-gradient(ellipse 100px 30px at 30%, red, yellow, lime);
        }
        .san {
            background: radial-gradient(circle 100px at 50%, red 10%, yellow 50%, lime 100px);
        }
        .shi {
            background: radial-gradient(circle closest-corner at 50px 30px, red, yellow, lime);
        }
    </style>
</head>
<body>
    <div class="ichi"></div>
    <div class="ni"></div>
    <div class="san"></div>
    <div class="shi"></div>
</body>
</html>

実行結果は次の図のとおりです。

3.conic-gradient

円錐グラデーションは放射状グラデーションに似ています. どちらもカラースケールのソースポイントとして中心点を持ちます. 違いは, 円錐グラデーションが (中心点から放射状に広がるのではなく) 中心点の周りを回転することです.conic-gradientは次のとおりです。

conic-gradient(from angle at position, start-color, …, last-color);

構文は次のように説明されています。

from: パラメータ angle の前に配置する必要があるキーワード。
angle: 円錐グラデーションの開始角度を定義します。空にすることもできます。デフォルト値は 0deg です。
at: パラメータ位置の前に配置する必要があるキーワード。
position: コーングラデーションのコーン中心の座標を定義します.コーン中心の座標は、値と単位、パーセンテージ、またはキーワード (左、下など) の形式で指定できます。 2 つのパラメータが指定されている場合、最初のパラメータは横座標を示すために使用され、2 番目のパラメータは縦座標を表すために使用されます。パラメータが 1 つだけ指定されている場合、2 番目のパラメータはデフォルトで 50%、つまり中央に設定されます。（中心）;
start-color, …, last-color: 定義された複数のカラースケールを示します. 各カラースケールでは、色を定義するだけでなく、色の開始位置をパーセンテージまたは角度で定義することもできます.

[例] conic-gradient() を使用して、円錐勾配を定義します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 210px;
            height: 100px;
            float: left;
            margin: 10px;
            border: 1px solid black;
        }
        .one {
            background: conic-gradient(at 50%, red, orange, yellow, green, blue, indigo, violet, red);
        }
       .two {
            background: conic-gradient(red 0deg 30deg, orange 30deg 50deg, yellow 50deg 200deg, green 200deg 300deg, blue 300deg 360deg);
        }
        .three {
            background: conic-gradient(from 90deg, red 0% 55%, yellow 55% 90%, lime 90% 100%);
        }
        .four {
            background: conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn);
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</body>
</html>

実行結果は次の図のとおりです。

CSS では、 Repeat-linear-gradient() 、 Repeat-radial-gradient() 、 Repeat-conic-gradient() などの関数を使用して、それぞれ線形、放射状、円錐グラデーションの繰り返しグラデーションを作成することもできます。グラデーションを繰り返すということは、要素全体をカバーするためにグラデーションプロセスを複数回繰り返すことを意味します。

ヒント: Repeating-linear-gradient()、repeat-radial-gradient()、repeat-conic-gradient() 関数の構文は、linear-gradient()、radial-gradient()、および conic-gradient() 関数は、それぞれ同じです。

[例] グラデーションの繰り返しを定義するには、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient() を使用します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 210px;
            height: 100px;
            float: left;
            margin: 10px;
            border: 1px solid black;
        }
        .one {
            background: repeating-linear-gradient(190deg、#000 0px 10px,#FFF 10px 20px);
        }
       .two {
            background: repeating-radial-gradient(circle 100px at 50%、red 0% 10%、yellow 10% 30%、lime 30% 40%);
        }
        .three {
            background: repeating-conic-gradient(#69f 0 36deg、#fd44ff 36deg 72deg);
        }
        .four {
            background: conic-gradient(#fff 0.25turn、#000 0.25turn 0.5tur, #fff 0.5turn 0.75turn、#000 0.75turn) top left / 25% 25% repeat;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</body>
</html>

実行結果は次の図のとおりです。