テキストを装飾する

テキストにさまざまな視覚効果をつける方法です。スタイルシートを利用します。

記入例(影1)
<div style="filter: shadow(color=#000000,direction=135); width: 70; height: 40"><h1>影1</h1></div>
※colorで影の色を指定、directionで影の方向を360度の範囲で指定します。

表示結果

影1

記入例(影2)
<div style="filter: dropshadow(color=#440000,offx=5,offy=5); width: 70; height: 40"><h1>影2</h1></div>
※colorで影の色を指定、offxとoffyでオフセット量を指定します。

表示結果

影2

記入例(発光効果)
<div style="filter: Glow(color=#ff0000,strength=2); width: 140; height: 40"><h1>発光効果</h1></div>
※colorで色を指定、strengthで発光強度を指定します。

表示結果

発光効果

記入例(高速移動効果)
<div style="filter: blur(add=0, direction=90,strength=7); width: 210; height: 40"><h1>高速移動効果</h1></div>
※addを0以外の値にすると元のフォントが追加表示されます。directionでぶれの方向、strengthで強度を指定します。

表示結果

高速移動効果

記入例(ゆがみ効果)
<div style="filter: wave(add=0, freq=2, lightstrength=20, phase=0, strength=4); width: 210; height: 40"><h1>ゆがみ効果</h1></div>
※addを0以外の値にするとゆがんでいない元のフォントが追加表示されます。freqはゆがみの波の数、lightstrengthはゆがみを照らす照明効果の強度、phaseはゆがみの開始角度をパーセントで指定(100で360度)、strengthでゆがみ強度を指定します。

表示結果

ゆがみ効果

記入例(透過処理)
<div style="filter: alpha(opacity=30); color: #FF0000; width: 400; height: 40"><h3>フォントは上と同じ色を指定していますが透過処理により背景が透けています。</h3></div>
※opacityで透明度(0で透明)を指定します。

表示結果

フォントは赤を指定していますが透過処理により背景が透けています。

これらの効果はBODYタグ、TABLEタグ、TDタグ、IMGタグ、MAQUEEタグにも適用できます。その場合記入例のwidthとheightのような大きさを指定する記述は必要はありません。テキストのみに適用させる場合DIVタグかSPANタグを使用しますが、これらのタグを使用する場合のみ大きさを指定する必要があります。

ホームページ作成の知恵袋

Copyright(C) ホームページ作成の知恵袋 All rights reserved.