投影フィルターFILTER SHADOW, DROPSHADOW

filter: shadow (color=色, direction=角度)
対象から指定した方向へ次第に彩度を落とした連続した影をつけます。影の長さは指定できないみたいです。長さは目測でおおよそ10pxといったところ。影の分の余白を確保する必要があります。画像には適用できない…?
まぁ使うとしたらこんなソースですかね。( ´_ゝ`)

style="filter: shadow(color=#999999, direction=120);"


  • color =
    影の色を指定します。
    影は指定した色で始まり、連続しながら次第に薄くなっていきます。指定しない場合は#000になります。

    #0094E0 #999999
    abc
    abc


  • direction = 角度
    ここで指定した角度へ投影します。
    角度は上を0度として、角度を増やすごとに右回りします。360度以上の数値も指定できるが、360毎に0にリセットされるので特に意味はないです。
    ↑0度、→90度、↓180度、←270度

    25 1080
    abc
    abc




  • filter: dropshadow (color=色, offX=数値, offY=数値, positive=x)
    対象から指定した方向ち距離へぼかしのない影を投影します。こちらは角度を調整できないみたい。あちらをたてればこちらがたたず、みたいな。角度調整も可能なのでそれなりに使えるかも。しかしどうしても明視性は落ちるのは避けられない。相変わらず影の分の余白を確保する必要があります。相変わらず画像には適用できない…?
    まぁ使うとしたらこんなソースですかね。( ´_ゝ`)

    style="filter: dropshadow(color=#999999, offX=3, offY=3);"


  • color =
    影の色を指定します。
    指定しない場合は#333くらいになります。

    #0094E0 #999999 指定無し
    abc
    abc
    abc


  • offX = X軸への距離, offY = Y軸への距離
    要素から相対距離(X,Y)へ影をつけます。単位はpx。
    -も使えるので有る程度の角度調節が可能ですが、あまり離れすぎたりしても影と認知されにくくなるので、フォントの大きさとの兼ね合いもありますが、大体2〜5あたりがベターかと。

    offX = 2
    offY = 2
    offX = -3
    offY = -3
    offX = -2
    offY = 4
    abc
    abc
    abc


  • positive = 0(false) or 1(true)
    え〜と、いまいち存在意義とか疑うよーなプロパティですが。影と影以外の透明部分を反転させるようです。
    指定無しで面倒な事にはならないので、特に指定する必要はないですね。

    0(false) 1(true) 指定無し
    abc
    abc
    abc





  • © 2004 maki All rights reserved.