CSS エフェクトを使用して、要素に視覚効果を加えたり、重なっている要素に視覚効果をブレンドする方法を設定したりできます。メディアルールでは CSS エフェクトをアニメーション化してオーバーライドすることができます。
1 つの要素を選択すると、[CSS エフェクト] パネルで CSS エフェクトの設定を確認できます。ワークスペースにパネルが表示されていない場合は、[ウィンドウ] メニューでパネルを切り替えます。
CSS の効果は、マスクには適用できません。
ミックス ブレンド モード
ミックス ブレンド モードでは、要素の色相、彩度、明度の値と、背景色に基づいて、要素のコンテンツを要素の背景とブレンドする方法を決定します。
ミックス ブレンド モードを適用するには:
- 背景とブレンドする要素を選択します。
- [CSS 効果] パネルで [ミックス ブレンド モード] プルダウンを使用して、ミックス ブレンド モードを選択します。
さまざまなブレンドモードを選択して、その効果をプレビューしてみましょう。想定したとおりに要素がブレンドされていない場合は、選択した要素がブレンドしたい他の要素の前に配置されていることを確認します。
ミックス ブレンド モードのリスト
- 通常（効果なし） - ブレンドなし。
- 色 - 要素色の色相と彩度、および背景色の輝度を使用します。
- 焼き込み - 背景色を反転させ、要素色で除算した結果の値を反転させます。
- 覆い焼き - 要素色を反転させた値で背景色を除算します。
- 比較（暗） - 要素または背景のより暗い色を使用します。
- 差の絶対値 - 明るい色から暗い色を減算します。
- 除外 - 差の絶対値モードと同様に機能しますが、コントラストがより低くなります。
- ハードライト - 背景に比べて要素が暗い場合は乗算モード、要素が明るい場合はスクリーン モードが適用されます。
- 色相 - 要素色の色相と彩度、および背景色の輝度を使用します。
- 比較（明） - 要素または背景のより明るい色を使用します。
- 輝度 - 要素色の輝度、および背景色の色相と彩度を使用します。
- 乗算 - 要素色に背景色を乗算します。
- オーバーレイ - 背景に比べて要素が明るい場合は乗算 モード、要素が暗い場合はスクリーン モードが適用されます。
- 彩度 - 要素色の彩度、および背景色の色相と輝度を使用します。
- スクリーン - 要素色と背景色をそれぞれ反転させ、これらを乗算した結果の値を反転させます。
- ソフトライト - ハードライト モードと同様に機能しますが、エフェクトがよりソフトになります。
フィルタ
フィルタでは、CSS を使用してぼかしやドロップ シャドウなどの視覚エフェクトを要素に追加できます。
動画ドキュメントとイメージ広告では、背景ツールを使用して、要素の背後の領域に CSS フィルタを適用できます。
フィルタの追加
新しいフィルタを追加するには:
- フィルタを追加する要素を選択します。
- [CSS 効果] パネルで
[フィルタを追加] をクリックします。
- 適用するフィルタを選択します。次のフィルタを使用できます。
- 必要に応じて設定オプションを調整します（詳細については、下記をご覧ください）。
[フィルタを追加] をクリックします。1 つの要素に複数のフィルタを追加でき、追加したフィルタを並べ替えることができます。
フィルタのリスト
ぼかし要素にぼかしを付けます。
設定オプション
- 半径 - ぼかしの半径（0～100 ピクセル）。
要素の明るさを調整します。
設定オプション
- パーセンテージ - 0% では要素が黒になり、100% では要素は変化しないままです。最大のパーセンテージは 1,000% です。
要素のコントラストを調整します。
設定オプション
- パーセンテージ - 0% では要素がグレーになり、100% では要素は変化しないままです。最大のパーセンテージは 1,000% です。
要素にドロップ シャドウを付けます。
設定オプション
- オフセット x - ドロップ シャドウまでの水平距離（-100～100 ピクセル）。
- オフセット y - ドロップ シャドウまでの垂直距離（-100～100 ピクセル）。
- 半径 - シャドウのぼかしの半径（0～100 ピクセル）。
- 色 - シャドウの色。
要素をグレースケールに変換します。
設定オプション
- パーセンテージ - 0% では要素は変化しないままで、100% では要素は完全にグレースケールになりす。
要素の色を調整します。
設定オプション
- 角度 - カラーホイールを回転させる角度（0～360 度）。
要素の色を反転させます。
設定オプション
- パーセンテージ - 0% では要素は変化しないままで、100% では要素の色は完全に反転します。
要素の不透明度を変更します。
設定オプション
- パーセンテージ - 0% では要素は完全に透明になり、100% では要素は変化しないままです。
要素の彩度を上げます。
設定オプション
- パーセンテージ - 0% では要素の彩度は完全に下がり、100% では要素は変更しないままです。最大のパーセンテージは 1,000% です。
要素をセピアに変換します。
設定オプション
- パーセンテージ - 0% では要素は変化しないままで、100% では要素は完全にセピアになりす。
フィルタの並べ替え
同じ要素に複数のフィルタを適用すると、それらは [CSS エフェクト] パネルに表示されている順序で適用されます。
フィルタを並べ替えるには:
- 並べ替えるフィルタの名前にカーソルを合わせます。3 つのドット
が表示されます。
- ドットをハンドルのように使用し、フィルタをパネル内の目的の場所にドラッグ&ドロップします。
フィルタの非表示
フィルタを非表示にすると、ステージ ファイル、プレビュー ファイル、公開ファイルにエフェクトが表示されなくなります。
フィルタを非表示にするには:
- フィルタ名にカーソルを合わせます。
- 非表示
アイコンをクリックします。
- フィルタを再度表示するには、表示
アイコンをクリックします。
非表示フィルタのコントロールは編集できません。
フィルタの削除
フィルタを削除するには:
- フィルタ名にカーソルを合わせます。
- 削除
アイコンをクリックします。