AIで検索
キーワードを入力するだけで、AIが関連するレッスン、ドキュメント、情報を自動でピックアップします。
キーワードを入力するだけで、AIが関連するレッスン、ドキュメント、情報を自動でピックアップします。
フィルタ、不透明度、変形、その他のエフェクトを適用して、要素のインタラクティブ性を高めましょう。
これらのエフェクトのほとんどは、ホバー状態またはステートメニュー内の他のステートに追加できます。
Webflowのブレンディングモードは、要素がその下にある他の要素とどのようにブレンドするか(または重なるか)をさまざまな方法で提供します。これにより、カスタムコードを必要とせずに要素の内容が他の要素の内容とどのようにブレンドするかを設定できます。Webflowはmix-blendモードCSSプロパティを処理し、要素のコンテンツが親要素と背景のコンテンツとどのようにブレンドするかを設定できます。ブレンディングモードを使用すると、要素の不透明度調整を超えたさまざまなクリエイティブな可能性を開くことができます。
16種類のブレンディングモードがあります。似たような動作をするモードは、ブレンディングモードのドロップダウンメニュー内で隣り合って配置されています。これらのモードグループは以下の通りです:
要素とその子要素の透明度レベルをカスタマイズするには、効果の設定で不透明度を変更します。入力フィールドに値を入力するか、不透明度スライダーをドラッグして目的の値に変更できます。
不透明度の値はパーセントで設定します。100%は不透明で、0は完全に透明です。
アウトラインは、訪問者がキーボードでインタラクティブな要素をタブ操作する際に、デザイン内をナビゲートするのに役立ちます。要素の周囲に表示されるアウトラインは、訪問者に特定の要素に対する対話が行われていることを明示し、その要素にフォーカスしていることを示します。キーボードで再度 Tab キーを押すと、アウトラインは次にフォーカスされた要素の周囲に表示されます。
このため、要素の Focused (keyboard) 状態またはFocused状態にアウトラインを追加することが重要です。
ボックスシャドウは、要素の矩形の境界の外側または内側にスタイリングを追加します。ボックスシャドウは、プロジェクト内のボタン、セクション、Div ブロック、または他の要素に焦点や深みを追加するために使用できます。
スタイルパネルのボックスシャドウの設定で、要素の外側にボックスシャドウを追加するか、複数のボックスシャドウをレイヤーとして作成できます。
ボックスシャドウを選択して、シャドウの種類、角度、距離、ぼかし、サイズ、色をカスタマイズします。
スタイルパネルでほとんどのエフェクトに複数のレイヤーを追加することができます。例えば、要素に複数のボックスシャドウを追加してレイヤーとして配置できます。
エフェクト設定では、各レイヤーの表示を切り替えるには目のアイコンを選択し、各レイヤーを削除するにはゴミ箱のアイコンを選択します。各エフェクトの順序を変更するには、単に並べ替えたいレイヤーを選択し、望む順序番号にドラッグします。
2Dおよび3Dトランスフォームを追加することで、要素の外観と位置を変更し、ホバーなどの異なる状態で操作することができます。Style panel > Effects > 2D & 3D transformsから変換を追加できます。
4つの種類のトランスフォームがあります:
2D & 3D transformsの横にある省略記号をクリックして、Transform settingsにアクセスし、変換の起点、裏面の可視性、セルフパースペクティブ、および子要素のパースペクティブを調整できます。
エフェクトを重ねて追加する場合、以前の設定が失われることなく、複数の種類の変換を追加できます。プラスアイコンを使用して追加の変換を追加します。
トランジションは、要素の異なる状態間で滑らかなアニメーションを作成します。一意のトランジションを作成するために、期間とイージングタイプの効果をカスタマイズできます。トランジションの一般的な使用例は、要素のホバー状態において、急激な変更を避けるためです。
デフォルトでは、トランジションは「none」に設定されており、これはすべての状態に自動的に適用されることを意味します。したがって、各プロパティやスタイルにトランジションを追加する必要があります。
トランジション効果を追加し、以下のプロパティを指定します:
フィルターは、要素に独自の視覚効果を適用します。フィルターはホバー状態での変更を作成するためにも使用できます。画像、背景ビデオ、または他の要素にフィルターを追加できます。フィルターは要素全体、その子要素を含む外観を変更します。
フィルターを追加するには、追加メニューを使用してドロップダウンからいずれかのフィルター効果を選択します。
追加または調整したフィルターはキャンバス上でプレビューされます。また、1つの要素に複数のフィルターを追加し、フィルター設定でその表示と順序を切り替えることもできます。
任意の要素にバックドロップフィルターを追加すると、要素の境界内の透明な領域にフィルターエフェクト(ぼかし、カラーシフト、コントラストなど)を適用できます。要素を通して透明な領域を通して見える要素の背後のすべてがバックドロップフィルターの影響を受けます。
また、1つの要素に複数のバックドロップフィルターを適用することもできます。バックドロップフィルターをレイヤー化して組み合わせることで、さまざまな視覚効果を作成できます。
バックドロップフィルターには8つのフィルターがあります。類似した動作をするフィルターは、バックドロップフィルターのドロップダウンメニューで隣り合わせに配置されています。これらのフィルターグループには以下が含まれます。
各バックドロップフィルターの例と使用方法の詳細については、バックドロップフィルターのレッスンをご覧ください。
正しいカーソルを使用することは、ユーザーがページをナビゲートする際に何が起こるかを示すために重要です。結果と一致しないカーソルを使用すると、混乱につながる可能性があります。
デフォルトのカーソル値はautoです。これは、ブラウザのデフォルト設定によって指定された、特定の要素タイプに対するデフォルトカーソルを表示します。例えば、リンクにカーソルを合わせるとポインタカーソルが表示され、テキストにカーソルを合わせるとテキストカーソルが表示されます。
ほとんどの場合、デフォルトの設定で、ブラウザに適切なカーソルを選ばせるのが最善です。カーソルの値を変更することで、特定の要素に対してブラウザのデフォルトカーソルを上書きすることができます。
プレビューモードでスタイルを適用した要素の上にカーソルを合わせると、カーソルがどのように変わるかをテストして確認できます。