【Glow()】グロー効果を与える

filterプロパティのGlow()では、画像やテキストに光を当て、発光しているような効果(グロー効果)を与えることができます。 光の強さや色は、パラメータで指定します。

またfilter:glow()の書式で指定する場合は、paddingを併せて使用し、グロー効果の部分のスペースを空けておく必要があります。 書式などについて詳しくはfilterを参照して下さい。

なおこのプロパティは、Internet Explorer10以降では未対応となっています。

書式

  • filter:progid:DXImageTransform.Microsoft.Glow(★) ……… グロー効果を与える(IE5.5以上)
  • filter:glow(★) ……… グロー効果を与える(IE4以上)

★:Color=光の色、Strength=光の強さ

Color=光の色
光のRGB値やカラーネームで指定します。色についてはカラーコード一覧を参照下さい。
Strength=光の強さ
光の強さを1(弱い)~255(強い)で指定します。(初期値は5)

使用した時の例

.sample1 {
  filter:progid:DXImageTransform.Microsoft.Glow(Color=red, Strength=15);
}
.sample2 {
  filter:glow(Color=red, Strength=15);
  padding:10px;
}
<p>フィルタを適用していない画像<br />
  <img src="image.gif" alt="">
</p>
<p class="sample1">sample1を適用した画像。Glow(Color=red, Strength=15)<br />
  <img src="image.gif" alt="">
</p>
<p class="sample2">sample2を適用した画像。glow(Color=red, Strength=15)<br />
  <img src="image.gif" alt="">
</p>

ブラウザ上の表示例

フィルタを適用していない画像

sample1を適用した画像。Glow(Color=red, Strength=15)

sample2を適用した画像。glow(Color=red, Strength=15)

対応ブラウザなどのデータ

プロパティ 独自拡張
対応ブラウザ Internet Explorer4~
※IE10以降は未対応

関連情報