影響

この指導セッションでは、以下の知識が得られます。

1. 混合
2. 半透明
3. 国境
4. 影付きのボックス
5. 2D および 3D 変換
6. 変更点
7. 吸収体
8. 背景ふるい
9. ポインタ
10. 発生事例

インサイダーヒント: これらの影響のほとんどは、設定メニューでホバリング フェーズまたはその他のフェーズ中に実装できます。さまざまなフェーズへの影響の構成について詳しく説明します。

混合

Webflow のミキシング メソッドは、エンティティを他の基礎要素とブレンド (または重ね合わせ) するためのさまざまなアプローチを提供します。これらはすべて、カスタム コードなしで実行できます。Webflow は、ミックス ブレンド モードの CSS 機能をユーザーに代わって管理し、エンティティのコンテンツがその親のコンテンツやエンティティの背景とどのようにミックスされるかを定義する機能を提供します。ミキシング モードは、要素の単なる透明度の調整を超える、独創的な可能性を数多く提供します。

ミキシング モードは 16 種類あります。同様に機能するモードは、ミキサー ドロップダウン内で近くにグループ化されています。これらのモード グループは次のもので構成されます。

• 標準モード（通常）
• 調光モード（暗くする、乗算する、色を薄くする）
• 明るくするモード（明るくする、スクリーン、カラー覆い焼き）
• スタークモード（オーバーレイ、ソフトライト、ハードライト）
• 相対モード（差異と排除）
• 統合モード（色相、彩度、カラー、明度）

各ミキシング モードのサンプルを表示し、その適用方法をさらに詳しく調べるには、ミキシング モード チュートリアルをご覧ください。

半透明

エンティティとその子孫のシースルー レベルを変更するには、インパクト設定内の半透明度を変更します。入力領域に値を入力するか、半透明スライダーを希望の設定に移動して、半透明度を調整できます。

半透明の値はパーセンテージで定義されます。100% は不透明を示し、0 は完全な透明を示します。

国境

境界線は、Web サイトの訪問者がキーボードでインタラクティブ コンポーネント間を移動する際に、デザイン内を移動しやすくするためのものです。エンティティを囲む境界線により、訪問者はどの要素と対話しているか (つまり、注意が特定の要素に集中しているか) が明確になります。キーボードでもう一度 Tab キーを押すと、次に新たにフォーカスされた要素の周囲に境界線が表示されます。

このため、境界線を追加することが重要になります 中央揃え（キーボード） 州または 中央揃え コンポーネントの状態。

境界設定では、次の属性を制御できます。

• デザイン —要素を囲む境界線の種類（実線、破線、点線など）を指定します。
• 幅 — 境界線の太さを指定します。この数値は、単位ドロップダウンで利用可能なセットから任意のCSS単位を採用できます。
• マージン — 要素の境界と端または境界の間のスペースを指定します。この図は、単位ドロップダウンで利用可能なセットから任意のCSS単位を採用できます。
• 色 — 境界線の色を指定します

入力値と単位に関するさらなる洞察を調べることができます。

重要な： 境界線スタイルを「なし」に選択すると、境界線を削除してデフォルトのブラウザ設定に戻すのが魅力的に思えるかもしれませんが、この操作では他の設定されたプロパティ (幅、余白、色など) はクリアされず、境界線が完全に消えてアクセシビリティが損なわれ、ユーザー エクスペリエンスが低下することに注意してください。

国境に関するガイドをご覧ください。

影付きのボックス

シャドウ ボックスには、要素の長方形の境界の外側または内側の装飾が含まれます。ボタン、セグメント、div ブロック、またはサイト上のその他の要素に注目や深みを向けるために使用できます。

要素の外側に影付きのボックスや複数の影を重ねて適用するには、 デザインパネル > 効果 > 影付きのボックス.

影の種類、水平距離、垂直距離、ぼかし、広がり、色をカスタマイズできます。

スタッキング

デザイン パネルでは、ほとんどの効果に複数のレイヤーを含めることができます。たとえば、要素に複数の影を追加してレイヤー化できます。

インパクト設定では、「目”アイコンをクリックし、”を選択して各レイヤーを削除します。ごみ” アイコンをクリックします。各インパクトの順序を変更する場合は、並べ替えるレイヤーを選択し、希望の番号までドラッグするだけです。

シャドウ ボックス設定では、次の属性に対する権限があります。

• 親切 — 要素の境界の内側または外側に影を適用します
• 水平 —影の水平距離
• 垂直 —影の垂直距離
• ぼかし — 影のぼかしの鮮明さに影響します
• 広める —影の延長範囲を要素の境界に対して指定します
• 色 —影の色と不透明度を変更します

入力値と単位についてより深く理解できます。

重要な： アニメーション化されたぼかしは速度低下を引き起こすため、推奨されません。

2D および 3D の変更

からの変更を組み込むことができます デザインパネル > 影響 > 2D および 3D の変更 ホバーなどの異なる段階にわたって要素の外観と位置を操作します。

変更には 4 つのカテゴリがあります。

1. シフト
2. サイズ変更
3. 回転する
4. 傾く

隣の省略記号をタップします 2D および 3D の変更 到達する 変更設定 変換の原点、背面の可視性、自己の視点、および子孫の視点を微調整します。

効果の積み重ねと同様に、以前の設定を失うことなく複数の種類の変更を導入できます。「プラス追加の変換を追加するには、「 」アイコンをクリックします。  

変更に関するさらなる洞察を探求することができます。

変更点

変更により、要素のさまざまな状態間でスムーズなアニメーションが生成されます。持続時間とイージング タイプをカスタマイズして、明確な変更を生成できます。変更の一般的な用途の 1 つは、要素のホバー状態を変更して、ホバー時に突然の変化が発生しないようにすることです。

デフォルトでは、変更は「なし」に設定されており、すべての状態に自動的に適用されることを示しています。すべての状態にわたって確立されたすべてのプロパティ/スタイルに変更を含める必要があります。

変更を加えるには、 デザインパネル > 影響 > 変更点をタップし、「プラス” アイコンをクリックし、次の属性を指定します。

• タイプ — 変更によって影響を受けるプロパティの種類
• 間隔 — 変更の継続時間をミリ秒（ms）で指定します。スライダーを使用するか、入力ゾーンに継続時間の値を入力して、プリセットの継続時間（200ms）を微調整できます。
• 緩和 —変更のペースまたは速度を決定します。値を挿入するか、イージングエディタをアクティブにしてプリセットをプレビューしたり、独自のイージング効果を考案したりできます。

ふるい

ふるいは、要素に独特の視覚効果を適用します。また、ホバー状態の変化をトリガーすることもできます。画像、背景ビデオ、またはその他の要素にふるいを組み込むことができます。ふるいは、その子孫を含む要素全体の外観を変更します。

ふるいを統合するには、 デザインパネル > 影響 > ふるいをタップし、「プラス” アイコンをクリックし、ドロップダウン メニューからふるい効果を選択します。 

• ぼやける —要素のコンテンツをぼかします。ぼかし半径の値を大きくすると、ぼかしレベルが増幅されます。0 では効果はありません。
• 稲妻—0 から 200% までの明るさレベルを示します。100% の値は要素を初期の明るさに戻します。
• 対比 —0 ～ 200% のコントラスト レベルを示します。100% の値はコントラストを元の状態にリセットします。
• 色相シフト —画像または要素の色/色相を調整します。値は度数で測定されます。値が 0 または 360 の場合、元の色相が復元されます。方向ダイヤルのドットを操作したり、ダイヤルの任意の場所をクリックして角度を設定したり、矢印を使用して時計回りまたは反時計回りに 45 度ずつ回転したり、入力フィールドに希望の角度を入力したりすることで、色相を変更できます。
• 色の彩度 —色の強度を 0% から 200% の間で決定します。値を 100% にすると、元の彩度に戻ります。
• グレースケール —すべての色をグレースケールに変換します。0% は元の画像を表示し、100% は完全にグレースケールにします。
• 反転 —要素内のすべての色を反転します。値 0% は元の画像を表示し、値 100% は色を完全に反転します。
• セピア —画像または要素に黄色がかったビンテージの外観を適用します。0% は元の画像を表し、100% は完全にセピア色になっています。