#36|テキストシャドウについて

テキストの影を重ねることで、奥行きを出し、ユニークなテキストスタイルを作ることができます。

目次

1つのテキスト要素に複数のテキストシャドウを追加し、それぞれのテキストシャドウを異なるスタイルにすることで、ユニークな視覚効果を作り出すことができます。

以下はその例です。


  1. 黒ベタのテキストにドロップシャドウを追加します。距離を4pxに設定します。
  2. 最初のシャドウの下に2つ目のシャドウを追加します。距離を8pxに設定します。
  3. 3 番目のシャドウを追加します。このシャドウの距離を12pxに設定します。
  4. テキストに影を付けると、キャンバス上でその効果を確認できます。
Step one on the left, select the Mckinley Barbers heading. Step two on the right, add a text shadow and set the settings to 4 distance, 0 blur and color white. Keep the angle at 135 for all text shadow effects added.
Step three on the left, add a second text shadow with a distance of 8px, 0 blur and color black. Step four on the right, add a third text shadow with a distance of 12px, 0 blur and color white.
On the left, the three text shadows are included in the Text shadows section of the text element. On the right, the text includes three text shadows under the solid black text "Mckinley Barbers"

また、キャンバス上のテキストを編集して変更する場合は、このシャドウ効果で書くことになります。

影のレイヤーの表示はいつでも切り替えられますし、レイヤーをクリック&ドラッグして順番を入れ替えることもできます。

The text shadows section includes three text shadow effects with their settings, a hide/show icon and a delete icon. A plus icon is on the top right to add a new effect.