Diviの組み込みオプションのみを使用してコピーにグラデーションテキストカラーを適用する方法

作成しているWebサイトの種類に関係なく、コピーとコンテンツを強調することは依然として最優先事項の1つです。 Diviの組み込みオプションを使用すると、そこに到達する方法はたくさんあります。 可能性の1つは、コピーにグラデーションテキストカラーを適用することです。 これは、特にWebサイトの残りの部分をクリーンでミニマルに保つ場合に、Webサイトに色を追加するための優れたアプローチです。 それは空白のバランスをとるのを助け、あなたのウェブサイトに新鮮な空気を吹き込みます。

このチュートリアルでは、Diviの組み込みオプションのみを使用してテキストにグラデーションカラーを付ける方法を示します。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を見てみましょう。 明るいカラーパレットと暗いカラーパレットの両方を使用して、これを機能させる方法を示します。 アプローチができたら、グラデーションテキストを使用してあらゆる種類のデザインを作成できます。

アプローチ

1.Diviブレンドモードを理解する

ブレンドモードは、画像編集ソフトウェアで慣れている方法とまったく同じように機能します。 それらは層構造に基づいています。 具体的には、Diviのブレンドモードが特定の階層に従うことを意味します。

• モジュールに適用されたブレンドモードは、モジュールとその下の列をブレンドします
• 列に適用されたブレンドモードは、列とその下の行をブレンドします
• 行に適用されたブレンドモードは、行とその下のセクションをブレンドします

このチュートリアルでは、モジュールに適用されたブレンドモードがその下の列とブレンドされることを理解する必要があります。 列にグラデーションの背景を与え、問題のモジュールにブレンドモードを与えることで、グラデーション色のテキストを実現できます。

2.完全に暗いカラーパレットと明るいカラーパレットのどちらかを選択する

これを機能させるには、完全に暗いまたは明るいカラーパレットを使用する必要があります。 私たちが使用しているブレンドモードである明るくしたり暗くしたりすると、完全に黒または白の色を使用している場合にのみ、望ましい結果が得られます。 他の色を使用する場合、適用した効果は一種の透けて見えます。

3.列とモジュール間のすべてのガター幅を削除する

アプローチの最初の部分で述べたように、列のグラデーションの背景を使用します。 このグラデーションの背景が不要な場所に表示されないようにするために、ガター幅をすべて削除します。 そうすることで、モジュール間にデフォルトのカスタムマージンが適用されないようにします。 失われたスペースを補うために、代わりにカスタムパディングを手動で追加します。

4.要素の幅を変更する代わりにパディングを使用する

また、デザイン要素の幅を調整するために、カスタムの左右のパディングを使用します。 サイズ設定で幅を変更すると、モジュール全体の幅が変更され、列のグラデーションの背景が左側と右側に表示されるようになります。これは望ましくありません。

作り始めましょう！

私たちのYoutubeチャンネルを購読する

新しいセクションを追加

背景色

始めましょう！ 新しいページまたは既存のページに通常のセクションを追加し、適切な背景色を付けます（明るいレイアウトと暗いレイアウトのどちらを再現するかによって異なります）。

• 背景色：#ffffff（明るいレイアウト）、＃000000（暗いレイアウト）

間隔

セクションにカスタムパディングを追加して続行します。

• トップパディング：215px
• ボトムパディング：215px

行＃1を追加

カラム構造

次に、次の列構造を使用して新しい行を追加します。

列2グラジエントバックグラウンド

行の2番目の列にグラデーションの背景を追加します。 これは、チュートリアルの次の部分でタイトルのテキストモジュールを配置する場所です。

• 色1：＃c700ff
• 色2：＃32f1ff
• 列2の勾配方向：150度
• 列2の開始位置：20％
• 列2の終了位置：60％

サイジング

サイズ設定も変更してください。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1

間隔

そして、間隔の設定を変更します。

• トップマージン：50px
• 下マージン：50px
• 左パディング：50px
• 右パディング：50px

列2にテキストモジュールを追加します

コンテンツを追加する

次に、追加した行の2番目の列にテキストモジュールを追加します。

背景色

再作成するレイアウトのタイプに応じて、モジュールに正しい背景を与えます。

• 背景色：#ffffff（明るいレイアウト）、＃000000（暗いレイアウト）

見出しテキストの設定

次に、見出しのテキスト設定を変更します。

• 見出し2テキストの配置：中央
• 見出し2のテキストの色：＃000000（明るいレイアウト）、＃ffffff（暗いレイアウト）
• 見出し2テキストサイズ：67px（デスクトップ）、50px（タブレット）、40px（電話）
• 見出し2文字の間隔：-2px

間隔

そして、いくつかの下部のパディングを追加します。 列のグラデーションの背景が表示されないようにするために、マージンの代わりに下のパディングを使用していることを忘れないでください。

• ボトムパディング：50px

ブレンドモード

追加したモジュールに列のグラデーションの背景を適用するには、フィルター設定でブレンドモードを適用します。

• ブレンドモード：明るく（明るいレイアウト）、暗く（暗いレイアウト）

行に分周器モジュールを追加

可視性

この行で必要な2番目で最後のモジュールはDividerモジュールです。

• 仕切りを表示：はい

背景色

再作成するレイアウトのタイプに応じて、背景色を変更します。

• 背景色：#ffffff（明るいレイアウト）、＃000000（暗いレイアウト）

間隔

仕切りの幅を狭くするために、左側と右側にカスタムパディングを追加します。

• 左パディング：250px
• 右パディング：250px

ブレンドモード

ここでも、ブレンドモードを追加して、列のグラデーションの背景を表示します。

• ブレンドモード：明るく（明るいレイアウト）、暗く（暗いレイアウト）

行＃2を追加

カラム構造

次の行へ！ 次の列構造を使用します。

列1のグラジエントバックグラウンド

最初の列にグラデーションの背景を追加して続行します。

• 色1：＃c700ff
• 色2：＃32f1ff
• 列1の勾配タイプ：線形
• 列1の勾配方向：105度
• 列1の開始位置：20％
• 列1の終了位置：50％

列2グラジエントバックグラウンド

2番目の列にもグラデーションの背景を使用しています。

• 色1：＃32f1ff
• 色2：＃c700ff
• 列2の勾配タイプ：線形
• 列2の勾配方向：90度
• 列2の開始位置：40％
• 列2の終了位置：60％

列3グラジエントバックグラウンド

3列目も同様です。

• 色1：＃c700ff
• 色2：＃32f1ff
• 列3の勾配タイプ：線形
• 列3の勾配方向：85度
• 列3の開始位置：20％
• 列3の終了位置：50％

サイジング

次に、サイズ設定を変更します。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1

間隔

そして、いくつかのカスタムの左右のパディングを追加します。

• 左パディング：100px（デスクトップとタブレット）、50px（電話）
• 右パディング：100px（デスクトップとタブレット）、50px（電話）

列1に宣伝文モジュールを追加する

コンテンツを追加する

モジュールの追加を開始する時が来ました！ 選択したタイトルで宣伝文モジュールを列1に追加します。 投稿の後半で、別のモジュールを使用して本文のコンテンツを追加します。

アイコンを選択

選択したアイコンを選択します。

背景色

そして、宣伝文句モジュールの背景色を変更します。

• 背景色：#ffffff（明るいレイアウト）、＃000000（暗いレイアウト）

アイコン設定

アイコン設定に移動し、そこでいくつかの変更を加えて続行します。

• アイコンの色：＃000000（明るいレイアウト）、＃ffffff（暗いレイアウト）
• 画像/アイコンの配置：上
• アイコンのフォントサイズを使用：はい
• アイコンフォントサイズ：51px

タイトルテキスト設定

タイトルテキストの設定も変更します。

• タイトルフォントの太さ：太字
• タイトルテキストの配置：中央
• タイトルテキストの色：＃000000（明るいレイアウト）、＃ffffff（暗いレイアウト）
• タイトル文字の間隔：-1px
• タイトルラインの高さ：1.2em

間隔

次に、間隔設定に移動し、カスタムマージンとパディング値を追加します。

• 下マージン：5px
• トップパディング：50px
• ボトムパディング：50px
• 左パディング：50px
• 右パディング：50px

ブレンドモード

最後になりましたが、正しいブレンドモードを適用してください。

• ブレンドモード：明るく（明るいレイアウト）、暗く（暗いレイアウト）

列1にテキストモジュールを追加

コンテンツを追加する

ブレンドモードがアイコンとタイトルにのみ適用されるように、宣伝文モジュールのタイトルと本文を2つのモジュールに分割しています。 先に進み、本文のコンテンツを含む宣伝文モジュールのすぐ下にテキストモジュールを追加します。

背景色

次に、背景色を追加します。

• 背景色：#ffffff（明るいレイアウト）、＃0c0c0c（暗いレイアウト）

テキスト設定

そして、テキスト設定を変更します。

• テキスト文字の間隔：0.5px
• テキスト行の高さ：2.3em
• テキストの向き：正当化
• テキストの色：暗い（明るいレイアウト）、明るい（暗いレイアウト）

間隔

モジュールに呼吸するためのスペースを与えるために、間隔設定にいくつかのカスタムパディング値を追加します。

• トップパディング：100px
• ボトムパディング：100px
• 左パディング：70px
• 右パディング：70px

ボックスシャドウ

そして、それを締めくくり、微妙なボックスシャドウも追加します。

• ボックスシャドウブラー強度：56px
• ボックスシャドウスプレッド強度：-12px
• 影の色：rgba（0,0,0,0.3）

宣伝文モジュールとテキストモジュールのクローンを2回+残りの列に配置

最後になりましたが、列1にある両方のモジュールのクローンを作成し、残りの2つの列に複製を配置します。 それに応じてコンテンツも変更してください。

プレビュー

すべての手順を完了したので、最終結果を見てみましょう。

最終的な考え

この投稿では、Diviの組み込みオプションのみを使用してWebサイトにグラデーションテキストを作成する方法を示しました。 このチュートリアルを機能させ、他のデザインでもアプローチを実践できるようにするには、この投稿のアプローチセクションに目を通し、デザインを再作成しながら理解する必要があります。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！