ホバーで背景をスワイプするときにボックスシャドウを使用する方法

公開: 2019-01-30

毎週、次のプロジェクトに使用できる新しい無料のDiviレイアウトパックを提供します。レイアウトパックの1つとして、Webサイトを次のレベルに引き上げるのに役立つユースケースも共有しています。

今週は、進行中のDiviデザインイニシアチブの一環として、ホバーの背景をスワイプするときにボックスシャドウを使用する方法を紹介します。パーソナルスタイリストレイアウトパックのホームページで見事に見える3つの異なる例を扱いますが、あなたが持っている可能性は本当に無限大です。 Diviの組み込みオプションのみを使用して、スワイプの背景を1つずつ再作成します。

それを手に入れよう！

プレビュー

チュートリアルとそのさまざまな例に飛び込む前に、結果を見てみましょう。

例1

背景をスワイプ

例2

背景をスワイプ

例3

背景をスワイプ

パーソナルスタイリストレイアウトパックのホームページを新しいページにアップロードする

Webサイトに新しいページを追加して、パーソナルスタイリストのホームページレイアウトをアップロードすることから始めます。このレイアウトを使用して上記の3つの例をすべて実行しますが、このアプローチは、作業中のあらゆる種類のレイアウトまたはWebサイトに使用できます。

背景をスワイプ

例1を再作成する

背景をスワイプ

ボタンボックスの影の色

最初の例の再現を始めましょう！この例は、ヒーローセクションを強調するのに役立ちます。最初に行う必要があるのは、最初の列にあるボタンモジュールを開き、ボックスの影の色を変更することです。これは、ホバーで追加するピンクのボックスの影と色がうまく合うようにするためです。

背景をスワイプ

セクション設定

デフォルトの背景色

セクション設定を開いて続行します。デフォルトの背景色が同じままであることを確認してください。

背景色：＃2a2a2a

背景をスワイプ

背景色にカーソルを合わせる

背景のホバーを変更します。

背景色：#ffffff

背景をスワイプ

デフォルトのボックスシャドウ

セクションにデフォルトのボックスシャドウを追加して続行します。

ボックスシャドウの水平位置：0px
ボックスシャドウの垂直位置：0px
影の色：rgba（255,137,159,0.82）
ボックスシャドウの位置：内側のシャドウ

背景をスワイプ

ホバーボックスシャドウ

ボックスシャドウの水平位置を変更します。任意の値を追加します。

ボックスシャドウの水平位置：800px

背景をスワイプ

スワイプ効果を上から下に表示する場合は、代わりにボックスシャドウの垂直位置を変更できます。

ボックスシャドウの垂直位置：650px

背景をスワイプ

トランジション

大事なことを言い忘れましたが、[詳細設定]タブの遷移時間を短くして、背景色とボックスシャドウスワイプ背景の間の遷移をすばやく作成します。

移行時間：200ms
遷移速度曲線：使いやすさ

背景をスワイプ

例2を再作成する

背景をスワイプ

最初のテキストモジュールを変更する

テキスト設定にカーソルを合わせる

次の例に移りましょう！最初の列にあるテキストモジュールを開き、ホバー時にテキストの色を変更します。

テキストの色：明るい

背景をスワイプ

ホバーボーダー

デザインタブでホバー時に境界線の色を変更して続行します。

ボーダーカラー：rgba（255,137,159,0.82）

背景をスワイプ