CSS2 スタイルシート大辞典 ソース掲載サイト
filter
|
|
|
|
|
|
|
|
|
||
|---|---|---|---|---|---|---|---|---|---|---|
| サンプル | フィルターを設定する | ○ | ○ | ○ | ||||||
| 注意点2 | パディングを指定しないと影が途切れる | ○ | ○ | ○ |
Alpha
progid:DXImageTransform.Microsoft.Alpha
|
|
|
|
|
|
|
|
|
||
|---|---|---|---|---|---|---|---|---|---|---|
| サンプル | 半透明にする | ○ | ○ | ○ | ||||||
| 応用例1 | マウスを載せると透明度が変わる | ○ | ○ | ○ | ||||||
| 応用例2 | 円形に透明度を変化させる | ○ | ○ | ○ |
Blur
progid:DXImageTransform.Microsoft.MotionBlur
|
|
|
|
|
|
|
|
|
||
|---|---|---|---|---|---|---|---|---|---|---|
| サンプル | 動きのある効果を付ける | ○ | ○ | ○ | ||||||
| 応用例1 | add属性のテスト | ○ | ○ | ○ |
Chroma
progid:DXImageTransform.Microsoft.Chroma
|
|
|
|
|
|
|
|
|
||
|---|---|---|---|---|---|---|---|---|---|---|
| サンプル | 指定の色を透明にする | ○ | ○ | ○ | ||||||
| 応用例1 | マウスを載せると透明な部分が変わる | ○ | ○ | ○ |
DropShadow
progid:DXImageTransform.Microsoft.DropShadow
|
|
|
|
|
|
|
|
|
||
|---|---|---|---|---|---|---|---|---|---|---|
| サンプル | くっきりした影を落とす | ○ | ○ | ○ | ||||||
| 応用例1 | positive属性のテスト | △ | ○ | ○ | ||||||
| 応用例2 | 透明な影を落とす | ○ | ○ |
FlipV FlipH
|
|
|
|
|
|
|
|
|
||
|---|---|---|---|---|---|---|---|---|---|---|
| サンプル | 上下、左右に反転させる | ○ | ○ | ○ | ||||||
| 応用例1 | 上下と左右のどちらにも反転させる | ○ | ○ | ○ |
Glow
progid:DXImageTransform.Microsoft.Glow
|
|
|
|
|
|
|
|
|
||
|---|---|---|---|---|---|---|---|---|---|---|
| サンプル | 発光する効果を付ける | ○ | ○ | ○ | ||||||
| 応用例1 | マウスを載せると燃え上がるリンク | ○ | ○ | ○ |
Gray Invert Xray
|
|
|
|
|
|
|
|
|
||
|---|---|---|---|---|---|---|---|---|---|---|
| サンプル | 灰色にする、色を反転させる | ○ | ○ | ○ | ||||||
| 応用例1 | マウスを載せると色が付く | ○ | ○ | ○ |
Mask
progid:DXImageTransform.Microsoft.MaskFilter
|
|
|
|
|
|
|
|
|
||
|---|---|---|---|---|---|---|---|---|---|---|
| サンプル | マスクをかける | ○ | ○ | ○ | ||||||
| 応用例1 | 文字に画像を載せる | ○ | ○ | ○ |
Shadow
progid:DXImageTransform.Microsoft.Shadow
|
|
|
|
|
|
|
|
|
||
|---|---|---|---|---|---|---|---|---|---|---|
| サンプル | 影をのばす | ○ | ○ | ○ | ||||||
| 応用例1 | ShadowとMaskの組み合わせ | ○ | ○ | ○ |
Wave
progid:DXImageTransform.Microsoft.Wave
|
|
|
|
|
|
|
|
|
||
|---|---|---|---|---|---|---|---|---|---|---|
| サンプル | 波のようにうねらせる | ○ | ○ | ○ | ||||||
| 応用例1 | 波打つ囲みを作る | ○ | ○ |
progid:DXImageTransform.Microsoft.AlphaImageLoader
|
|
|
|
|
|
|
|
|
||
|---|---|---|---|---|---|---|---|---|---|---|
| サンプル | 半透明のPNG画像を表示する | ○ | ○ | |||||||
| 解説 | 半透明のPNG画像をimg要素で表示する | ○ | ○ | ○ | ○ |
progid:DXImageTransform.Microsoft.Blur
|
|
|
|
|
|
|
|
|
||
|---|---|---|---|---|---|---|---|---|---|---|
| サンプル | 文字や画像をぼかす | ○ | ○ | |||||||
| 応用例1 | ぼかした影だけを表示させる | ○ | ○ |
progid:DXImageTransform.Microsoft.BasicImage
|
|
|
|
|
|
|
|
|
||
|---|---|---|---|---|---|---|---|---|---|---|
| サンプル | さまざまな効果を付ける | ○ | ○ | |||||||
| 応用例1 | 見出しを縦に表示させる | ○ | ○ |
progid:DXImageTransform.Microsoft.Emboss
progid:DXImageTransform.Microsoft.Engrave
|
|
|
|
|
|
|
|
|
||
|---|---|---|---|---|---|---|---|---|---|---|
| サンプル | 浮き彫りのような効果を付ける | ○ | ○ |
progid:DXImageTransform.Microsoft.Gradient
|
|
|
|
|
|
|
|
|
||
|---|---|---|---|---|---|---|---|---|---|---|
| サンプル | グラデーション効果を付ける | ○ | ||||||||
| 応用例1 | 文字と枠線にグラデーション効果を付ける | ○ | ○ |
progid:DXImageTransform.Microsoft.ICMFilter
|
|
|
|
|
|
|
|
|
||
|---|---|---|---|---|---|---|---|---|---|---|
| サンプル | 色管理の機能を使う | ○ | ○ |
progid:DXImageTransform.Microsoft.Matrix
|
|
|
|
|
|
|
|
|
||
|---|---|---|---|---|---|---|---|---|---|---|
| サンプル | 文字や画像を回転させる | ○ | ○ | |||||||
| 応用例1 | 左右に反転する | ○ | ○ | |||||||
| 上下に反転する | ○ | ○ | ||||||||
| 90度回転する | ○ | ○ | ||||||||
| 左右の幅を2倍にする | ○ | ○ | ||||||||
| 平行四辺形にする | ○ | ○ | ||||||||
| 135度回転する | ○ | ○ |