|
요기는 전에
이어서 필터(filter)... 그 두번째 이야기가 입니다.
공통적으로 주의 할 점은 대부분이 width나 height 로 영역을 지정해 주어햐 한다는 것입니다.
아래의 예에서 영역이 지정된 부분은 꼭 지정을 해 주세요..
2.blur
blur 필터를 이용하면 카메라로 움직이는 피사체를 잡은
듯한(흐리게 하는) 효과를 얻을 수 있습니다.
| 속성(properties) |
설
명 |
| add |
원본
이미지를 합칠 것인가를 결정합니다. 1이면 yes, 0이면 no!
|
direction |
블러의
방향으로 시계방향 각도로 표시됩니다. 0, 45, 90, 135, 180,
225, 270, 315의 값을 가집니다. |
| strength |
블러의
강도(intensity)를 지정합니다. 1에서 100까지의 값을
가집니다. |
| <img src=./girl.jpg> |
<img src=./girl.jpg
style="filter:blur(direction=45,strength=50)"> |
|
|
3.chroma
지정된 특정색을 투명하게 만들어 줍니다.
| 속성(properties) |
설
명 |
| color |
투명하게
지정할 색상 값(#rrggbb) 또는 색상 이름 |
| <img src=./girl.gif> |
<img src=./girl.gif
style="filter:chroma(color=blue)"> |
|
|
4.dropshadow
특정 위치에서 그림자를 만들어 줍니다.
| 속성(properties) |
설
명 |
| color |
그림자의
색상값 또는 색상 이름 |
| offx,
offy |
대상으로부터
그림자의 x,y 좌표 |
| positive |
positive=1이면
불투명 픽셀로부터 그림자를 만들고 0이면 투명 픽셀로부터 그림자를
만듭니다 |
* dropShadow는 DIV, MARQUEE,
SPAN, TABLE, TD, TH에만 적용됩니다.
| <div style="width:320;
height:50; font-size:30pt; filter:dropshadow(color=#cccccc,
offx=10, offy=10, positive=1)">
와우!!!</div> |
와우!!!
|
5.fliph
수평거울이미지를 만들어줍니다.
| <div style="width:320;
height:50; font-size:30pt; filter:fliph()">
웹 마스 터 </div> |
웹 마스 터
|
6.flipv
수직거울이미지를 만들어줍니다.
| <img src=./girl.jpg
style="filter:flipv()">
|
|
7.glow
이전 칼럼에서 본 적이 있는 불타는 듯한 효과를 가져다 줍니다.
| 속성(properties) |
설
명 |
| color |
적용할
색상값 또는 색상 이름 |
strength |
강도
지정 1-100 |
| <div style="width:320;
height:50; font-size:30pt; filter:glow(color=red,
strength=10)">Home </div>
|
Home
|
8.gray
말그대로 회색화(?) 시킵니다.
| <img src=girl.jpg
style="filter:gray()">
|
|
9.invert
색조(hue), 채도(saturation), 밝기(brightness)
값을 반대로 만들어 줍니다.
| <img src=girl_2l.gif
style="filter:invert()">
|
|
10.mask
불투명 픽셀은 투명마스크를 씌우고 투명 픽셀은 지정된 색으로 마스크를 씌웁니다.
| 속성(properties) |
설
명 |
| color |
적용할
색상값 또는 색상 이름 |
| <div style="width:320;
height:50; color: #0000ff; font-size:32pt;
filter:mask(color=beige)">MASK</div>
|
웹 마스 터
|
11.shadow
그림자를 만듭니다. dropshadow의 사촌쯤 된다고 생각하서요.
| 속성(properties) |
설
명 |
| color |
적용할
색상값 또는 색상 이름 |
| direction |
그림자의
방향. 시계방향 각도로 표시되며 0, 45, 90, 135,
180, 225, 270, 315의 값을 가집니다.
|
| <div style="width:320;
height:50; font-size:10pt; filter:shadow(color=#cccccc,direction=45)">
Shadow </div> |
안녕하세요. 모모모 입니다.
|
12.wave
물결모양의 비틀림현상을 가져다 줍니다.
| 속성(properties) |
설
명 |
| add |
원본
이미지를 합칠 것인가를 결정합니다. 1이면 yes, 0이면 no!
|
freq |
wave의
갯수 |
| lightstrength |
웨이브
효과에서 빛의 강도의 퍼센트 값입니다(0~100) |
| phase |
웨이브
효과의 시작 위치로 0(0도)~100(360도)사이의 값을 가집니다.
만약 25이면 90도가 시작 위치가 됩니다. |
| strength |
웨이브
효과의 강도(1~100) |
| <img src=girl_2.jpg
style="filter:wave(strength=8,freq=3,lightstrength=10,phase=25,add=0)"> |
|
13.xray
대상을 x-ray를 찍은 것처럼 흰색과 검은색으로만 표시합니다.
| <img src=girl_2.jpg
style="filter:xray()">
|
|
14. Gradient
그라데이션효과를 구사하고자 할 때 사용합니다.
| 속성(properties) |
설명 |
| GradientType |
0,1,2 |
| StartColorStr |
시작 컬러 |
| EndColorStr |
끝 컬러 |
<DIV STYLE="background:#ffffcc; border:1px solid black; padding:4px; font-family:verdana; font-size:12px; width:300px;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#0099FF', EndColorStr='#FFFFFF')">
<B>그라데이션 효과</B><br>
<BR>바탕색이 점점 흐려지는 그라데이션...<br>
색상은 자유롭게<br>
한국 월드컵 우승을 축하합니다 !!!<br>
</DIV>
그라데이션 효과
바탕색이 점점 흐려지는 그라데이션...
색상은 자유롭게
한국 월드컵 우승을 축하합니다 !!!
15.light,redirect,revealtrans,blendtrans
이 필터들은 단독으로 사용되지 않고 자바스크립트와 어울려 갖가지 효과를
나타냅니다. revealtrans,blendtrans는 transition(변환)
효과를 가져다 주는데 revealtrans를 meta 태그에 사용하면 page
transition 효과를 얻을 수도 있습니다.
아래를 클릭하셔서 관련 내용들을 참고 하세요.
http://msdn.microsoft.com/workshop/author/filter/reference/reference.asp
필터는 가히 익스플로러의
야심작이라 할만합니다. 아직은 미흡한 점이 많아 더욱 보완될 필요가 있지만
앞으로 각광받을 기법임엔 틀림없는 것 같습니다.
|
