Diviのグラデーションビルダーでのグラデーションタイプの比較

グラデーションタイプは、新しいDiviグラデーションビルダーの一部です。 新しいDiviグラデーションタイプを使用すると、背景にさまざまな形や色を追加できます。 この投稿では、これらのグラデーションタイプを比較し、それらを使用して独自の背景を作成する方法を紹介します。

始めましょう。

Diviグラデーションタイプとは何ですか？

Diviの新しいグラデーションビルダーは、グラデーションタイプを含むいくつかの新しいグラデーション機能を追加します。 選択できる勾配タイプは4つあります。

• 線形
• サーキュラー
• エリプティカル
• コニカル

タイプごとに、グラデーションの表示が異なります。 これらは、円、楕円、または円錐の線形カラーパターンとして表示するグラデーションを形成するために使用されます。 これらについては、例で詳しく説明します。

グラデーションの種類は、位置、繰り返すかどうか、グラデーションスライダーバーの測定単位、背景の上にグラデーションを配置するなど、他のコントロールの影響も受けます。

すべての調整は、グラデーションに小さな影響または大きな影響を与える可能性があります。 グラデーションは微妙な場合もあれば、目立つ場合もあります。 小さな変更または大きな変更は、1回の調整で行うことができます。

これを念頭に置いて、各グラデーションタイプを使用したグラデーションの例をいくつか見てみましょう。 各グラデーションタイプの3つの例を示します。 1つ目は、Web全体で見られる標準的なタイプのグラデーションになります。 次の2つは、グラデーションタイプで何ができるかを確認するために、もう少し実験的なものになります。

グラデーションタイプの例

グラデーションタイプの例では、Divi内で利用できる無料のBed and BreakfastLayoutPackのランディングページのヒーローセクションを使用しています。 このセクションにはすでにグラデーションがありますが、それを置き換えて実験を行います。 元の背景グラデーションを削除するか、変更することができます。 結果は同じです。 簡単にするために、変更します。

タイトルテキストを黒から白に変更してカスタマイズしました。

線形グラデーションタイプ

線形グラデーションは、ページ全体に広がっているかのようにグラデーションを表示します。

最初の線形グラデーションの例

これが最初の例です。 画面の左側に明るい色、右側に暗い色が表示され、それらの間がスムーズに移行します。

この例を作成するには、2つの色を追加します。 1つ目は、0％の位置にあるrgba（92,158,82,0.76）です。 2つ目は、97％の位置にあるrgba（0,10,4,0.76）です。

• 色1：rgba（92,158,82,0.76）（0％の位置）
• 色2：rgba（0,10,4,0.76）（97％の位置）

次に、グラデーションタイプを線形に変更し、方向を131度に設定します。 繰り返さないでください。 単位をパーセントに設定します。 背景画像の上にグラデーションを配置します。

• グラデーションタイプ：線形
• 方向：131度
• 繰り返し：いいえ
• 単位：パーセント
• 背景画像の上にグラデーションを配置：はい

2番目の線形グラデーションの例

2番目の線形グラデーションの例を見てみましょう。 最初のものと同じように機能しますが、左側に暗い色合いが引き継ぐハードストップがあります。

これを作成するには、3つのグラデーションストップを追加します。 1つ目は、13％の位置にあるrgba（18,76,41,0.76）です。 2つ目は、13％の位置にあるrgba（92,158,82,0.76）です。 カラー3は、34％の位置にあるrgba（18,76,41,0.76）です。

• 色1：rgba（18,76,41,0.76）（13％の位置）
• 色2：rgba（92,158,82,0.76）（13％の位置）
• 色3：rgba（18,76,41,0.76）（34％の位置）

次に、グラデーションタイプを線形に設定し、方向を90度に設定します。 繰り返さないでください。 単位をパーセントに変更します。 背景画像の上に配置します。

• グラデーションタイプ：線形
• 方向：90度
• 繰り返し：いいえ
• 単位：パーセント
• 背景画像の上にグラデーションを配置：はい

3番目の線形グラデーションの例

3番目の例では、明るい色の線を右上隅に斜めに配置し、暗い色の線に触れます。

こちらは3色あります。 色1は、13％の位置にあるrgba（92,158,82,0.76）です。 カラー2は、23％の位置にあるrgba（92,158,82,0.76）です。 3番目の色は32％の位置にあるrgba（18,76,41,0.76）です。

• 色1：rgba（92,158,82,0.76）（13％の位置）
• 色2：rgba（92,158,82,0.76）（23％の位置）
• 色3：rgba（18,76,41,0.76）（32％の位置）

グラデーションタイプを209度の方向で線形に設定します。 繰り返さないで、単位をパーセントに設定してください。 背景画像の上にグラデーションを配置します。

• グラデーションタイプ：線形
• 方向：209度
• 繰り返し：いいえ
• 単位：パーセント
• 背景画像の上にグラデーションを配置：はい

円形グラデーションタイプ

円形グラデーションタイプは、色で円を作成します。

最初の円形グラデーションの例

最初の円形グラデーションの例では、中央に明るい色を配置し、端に暗い色を配置します。

こちらは2色あります。 1つ目は、0％の位置にあるrgba（92,158,82,0.76）です。 2つ目は、62％の位置にあるrgba（0,10,4,0.76）です。

• 色1：rgba（92,158,82,0.76）（0％の位置）
• 色2：rgba（0,10,4,0.76）（62％の位置）

グラデーションタイプを円形に設定します。 方向を中央に配置します。 繰り返さないようにし、単位をパーセントに変更して、背景画像の上に配置します。

• グラデーションタイプ：円形
• 方向：中央
• 繰り返し：いいえ
• 単位：パーセント
• 背景画像の上にグラデーションを配置：はい

2番目の円形グラデーションの例

このグラデーションにより、画面の中央に明確な円形のエッジが配置されます。

4色あります。 2色重ねてあります。 1つ目は、13％の位置にあるrgba（18,76,41,0.76）です。 2つ目は、33％の位置にあるrgba（92,158,82,0.76）です。 色3は、51％の位置にあるrgba（92,158,82,0.76）です。 カラー4はrgba（18,76,41,0.76）です。 Color 3の上の51％の位置に配置されます。

• 色1：rgba（18,76,41,0.76）（13％の位置）
• 色2：rgba（92,158,82,0.76）（33％の位置）
• 色3：rgba（92,158,82,0.76）（51％の位置）
• 色4：rgba（18,76,41,0.76）（51％の位置）

グラデーションタイプを円形に設定し、方向を左上に配置します。 繰り返さないようにし、単位をパーセントに変更して、背景画像の上に配置します。

• グラデーションタイプ：円形
• 方向：左上
• 繰り返し：いいえ
• 単位：パーセント
• 背景画像の上にグラデーションを配置：はい

3番目の円形グラデーションの例

この例では、円の中央から始めて、暗い色の中にいくつかの明るい円を配置します。

こちらも2色を一定の順番で重ねてデザインしています。 最初の色は、13％の位置にあるrgba（18,76,41,0.76）です。 カラー2は、44％の位置にあるrgba（18,76,41,0.76）です。 3番目の色は2番目の色の上にスタックします。 44％の位置にあるrgba（92,158,82,0.76）です。 カラー4は、51％の位置にあるrgba（92,158,82,0.76）です。

• 色1：rgba（18,76,41,0.76）（13％の位置）
• 色2：rgba（18,76,41,0.76）（44％の位置）
• 色3：rgba（92,158,82,0.76）（44％の位置）
• 色4：rgba（92,158,82,0.76）（51％の位置）

グラデーションタイプを円形に変更します。 方向を下に配置します。 これを繰り返してください。 単位をパーセントに設定し、グラデーションを背景画像の上に配置します。

• グラデーションタイプ：円形
• 方向：下
• 繰り返し：はい
• 単位：パーセント
• 背景画像の上にグラデーションを配置：はい

楕円グラデーションタイプ

楕円形のグラデーションは、色を楕円形に配置します。

最初の楕円グラデーションの例

最初の楕円形の例では、画面の中央に明るい色の楕円を配置し、その周りに暗い色を配置します。

こちらは2色あります。 1つ目は、0％の位置にあるrgba（92,158,82,0.76）です。 2つ目は、50％の位置にあるrgba（0,10,4,0.76）です。

• 色1：rgba（92,158,82,0.76）（0％の位置）
• 色2：rgba（0,10,4,0.76）（50％の位置）

グラデーションタイプを楕円形に変更します。 方向を中央に設定します。 これを繰り返さないようにし、単位をパーセントに設定して、背景画像の上に配置します。

• グラデーションタイプ：楕円形
• 方向：中央
• 繰り返し：いいえ
• 単位：パーセント
• 背景画像の上にグラデーションを配置：はい

2番目の楕円のグラデーションの例

2番目の例では、グラデーション全体に多数の細い円形の線を配置します。

2色あります。 1つ目は、34ポイントの位置にあるrgba（92,158,82,0.76）です。 2番目は39ptの位置にあるrgba（0,10,4,0.76）です。

• カラー1：rgba（92,158,82,0.76）（34pt位置）
• 色2：rgba（0,10,4,0.76）（39pt位置）

グラデーションタイプを楕円形に変更し、方向を左に設定します。 これを繰り返してください。 単位をポイントに変更します。 背景画像の上に配置します。

• グラデーションタイプ：楕円形
• 方向：左
• 繰り返し：はい
• 単位：ポイント
• 背景画像の上にグラデーションを配置：はい

3番目の楕円のグラデーションの例

3番目の例では、グラデーション内に多くの半円を配置します。

こちらは2色あります。 1つ目は、34vminの位置にあるrgba（32,68,35,0.73）です。 2つ目は、39vminの位置にあるrgba（0,10,4,0.76）です。

• 色1：rgba（32,68,35,0.73）（34vminの位置）
• 色2：rgba（0,10,4,0.76）（39vminの位置）

グラデーションタイプを楕円形に変更し、方向を上に設定します。 これを繰り返してください。 ユニットをビューポート最小に変更します。 背景画像の上に配置します。

• グラデーションタイプ：楕円形
• 方向：上
• 繰り返し：はい
• 単位：ビューポート最小
• 背景画像の上にグラデーションを配置：はい

円錐グラデーションタイプ

円錐グラデーションタイプは、円錐が上から見たように、円錐の形でグラデーションを表示します。

最初の円錐グラデーションの例

この例では、グラデーションの中心から左側に対角線を配置し、片側を明るい色、反対側を暗い色にします。

2色あります。 1つ目は、0％の位置にあるrgba（92,158,82,0.76）です。 2つ目は、50％の位置にあるrgba（0,10,4,0.76）です。

• 色1：rgba（92,158,82,0.76）（0％の位置）
• 色2：rgba（0,10,4,0.76）（50％の位置）

グラデーションタイプを円錐形に変更します。 方向を221度に設定します。 位置を中央に配置し、繰り返さないようにします。 画像の上にグラデーションを配置します。

• グラデーションタイプ：円錐形
• 方向：221度
• 位置：中央
• 繰り返し：いいえ
• 背景画像の上にグラデーションを配置：はい

2番目の円錐グラデーションの例

この例は前の例と似ていますが、中心から上に線を配置します。

こちらは4色あります。 1つ目は、7％の位置にあるrgba（20,40,20,0.76）です。 カラー2は、24％の位置でrgba（30,73,25,0.68）です。 色3は、65％の位置にあるrgba（103,132,30,0.68）です。 4番目の色は85％の位置にあるrgba（38,86,26,0.68）です。

• 色1：rgba（20,40,20,0.76）（7％の位置）
• 色2：rgba（30,73,25,0.68）（24％の位置）
• 色3：rgba（103,132,30,0.68）（65％の位置）
• 色4：rgba（38,86,26,0.68）（85％の位置）

グラデーションタイプを円錐形に設定し、方向を0度に設定します。 位置を中央に配置します。 繰り返さないで、画像の上に配置してください。

• グラデーションタイプ：円錐形
• 方向：0度
• 位置：中央
• 繰り返し：いいえ
• 背景画像の上にグラデーションを配置：はい

3番目の円錐グラデーションの例

最後の例では、グラデーションの上部中央からすべての方向に外側に向かって一気に線を配置します。

こちらは2色あります。 1つ目は、5度の位置にあるrgba（30,73,25,0.68）です。 2つ目は、7度の位置にあるrgba（20,40,20,0.76）です。

• 色1：rgba（30,73,25,0.68）（5度の位置で）
• 色2：rgba（20,40,20,0.76）（7度の位置で）

ethグラデーションタイプを円錐形に設定し、方向を221度に設定します。 位置を一番上に配置します。 これを繰り返して、背景画像の上に配置します。

• グラデーションタイプ：円錐形
• 方向：221度
• 位置：上
• 繰り返し：はい
• 背景画像の上にグラデーションを配置：はい

終わりの考え

これが、Diviのグラデーションビルダーでグラデーションタイプを比較する方法です。 これらの例でわかるように、設定は単純ですが、いずれもグラデーションのデザインに大きな違いをもたらす可能性があります。 最良の結果を得るには、方向と位置が異なるグラデーションタイプを試して、繰り返しオプションを有効または無効にして、作成できるものを確認してください。

私たちはあなたから聞きたい。 Divi Gradient Builderでさまざまなグラデーションタイプを使用しましたか？ コメントであなたの経験を教えてください。