アプリケーションの目標：テキストに特殊効果を加える
アプリケーションソフト：Dreamweaver MX
操作難易度：★★☆☆☆
よく使われるWebページ作成ツールDreamweaver MXは、Webページを作成するだけでなく、CSSフィルターを使用してテキストに簡単な特殊効果を実行したり、写真を扱います。 Dreamweaver で特殊効果テキストを作成する方法をいくつかの例で見てみましょう。
Halo Word は
まず Dreamweaver を起動し、新しい文書に 1×1 の表を挿入し、境界線を 0 に設定してから、変更する必要があるテキストを入力します。
右側のフローティングパネルで「デザイン→CSSスタイル」をクリックすると、このフローティングパネルが開きます。
パネルの右下隅にある 4 つのボタンは、CSS スタイルの追加、作成、編集、削除です。
注: Dreamweaver では、CSS フィルターはテーブル、セル、画像などの領域制限のあるオブジェクトにのみ使用できますが、テキストに直接使用することはできないため、追加する必要があるテキストを特別な方法で配置する必要があります。事前に表に効果を追加し、CSS スタイルを表に適用してテキストに特殊効果を作成します。
図 1 新しい CSS スタイルを作成する [
新しい CSS スタイル] ボタンをクリックすると、図 1 に示すダイアログ ボックスが表示されます。
「タイプ」項目で「カスタム スタイルの作成」を選択し、「定義場所」で「このドキュメントのみ」を選択し、「OK」をクリックすると、タイプ パネルで CSS スタイル定義ダイアログ ボックスが表示されます (図 2)。フォント、フォント サイズ、色、その他のコンテンツを定義します。この例では、フォントは公用書体、サイズは 50 ピクセル、色は白を選択します。
図 2 テキスト効果を生成する CSS スタイルを定義するには
、拡張パネル (図 3) の設定がすべての CSS フィルターの [視覚効果] の下に表示されます。これにより、グロー フィルターを選択できます。テキストには光るエッジ効果があります。グロー フィルターの構文形式は次のとおりです: Glow(Color=?, Strength=?)。これには 2 つのパラメーターがあります。 Color はハローの色を決定します。ffffff などの 16 進コード、または Red や Yellow などの単語を使用できます。を表します。強度は 0 ～ 255 の範囲の光度を表します。この例では、色を赤、光度を 8 に設定し、[OK] に設定します。
図 3 グロー フィルターを設定した後
、この CSS スタイルをテーブルに適用します。カーソルをセルに移動し、ドキュメント
ウィンドウ
の左下隅にあるラベルをクリックしてセルを選択し、CSS スタイル パネルで新しく作成したスタイルをクリックすると、ラベルが CSS スタイルを示すように変わります。セルに適用されました。ドキュメント ウィンドウでは変更が確認できません。F12 キーを押して IE でプレビューすると、効果が表示されます (図 4)。
図4 ハローワードの効果はどうでしょうか
? Photoshopのフィルター効果と比べても劣りません。これらの特殊効果の単語を Web ページにいくつか配置すると、Web ページがさらに美しくなります。また、PrintScreen キーを使用して画面をキャプチャし、それを描画プログラムに貼り付けて保存して、別の画像にすることもできます。
テキストにシャドウ効果を生成できるシャドウ ワード
用の CSS フィルターには、Drowshadow と Shadow という 2 つがあります。生成される効果は若干異なります。
シャドウ ワードの作成手順は基本的にハロー ワードの作成手順と同じです。CSS スタイルでフィルターを選択し直すだけです。
Drowshadow フィルターの構文は次のとおりです: DropShadow(Color=?, OffX=?, OffY=?, Positive=?)。
このうち、Color は影の色を 16 進数で表し、OffX と OffY はそれぞれテキスト位置からの影のずれの量をピクセル単位で表し、正はすべての不透明な影の作成を表します。要素、0 すべての透明な要素に対する可視シャドウの作成を表します。
図 5 シャドウ ワード効果
たとえば、フィルタが DropShadow (Color=6699cc、OffX=2、OffY=2、Positive=1) に設定されている場合、効果は図 5 に示すようになります。
マスクワード
CSS フィルターには、テキスト部分をマスクに加工するマスク機能も用意されており、背景に適切な画像を使用すると、美しい中空のテキスト効果を生み出すことができます。
1×1 表をドキュメント ウィンドウに挿入し、ドキュメント ウィンドウの左下隅にあるラベルをクリックして表全体を選択し、プロパティ インスペクターの背景画像で適切な画像を選択します (図 6 を参照)。次に、必要なテキストを入力します。
図 6
次に、セルにマスク フィルターを追加します。手順は前の 2 つの例と同様です。フィルターでマスク (Color=?) を選択します。このパラメーターはマスクの色を決定します。ここでは白を選択します。
注: 最終的な効果ではテキストがくり抜かれ、色が表示されないため、この例でのテキストの色の選択は重要ではありません。
図 7 マスク ワード効果
を設定した後、この CSS スタイルをセルに適用し、F12 キーを押して効果を確認します (図 7)。
注: 背景画像はテーブル全体に追加され、ラベルに対応します。一方、CSS スタイルはセルに追加され、ラベルになります。
動的な
文字を作成するには、ぼかし効果を生成するために使用されるぼかしフィルターを使用する必要があります。その構文形式は Blur(Add=?, Direction=?, Strength=?) です。一般に、Add パラメーターはブール値で、フィルターが画像に使用される場合は 0 をとり、テキストに使用される場合は 1 をとり、単位は角度を表します。ブラーの動きの値。単位はピクセルです。たとえば、Blur(Add=1、Direction=90、Strength=150) を定義すると、図 8 に示すような効果がプレビューで表示されます。
図 8 動的な単語効果
実際、CSS の多くのフィルターは、画像にぼかし効果を生み出すぼかしフィルターなど、画像の変更にも使用できます。これらのフィルターを上手に適用できれば、専門的な画像処理ソフトウェアを使用しなくても、かなり優れた画像効果を作成できる場合があります。