Dreamweaverでドロップとテキストの影を追加する方法 - ダミー

画像、タグなどの要素にドロップシャドウを追加することにより、Dreamweaverでデザインを強化し、ページの深みを増すことができます。テキストシャドーを追加すると、特にデザインに複雑な背景がある場合や、フォアグラウンドと背景の色にコントラストがない場合に、読みやすいようになります。

クレジット：iStockphotoによる写真。 com

Dreamweaver CCでは、新しいCSS DesignerパネルからのCSS3ドロップシャドウとテキストシャドウのサポートと統合が強化されています。

<！ --1 - >

クラスまたはIDスタイルをテキストシャドーで作成し、タグスタイル（ここで見られる見出しスタイルなど）を定義して、既存のHTMLエレメントにテキストシャドーを追加できます。そのテキストシャドーを作成するCSS3コードは、

h1 {text-shadow：2px 2px 2px#000;}

コード内の数字は、テキストシャドーが2ピクセル右2ピクセルのぼかしを持つテキスト。さらに、シャドーは黒色で作成され、省略された16進数のカラーコード#000で指定されます。

<！ -

水平

• および 垂直 ：最初の2つの数値は必須で、水平方向を指定します垂直オフセット - ドロップシャドウがテキストの下（ 垂直 ）およびテキストの右側（水平）までの距離です。 blur radius

• ：3番目の値は、シャドウのぼかし量を指定します。ぼかし半径を含めない場合、デフォルトは0で、影が単色として表示されます。 <！ - 3 - >

  color

• ：4番目の値はシャドウの色を指定し、16進カラーコードまたはRGBaカラーコードを使用して定義できます。 カラーオプションにRGBaカラーを選択すると、透明度を追加できるため、シャドウの外観をより詳細に制御できます。

CSS Designerパネルの下部にある[プロパティ]パネルを使用して、テキストシャドーを追加できます。これを行うには、次の手順を実行します。

CSS Designerの[プロパティ]パネルの[テキストシャドウ]セクションまでスクロールダウンします。

1. Hシャドウ（水平）およびVシャドウ（垂直）フィールドを使用して表示するシャドウのサイズを入力します。

2. ぼかしフィールドにサイズを入力して、テキストシャドーに必要なぼかし量を追加します。

3. カラーウェルをクリックし、テキストシャドーで使用する色を選択します。