스타일시트 필터효과에 대해
필터는 총 14가지가 있는데 모두 익스플로러 전용입니다.
Nescape에서는 사용할수 없지만 여러가지 멋진 효과들을 아주 간단하게 구현할 수 있다는 점에서
충분히 가치가 있다고 봅니다..
그럼 위의 효과를 구현한 방법을 살펴볼까요..?
<img src="sample.jpg" style="filter:Alpha(opacity=80,style=1)" border="0">
간단하죠..? 이렇게 필터효과는 filter:필터이름(필터속성1,필터속성2...)과 같은 형식으로 사용할 수 있습니다.
필터이름과 속성들은 아래 표에 잘~ 나와있습니다..^^;;
| Filter 이름 |
설명 |
필터 속성 및 설명 |
| Alpha |
오브젝트에 투명효과를 주며, 전체 또는 일부에 적용할 수 있습니다. |
- Opacity : 투명도의 단계를 0부터 100까지의 숫자로 표현
Style : 투명도가 적용되는 모양으로 0(균일한 모양), 1(선형), 2(원형), 3(사각형)의 값으로 표현 |
| Blur |
오브젝트가 빠른 속도로 움직이는 잔상을 만듭니다. 포토샵에서 Motion Blur 필터와 비슷한 효과입니다. |
- Direction : 움직인 각도
- Strength : blur의 강도 |
| Chroma |
오브젝트에서 특정 색상을 투명하게 빼줍니다. |
- color : 투명처리할 색상을 16진수 값으로 나타내며, 반드시 오브젝트에 사용된 색상이어야 합니다. |
| DropShadow |
오브젝트의 외곽에 그림자를 만듭니다. |
- color : 그림자의 색상으로 16진수값으로 나타냅니다.
offX, offY : 그림자와 오브젝트 사이의 가로, 세로 거리 |
| FlipH |
수평으로 오브젝트를 뒤집어 출력합니다. |
없음 |
| FlipV |
수직으로 오브젝트를 뒤집어 출력합니다. |
없음 |
| Glow |
오브젝트의 둘레에 네온효과를 만듭니다. |
- color : glow의 색상으로 16진수값으로 나타냅니다.
Strength : grow의 강도를 0부터 100까지의 수로 나타냅니다. |
| Glay |
오브젝트의 색상 정보를 제거하여 흑백으로 만듭니다. |
없음 |
| Invert |
오브젝트의 색상, 명도, 채도값을 반전합니다. |
없음 |
| Light |
오브젝트에 광선 효과를 만듭니다. |
- addPoint(x,y,z,R,G,B,strength) : 오브젝트에 적용될 광선의 방향과 색상, 강도 등을 설정합니다. |
| Mask |
오브젝트의 투명한 부분을 마스크로 만듭니다. |
- color : 마스크로 적용될 색상으로 16진수 값으로 나타냅니다. |
| Shadow |
오브젝트에 그림자효과를 줍니다. |
- color : 그림자의 색상을 16진수 값으로 나타냅니다.
- direction : 그림자의 각도입니다. |
| Wave |
오브젝트에 웨이브를 줍니다. |
- phase : 웨이브의 각도를 %로 나타냅니다.
- freq : 웨이브의 개수를 정수값으로 나타냅니다.
- strength : 웨이브가 적용되는 강도입니다. |
| XRay |
오브젝트를 X-ray 처리한 효과를 만듭니다. |
없음 |
|
