Diviの新しいオプションを使用して美しい画像の境界線を作成する方法

今日のDiviチュートリアルでは、次に作成するWebサイトで美しい画像の境界線を作成する方法を紹介します。 この投稿の目的は、使用している画像（およびWebサイトの他の部分）と一致する美しい結果を作成する方法を示すことです。

新しいDiviオプションを使用すると、驚くべき結果をこれまでになく簡単に実現できます。 いくつかの変更を加えるだけで、その方法を説明し、Webデザインを次のレベルに引き上げる準備が整います。 共有する8つの例はすべて、DiviBuilderとImageModuleが提供する組み込みオプション以外は何も使用しません。

スニークピーク

この投稿から期待できる結果を見てみましょう。

Diviの新しいオプションを使用して美しい画像の境界線を作成する方法

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

グラデーションの背景

美しい画像の境界線を実現するために必要な最初の可能性は、グラデーションの背景のみを使用することです。 さまざまなグラデーションの背景設定を試すことで、シンプルでありながらエレガントな結果を得ることができます。 グラデーションの背景のみで構成される画像の境界線の3つの例を示します。

標準

私たちが扱う最初の例は、それらすべての中で最も単純で最も控えめなものです。 標準のグラデーション画像の境界線。 結果は、createがどのように見えるかを示します。

[コンテンツ]タブ

[コンテンツ]タブでグラデーションの背景を選択することから始めます。 この例では、次の設定を使用しました。

• ファーストカラー：＃081e8c
• 2番目の色：＃764f9b
• グラデーションタイプ：線形
• 勾配方向：269度
• 開始位置：40％
• 終了位置：60％

[デザイン]タブ

次に行う必要がある最後のことは、画像にパディングを追加することです。 それは簡単です。 [デザイン]タブに移動し、上下左右のパディングに「10px」を追加します。

側面

次に、画像の左側と右側にのみ表示される画像の境界線があります。 この種の画像の境界線を使用すると、境界線自体にあまり焦点を当てることなく、画像に素晴らしいタッチを加えることができます。

[コンテンツ]タブ

このタイプの画像の境界線を実現するには、まず次のグラデーションの背景を画像に追加します。

• 最初の色：rgba（255,255,255,0）
• 2番目の色：＃0a8da8
• グラデーションタイプ：線形
• 勾配方向：166度
• 開始位置：29％
• 終了位置：52％

[デザイン]タブ

[デザイン]タブで必要なのは、右側と左側の「10px」のパディングだけです。

ワンコーナー

次に、Webサイトの画像のコーナー背景を作成することもできます。 このタイプの境界線は、画像内で使用されている色を強調したい場合に最適です。

[コンテンツ]タブ

3番目の画像の例では、次のグラデーションの背景を使用します。

• 最初の色：rgba（58,8,1,0.58）
• 2番目の色：rgba（41,196,169,0）
• 勾配方向：152度
• 開始位置：34％
• 終了位置：28％

[デザイン]タブ

次に、各パディングにも「20px」を追加します。

画像の境界線とグラデーションの背景

もう1つの可能性は、グラデーションの背景と画像の境界線を組み合わせることです。 これも、次の4つの例で確認できるように、驚くべき結果をもたらす可能性があります。

微妙なグラデーション

グラデーションの背景と画像の境界線の最初の組み合わせは、シンプルでありながら美しいものです。 グラデーションの背景と境界線に同じ色を使用することで、画像の境界線はどういうわけか色でいっぱいになっているように感じます。

[コンテンツ]タブ

次のグラデーションの背景設定を画像に追加することから始めます。

• 最初の色：rgba（255,255,255,0）
• セカンドカラー：＃777777
• グラデーションタイプ：線形
• グラデーション方向：180度
• 開始位置：65％
• 終了位置：78％

[デザイン]タブ

[デザイン]タブに移動し、[境界線]サブカテゴリで次の設定を使用します。

• 境界線を使用：はい
• ボーダーカラー：＃777777
• ボーダー幅：3px
• ボーダースタイル：ソリッド

最後に、すべてのパディングオプションに「7px」のパディングを追加します。

形

次に、来場者の注目を集めるのに最適な例を示します。 この場合、画像自体にはほとんど明るい色が含まれているため、暗い境界線とのバランスがうまく取れています。

[コンテンツ]タブ

この画像の境界線に必要なグラデーションの背景設定は次のとおりです。

• 最初の色：rgba（53,0,188,0.1）
• セカンドカラー：＃680061
• グラデーションタイプ：ラジアル
• 半径方向：中心
• 開始位置：80％
• 終了位置：80％

[デザイン]タブ

[デザイン]タブに進み、次の境界線を使用します。

• 境界線を使用：はい
• ボーダーカラー：＃9a00bc
• ボーダー幅：1px
• ボーダースタイル：ソリッド

下にスクロールして、画像に次のパディングを追加します。

• 上：7px
• 右：5px
• 下：7px
• 左：5px

ダブルボーダー

グラデーションの背景と組み合わせて二重の境界線を使用すると、いくつかの驚くべき結果も得られます。 見てください：

[コンテンツ]タブ

この例で使用したグラデーションの背景色は次のとおりです。

• 最初の色：rgba（224,43,32,0.61）
• 2番目の色：rgba（12,113,195,0.87）
• グラデーションタイプ：ラジアル
• 半径方向：中心
• 開始位置：71％
• 終了位置：93％

[デザイン]タブ

次に、境界サブカテゴリに次の設定を使用します。

• 境界線を使用：はい
• 境界線の色：＃f4f4f4（セクションの背景色と一致）
• ボーダー幅：8px
• ボーダースタイル：ダブル

そして、画像の上下左右のパディングに「10px」を追加します。

三角形のコーナー

次に、グラデーションの背景オプションを破線の境界線と組み合わせて使用​​することで、境界線にいくつかの小さなコーナーを作成することもできます。

[コンテンツ]タブ

上に示した画像の境界線を実現するには、次のグラデーションの背景設定を使用します。

• 最初の色：rgba（163,103,6,0）
• セカンドカラー：＃e09900
• グラデーションタイプ：ラジアル
• 半径方向：中心
• 開始位置：97％
• 終了位置：97％

[デザイン]タブ

[デザイン]タブでは、次の境界線設定も必要です。

• 境界線を使用：はい
• ボーダーカラー：＃e09900
• ボーダー幅：2px
• ボーダースタイル：破線

最後に、上、下、左、右のパディングに「8px」のパディングが必要です。

パターンとグラデーションの背景

スポットライトを当てたい最後の可能性は、パターンとグラデーションの背景を同時に使用することです。 これにより、画像のルックアンドフィールを試すことができます。

遊び心

この境界線には、画像自体でも使用される2色のグラデーション背景が含まれています。 背景パターンも追加することで、画像はWebサイトにもう少し雰囲気を与えます。

[コンテンツ]タブ

最後の例では、次のグラデーションの背景設定を使用します。

• 最初の色：rgba（4,49,96,0.51）
• 2番目の色：rgba（119,74,15,0.51）
• グラデーションタイプ：線形
• グラデーション方向：180度
• 開始位置：0％
• 終了位置：100％

[デザイン]タブ

次に、パターンの背景も追加します。 この例で使用したパターンは、Toptalからのものです。 それらのパターンはあらゆる種類の目的に使用できます。FAQに記載されているように、コード内でそれらをクレジットするようにしてください。 パターンの背景を追加したら、次の設定も使用します。

• 背景画像サイズ：カバー
• 背景画像の位置：中央
• 背景画像の繰り返し：繰り返しなし
• 背景画像のブレンド：乗算

最後に行う必要があるのは、画像の上下左右のパディングに「12px」のパディングを追加することです。

最終的な考え

この投稿では、美しい画像の境界線を作成するいくつかの異なる方法を紹介しました。 これらのオプションは、追加のCSSを使用せずに新しいDiviオプションで実行できることの見通しを提供します。 質問や提案がある場合; 下のコメントセクションにコメントを残してください！

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。

Mr Aesthetics /shutterstock.comによる注目の画像