Diviでグラデーション背景を背景画像マスクとして使用する方法

Photoshopなどの画像編集ソフトウェアに精通している場合は、おそらくマスクにも精通しているでしょう。 マスクは、2つのレイヤーをまとめて、独自の結果を作成するのに役立ちます。 Diviを使用すると、グラデーションの背景と背景画像を組み合わせて、クリエイティブになり、ページ内に独自の種類のマスクを作成できます。 このチュートリアルでは、作業中のあらゆる種類のデザインに対して8つの異なる背景マスクを作成する方法を段階的に説明します。 このチュートリアルは、画像編集ソフトウェアにまったく触れることなく、ページのデザインをすばやく調整するのに役立ちます。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

作り始めましょう！

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

新しいセクションを追加

間隔

ページに新しいセクションを追加し、セクション設定を開いて、カスタムの上部と下部のパディングを追加します。

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

新しい行を追加

カラム構造

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

宣伝文モジュールを＃1に追加

コンテンツを追加する

モジュールの追加を開始する時が来ました！ 合計8つの宣伝文モジュールが必要です。 最初のものから始めて、一般的な変更を加え、その後7回クローンを作成してから、各宣伝文モジュールに固有の変更を加えます。 新しい宣伝文モジュールを最初の列に追加し、選択したコンテンツをいくつか追加します。

テキスト設定

[デザイン]タブに移動し、次にテキスト設定を変更します。

• テキストの向き：中央
• テキストの色：暗い

タイトルテキスト設定

タイトルテキストの設定も開き、状況を変更します。

• タイトルフォント：Antic Didone
• タイトルテキストサイズ：23px
• タイトルラインの高さ：1.5em

ボックスシャドウ

最後に、宣伝文句モジュールにも微妙なボックスシャドウを追加します。

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

宣伝文句モジュールを7回クローンし、2番目の列に4つの複製を配置します

全体的な変更をすべて行ったら、先に進んで宣伝文モジュールのクローンを7回作成できます。 行の2番目の列に4つの重複を配置し、最初の列に3つ残します。

宣伝文モジュール＃1を変更する

グラデーションの背景

これで、各宣伝文モジュールに固有の設定を追加し始めることができます。 列1の最初の宣伝文句モジュールを開き、グラデーションの背景を追加します。

• 色1：rgba（255,255,255,0）
• 色2：#ffffff
• グラデーションタイプ：ラジアル
• 半径方向：下
• 開始位置：45％
• 終了位置：45％
• 背景画像の上にグラデーションを配置：はい

背景画像

グラデーションの背景を追加したら、背景画像も追加して、次の背景設定と組み合わせることができます。

• 背景画像の位置：上部中央
• 背景画像の繰り返し：繰り返しなし

間隔

大事なことを言い忘れましたが、すべてが所定の位置に収まるようにカスタムパディングを追加します。

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

宣伝文モジュール＃2を変更する

グラデーションの背景

次の宣伝文モジュール（2列目の最初のモジュール）に移動して、グラデーションの背景を追加しましょう。

• 色1：rgba（255,255,255,0）
• 色2：#ffffff
• グラデーションタイプ：ラジアル
• 半径方向：右上
• 開始位置：45％
• 終了位置：45％
• 背景画像の上にグラデーションを配置：はい

背景画像

以下の背景設定と組み合わせた背景画像を追加して続行します。

• 背景画像の位置：右上
• 背景画像の繰り返し：繰り返しなし

間隔

そして、間隔設定にカスタムのパディング値を追加して、デザインを完成させます。

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

宣伝文モジュール＃3を変更する

グラデーションの背景

3番目の宣伝文モジュール（最初の列の2番目の宣伝文モジュール）に進みます。 設定を開き、グラデーションの背景を追加します。

• 色1：rgba（255,255,255,0）
• 色2：#ffffff
• グラデーションタイプ：ラジアル
• 半径方向：左上
• 開始位置：45％
• 終了位置：45％
• 背景画像の上にグラデーションを配置：はい

背景画像

次に背景画像を追加して続行します。

• 背景画像の位置：左上
• 背景画像の繰り返し：繰り返しなし

間隔

そして、モジュールを形にするために、モジュールにカスタムパディングを追加します。

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

宣伝文モジュール＃4を変更する

グラデーションの背景

2列目の2番目のモジュールに移りましょう！ 宣伝文モジュールの設定を開き、グラデーションの背景を追加します。

• 色1：rgba（255,255,255,0）
• 色2：#ffffff
• グラデーションタイプ：ラジアル
• 半径方向：上
• 開始位置：45％
• 終了位置：45％
• 背景画像の上にグラデーションを配置：はい

背景画像

次に背景画像を追加して続行します。

• 背景画像の位置：上部中央
• 背景画像の繰り返し：繰り返しなし

間隔

そして、間隔設定にカスタムのパディング値を追加して、デザインを完成させます。

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

宣伝文モジュール＃5を変更する

グラデーションの背景

次のモジュールに進みます。これは、最初の列の3番目のモジュールです。 モジュールを開き、グラデーションの背景を追加します。

• 色1：rgba（255,255,255,0）
• 色2：#ffffff
• グラデーションタイプ：ラジアル
• 半径方向：左
• 開始位置：35％
• 終了位置：35％
• 背景画像の上にグラデーションを配置：はい

背景画像

次の背景設定と組み合わせて背景画像を追加して続行します。

• 背景画像の位置：左上
• 背景画像の繰り返し：繰り返しなし

間隔

また、間隔設定にもいくつかのカスタムパディング値を追加します。

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

宣伝文モジュール＃6を変更する

グラデーションの背景

2列目の3番目のモジュールに移りましょう！ 設定を開き、グラデーションの背景を追加します。

• 色1：rgba（255,255,255,0）
• 色2：#ffffff
• グラデーションタイプ：線形
• グラデーション方向：140度
• 開始位置：60％
• 終了位置：60％
• 背景画像の上にグラデーションを配置：はい

背景画像

次に、背景設定が一致する背景画像を追加します。

• 背景画像の位置：上部中央
• 背景画像の繰り返し：繰り返しなし

間隔

そして、間隔設定でいくつかのカスタムパディング値を使用してデザインを完成させます。

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

宣伝文モジュール＃7を変更する

グラデーションの背景

列1の次の宣伝文句は次のグラデーションの背景を使用します。

• 色1：rgba（255,255,255,0）
• 色2：#ffffff
• グラデーションタイプ：線形
• グラデーション方向：220度
• 開始位置：60％
• 終了位置：60％
• 背景画像の上にグラデーションを配置：はい

背景画像

背景画像も追加します。

• 背景画像の位置：上部中央
• 背景画像の繰り返し：繰り返しなし

間隔

そして、間隔設定に必要なカスタムパディング値を追加します。

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

宣伝文モジュール＃8を変更する

グラデーションの背景

最後の宣伝文句へ！ 設定を開き、グラデーションの背景を追加します。

• 色1：rgba（255,255,255,0）
• 色2：#ffffff
• グラデーションタイプ：ラジアル
• 半径方向：右
• 開始位置：35％
• 終了位置：35％
• 背景画像の上にグラデーションを配置：はい

背景画像

次に背景画像をアップロードします。

• 背景画像の位置：左上
• 背景画像の繰り返し：繰り返しなし

間隔

そして、モジュールの間隔設定にカスタムパディングを追加して、デザインとチュートリアルを終了します。

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

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最後に見てみましょう。

最終的な考え

このチュートリアルでは、Diviの組み込みオプションを使用してクリエイティブにする方法を示しました。 具体的には、放射状の背景と背景画像を使用して背景マスクを作成しました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！