Drop shadowをカスタムCSS無しで追加できるようになりました！

※この記事は2024年8月15日にWebflowが公開した下記アップデート情報・ニュースを日本語訳したものです（一部加筆・修正あり）

Drop shadow filters

‍

スタイルパネルにドロップシャドウが追加されました。

これにより、カスタムCSSを必要とせずに、デザインの深さと寸法をより細かく制御できるようになります。

‍

ドロップシャドウを簡単に追加

Style panel  >  Effects > Filtersから直接ドロップ シャドウを適用、およびカスタマイズできるようになりました。

このCSS機能を使用すると、要素の形状に適合するシャドウを作成できるため、画像や複雑な形状などに最適です。

ボックスシャドウとは異なり、ドロップシャドウは要素の輪郭に正確に従います。

• 透明な画像やロゴに最適な影
• 不規則な形状の要素にリアルな奥行き効果
• デザインコンポーネントをより自然に強調します

‍

ドロップシャドウをカスタマイズする

新しいドロップ シャドウフィルターには、効果を適切に見せるために制御できるいくつかのプロパティが含まれています。

• XとYのオフセット: 影の位置を制御します
• ぼかし: 影のエッジの柔らかさを調整します
• 色: カラーピッカーで影の色と不透明度を選択します

‍

ブレークポイント間で調整する

さまざまなブレークポイントでドロップ シャドウの設定を調整して、すべてのデバイスでデザインが美しく表示されるようにすることができます。

‍

変数を使ってアニメーション化する

ドロップシャドウをアニメーション化するには:

1. スタイル パネルで、フィルターのプロパティ ( x および y オフセット、ぼかし、色)に変数をバインドします。
2. インタラクションパネルで、「Set variable value」アクションを含む新しいアニメーションを作成し、それに応じてドロップシャドウ変数を更新します。これにより、スムーズでダイナミックなドロップシャドウアニメーションが作成されます。

‍

‍