2008-10-19 (日)
■ VML と clip プロパティを用いた放射状グラデーション
先日の VML と Compositor フィルタを用いた放射状グラデーション に引き続き、もう１つの方法を示しておきます。
この方法は以下のような特徴があります。
- 長所
- 多色のグラデーションが可能
- opacity (不透明度) のグラデーションも２段階まで可能
- グラデーションの焦点も任意の位置に設定可能
- 短所
- 図形が四角の場合しか対応できない
- 回転などの変換を含む場合に対応できない
- ３つの図形を重ねる必要がある
四角形の場合しか使えない、というのが致命的なので、使える場面はかなり限られると思いますが、 それでも良ければ綺麗な radial gradient を表示できます。
簡単に解説しておくと、この方法は３つの図形を重ねています。
- 中央を丸くくり抜いた四角形
- 放射状のグラデーションをかけた円
- 四角形の外枠
基本的には、グラデーションのかかった円を、四角形の上に乗せれば済むのですが、
- 円が半透明な場合は、四角形をくり抜いておかないと色が濃く見えてしまう
- グラデーションの中心と四角形の中心がずれている場合は、はみ出た部分を隠さないといけない
といった問題があるので、こういったややこしい方法を採っています。
[コメントを書く]
本日のリンク元
- 1 google検索(放射状のグラデ-ション)
- 1 google検索(VML 重ねる)
- 1 google検索(revulo radial)
- 1 google検索(javascript vml 枠)
- 1 google検索(グラデーション 放射線状 Radial)
- 1 google検索(radial gradient)
- 1 google検索(ｐｕｋｉｗｉｋｉ 外枠 表示 方法)
- 1 google検索(vml 重ねる)
- 1 http://209.85.175.104/search?q=cache:-e0FslNe-l8J:...
- 1 http://209.85.175.104/search?q=cache:-e0FslNe-l8J:...
