Dreamweaver CS6：Dreamweaver CS6でCSS3 - ダミー

Dreamweaver CS6 for Dummiesカンニングシート

Dreamweaver CS6では、デザインを強化し、CSS3ルールでテキストシャドーを追加することでページの深みを増すことができます。最新のウェブ技術。テキストシャドウを追加すると、特にデザインに複雑な背景がある場合や、背景とテキストの色にコントラストがない場合に、読みやすくなります。

<！ - 1 - >クレジット：Paul Gual、istockphoto com

Dreamweaver CS6には、CSSスタイルパネルのプロパティペインを使用するときのCSS3テキストシャドウのサポートが含まれています。テキストシャドウでクラスまたはIDスタイルを作成し、イメージで使用される見出しスタイルなどのタグスタイルを定義して、既存のHTMLエレメントにテキストシャドーを追加できます。

テキストシャドーを作成するCSS3コードは、

h1 {text-shadow：2px 2px 3px#000;}です。コード内の数字は、テキストシャドウを右に2ピクセル、 3ピクセルぼかしのテキストの下のピクセル。さらに、シャドーは黒色で作成され、省略された16進数のカラーコード#000で指定されます。

<！

水平および垂直：

最初の2つの数値が必要で、水平オフセットと垂直オフセットを指定します。ドロップシャドウはテキストの下（水平）とテキストの右側（垂直）に広がっています。

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

• <！ - 3 - > Color：

  4番目の値は影の色を指定し、16進カラーコードまたはRGBaカラーコードを使用して定義できます。

• 画像に示すように、CSSスタイルパネルの下部にあるプロパティパネルを使用して、テキストシャドーを追加できます。これを行うには、次の手順を実行します。 [CSSスタイル]プロパティペインの左側にある[プロパティの追加]リンクをクリックします。

ドロップダウンリストからCSS3スタイルのルール名、テキストシャドウを入力するか、スタイルルールを選択します。

1. 名前が左側に表示されたら、右側に小さな矢印が表示されます。

2. テキストシャドウの右側にある矢印をクリックして選択します。

   ボックスが表示されます。

3. X、Yオフセット、ぼかし半径、および色を入力します。