esprits top Esprit's Style

    －    エンジニアの足つぼ    －

HTML CSS JS Servlet Cisco DOS Reg Español Soft Color Link

HTML

CSS

JavaScript

Servlet

Cisco

Win-DOS

Registry

スペイン語

FreeSoft

Color

Link

TOP Web CSS フィルタ

フィルタ - InternetExplorerでみてね

〆 フィルタ（ぼかし）を設定します（IE独自タグ）

１．１ グラデーション効果（Alpha）

　　　Alpha(Opacity="100", Finishopacity="0", Style="3");
　　　　　/*
　　　　　　 透明度を0(透明)～100(不透明)として
　　　　　　 OpacityからFinishOpacityの範囲をグラデーション。
　　　　　　 Styleは、1:線形、2:円形、3:長方形型にグラデーション。
　　　　　　 StartX,FinishX,StartY,FinishY は 開始と終了の位置。 */

　　＃ちなみにMozilaでは -moz-opacity にて設定可能です。
　　 この名前の先頭の-moz-がMozila独自拡張をあらわします。
　　 表示のサンプルは省略してます。

@sample.html 
<span style=
  "filter:progid:DXImageTransform.Microsoft.Alpha
    (Opacity=100,FinishOpacity=0,Style=1, 
      StartX=0,FinishX=100,StartY=0,FinishY=100);">
        Orange
</span>
orange
@sample.html 
<span style=
  "position:absolute;
  filter:progid:DXImageTransform.Microsoft.Alpha
    (Opacity=100,FinishOpacity=0,Style=2);">
        Apple
</span>

こんなふうに使えます。画像にマウスを乗せるとフィルタが解除されます。
@sample.html 
<style type="text/css">
<!--
a:hover img {
    filter: none;
}
a img {
    filter: gray;
}
-->
</style>
</head>
<body>
<a href="#1"> <img src="??.jpg" /></a>
</body>



２． じわりと切り替える効果（Fade）

@sample.html 
<div id="oTransContainer"
style="position:absolute; top: 0px; left: 0px; width: 300px;height:300px;
  filter:progid:DXImageTransform.Microsoft.Fade(duration=1.0,overlap=1.0);">
    <div id="oDIV1" style="position:absolute;
        top:50px; left:10px; width:240px; height:160px;background:gold;">
            りんご </div>
    <div id="oDIV2" style="visibility:hidden; position:absolute;
        top:50px; left:10px; width:240px; height:160px; background: yellowgreen;">
            みかん </div> 
</div>
スクリプトとあわせて使うと↓こんなこともできます。

３． 筆ではいたような効果（MotionBlur）

@sample.html 
<span style=
  " width=100%;filter:progid:DXImageTransform.Microsoft.
    MotionBlur(Strength=50, Direction=45, Add='true');">
        Che Guevara
</span>
Che Guevara

４． 指定した色を透明にする効果（Chroma）

@sample.html 
<span style=
  "position:relative;filter:progid:DXImageTransform.Microsoft.
  Chroma(Color='tomato');" >
        Tomato を透明にする
</span>
yellowgreen
tomato
gold



下記のIE独自効果はIE7ではもはや対応をやめてしまったようです。。


５． 影の効果（DropShadow）

@sample.html 
<span style=
  "filter:progid:DXImageTransform.Microsoft.DropShadow
  (Color=#999999,offX=5,offY=5,positive=true);" >
        Apple
</span>
orange
@sample.html 
<span style=
  "filter:progid:DXImageTransform.Microsoft.DropShadow
  (Color='pink',offX=3,offY=3,positive=true);">
        Esprit's （影をつける）
</span>
Esprit's

６． 基本効果（BasicImage）

@sample.html 
<span style=
"filter:progid:DXImageTransform.Microsoft.BasicImage
(grayscale=0, xray=0, mirror=1, invert=0, opacity=0.3,rotation=0)">
      透明度を設定
</span>
fruit
@sample.html 
<span style=
"filter:progid:DXImageTransform.Microsoft.BasicImage
(grayscale=0, xray=0, mirror=1, invert=0, opacity=1, rotation=0)" >
    左右反転
</span>
fruit
@sample.html 
<span style=
"filter:progid:DXImageTransform.Microsoft.BasicImage
(grayscale=0, xray=0, mirror=0, invert=0, opacity=1, rotation=2)" >
    上下反転
</span>
fruit
@sample.html 
<span style=
"filter:progid:DXImageTransform.Microsoft.BasicImage
(grayscale=0, xray=0, mirror=0, invert=1, opacity=1, rotation=0)" >
    色合い、彩度、明るさの反転
</span>
fruit
@sample.html 
<span style=
"filter:progid:DXImageTransform.Microsoft.BasicImage
(grayscale=1, xray=0, mirror=0, invert=0, opacity=1, rotation=0)" >
    モノクロ
</span>
fruit
@sample.html 
<span style=
"filter:progid:DXImageTransform.Microsoft.BasicImage
(grayscale=0, xray=1, mirror=0, invert=0, opacity=1, rotation=0)" >
    レントゲン（X線）
</span>
fruit

７． 炎のような効果（Glow）

@sample.html 
  <span style=
  "filter:progid:DXImageTransform.Microsoft.Glow
  (color='blue', Strength='5')" >
      青カビタイプ（ブルーチーズ）
</span>
ロックホール（仏）

８． 光の効果（Light）

うまくいかないので省略。。

９． マスク効果（MaskFilter）

@sample.html 
<div style=
"filter:progid:DXImageTransform.Microsoft.MaskFilter
(color=#bfbfff)" >
    白カビタイプ
</div>
カマンベール（仏）
ブリー・ド・モー（仏）

１０． 影の効果（Shadow）

@sample.html 
<span style=
  "filter:progid:DXImageTransform.Microsoft.Shadow
  (color=#ff95ff, direction=45)" >
      青カビタイプ（ブルーチーズ）
</span>
ゴルゴンーゾーラ（伊）
スティルトン（英)

１１． 波のような効果（Wave）

@sample.html 
<span style=
  "filter:progid:DXImageTransform.Microsoft.
  Wave(Add='false', LightStrength=30, Phase=20, 
  Strength=5,  Freq=3)" >
        波の効果
</span>
波フィルタのかかったフルーツ

１２. フィルタマッピング（参考）

Internet Explorer 4.0 to 5.5 Filters Mapping
4.0 filter nameAlternate 5.5 implementation
alphaDXImageTransform.Microsoft.Alpha
BlendTransDXImageTransform.Microsoft.Fade
blurDXImageTransform.Microsoft.MotionBlur
chromaDXImageTransform.Microsoft.Chroma
dropShadowDXImageTransform.Microsoft.DropShadow
FlipHDXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)
FlipVDXImageTransform.Microsoft.BasicImage(mirror=1)
glowDXImageTransform.Microsoft.Glow
GrayDXImageTransform.Microsoft.BasicImage(grayscale=1)
InvertDXImageTransform.Microsoft.BasicImage(invert=1)
lightDXImageTransform.Microsoft.Light
maskDXImageTransform.Microsoft.MaskFilter
shadowDXImageTransform.Microsoft.Shadow
waveDXImageTransform.Microsoft.Wave
XrayDXImageTransform.Microsoft.BasicImage(xray=1)

詳細はMicrosoftのページを参照 Filters and Transitions Master
Filter Samples
Prev Page    Next Page    Page Top   
The link to this site is free.   /   Last Updated : 28.May.2012   
Copyright © ESPRITS STYLE. 2008   /   ご意見、感想、苦情は、 こちらへ...
counter