안녕하세요^^ 여러분
스타일시트 마지막 강좌인 필터강좌시간 입니다.
지금까지의 강좌가 그러했지만 홈페이지를 만들면서 배우는 프로그램언어 순서가 HTML,CSS,JavaScript인데 특히 이번장은 Javascript와 응용해서 사용을 하시면 더욱 효과적인 배가될수 있는 속성들입니다.
아마도 약간의 디자인쪽에 관심이 있으셨던분은 포터샵등에서 filter라는 것을 보셨을겁니다.
문자나 이미지를 대상으로 색상을 반전시키고 또는 뒤집고,투명하게하고,흐리게하고 등등등 무수히 많이있죠^^ 그러한 툴에서 할 수 있는것을 지금 배울 CSS에서도 전부는 아니지만 다양한 필터기능을 사용하고 있습니다.
물론 많은 디자인툴을 사용하시면 더욱 좋겠지만 디자인툴(포토샵,일러스트레이터등)을 구매하시려면 적지않은 비용이 들어가겠죠^^*
하지만 여러분께서는 여기에서 설명된는 필터기능을 익히시면 만족할 수 있는 홈페이지등을 구현할 수 있을것입니다.
그럼 필터의 기본형식을 본다음 시작해 볼까요*^.^*
<태그 style='filter:필터속성(속성:값,속성:값,속성:값)'>

글자나 이미지에 투명도를 조절할 수 있습니다. 그 속성으로는 아래와 같아요.
opacity : 불투명도를 조절하며 1~100까지의 범위가 있습니다. 0이면 완전 투명.
finishOpacity : 끝나는 부분의 불투명도를 조절하며 1~100까지의 범위가 있습니다. 0이면 완전 투명.
style : 0은 처음의 opacity값을 끝까지 유지하는 값이고
          1은 왼쪽은 opacity값에서 오른쪽의 finishopacity값으로 투명도를 변화.
          2는 중앙의 opacity값에서 원형으로 바깥쪽의 finishopacity값으로 투명도를 변화.
          3은 x자 대각선의 opacity값에서 끝부분 변의 finishopacity값으로 투명도를 변화.

원본이미지
<img src='sample_03.jpg' style='filter:alpha(opacity:50)'>
<img src='sample_03.jpg' style='filter:alpha(opacity:10,style:1,finishOpacity:100)'>
<img src='sample_03.jpg' style='filter:alpha(opacity:10,style:2,finishOpacity:100)'>
<img src='sample_03.jpg' style='filter:alpha(opacity:10,style:3,finishOpacity:100)'>

blur효과는 해석 그대로 흐려지게 하는 효과입니다. 설명을 적으면 더 어려울수 있으니 속성과 예제만 들겠습니다.
add : add속성은 테두리를 더해서 흐려지게 할것이냐 아니냐의 차이이며 값은 0과 1이 있습니다.
        0:완전흐림
        1:불완전흐림
direction : 방향을 설정하며, 그 값으로는 시계방향으로 0, 45, 90, 135, 180, 225, 270, 315가 있습니다.
              그 사이값을 적으시면 반올림된 위의 값이 적용됩니다.^^*
strength : 번짐효과를 어느정도 강해게 줄것인지를 설정하며, 그 값으로는 0~100이 있습니다.
              수치가 높을수록 더 강해집니다.

원본이미지
<img src='sample_03.jpg' style='filter:blur(add:0,direction:135)'>
<img src='sample_03.jpg' style='filter:blur(add:1,direction:135)'>
<img src='sample_03.jpg' style='filter:blur(direction:45,strength:10)'>
<img src='sample_03.jpg' style='filter:blur(direction:90,strength:20)'>
<img src='sample_03.jpg' style='filter:blur(direction:135,strength:30)'>
<img src='sample_03.jpg' style='filter:blur(direction:180,strength:50)'>

fliph / flipv 스타일속성은 상하좌우를 바뀌게 한답니다.
fliph : flip horizon의 약어로 좌우를 바뀌게 합니다.
flipv : flip vertical의 약어로 상하를 바뀌게 합니다.

원본이미지
<img src='sample_03.jpg' style='filter:fliph()'> 좌우가 같아서 효과가 없죠^^*
<img src='sample_03.jpg' style='filter:flipv()'>

invert를 해석하면 바꾸다^^ 입니다. 색상을 반전시키는 스타일속성이죠.

원본이미지
<img src='sample_03.jpg' style='filter:invert()'>

chroma는 채도,색도란 뜻으로 여기 스타일속성에서는 정의된 Color값을 빼주는 역활을 합니다.

원본이미지
<img src='sample_03.jpg' style='filter:chroma(color:#787878)'> 예제가 조금 않좋아서 테두리가 약간 없어졌죠^^*

wave는 물결효과를 주는 스타일속성입니다.

add : 원본이미지를 합치면 밝아지겠죠 그 값은 합칠경우는 0, 그렇지 않을 경우 1
freq : wave의 갯수를 결정합니다.
lightstrength : wave 에서 빛의 강도를 결정하며 그 값은 0~100입니다.
phase : wave의 시작위치를 나타내며 그 값은 0~100입니다.
strength : wave의 강도를 지정하며 그 값은 0~100입니다.

원본이미지
<img src='sample_03.jpg' style='filter:wave(add:1)'>
<img src='sample_03.jpg' style='filter:wave(freq:5)'>
<img src='sample_03.jpg' style='filter:wave(lightstrength:50)'>
<img src='sample_03.jpg' style='filter:wave(phase:80)'>
<img src='sample_03.jpg' style='filter:wave(strength:80)'>
<img src='sample_03.jpg' style='filter:wave(add:0,freq:5,lightstrength:1,phase:20,strength:3)'>

x-ray 사진과 같은 효과를 주는 스타일 속성입니다.

원본이미지
<img src='sample_03.jpg' style='filter:xray()'>

glow는 지정된색을 번지게 하는 효과를 가진 스타일속성 입니다.
color : 색상을 지정
strength : 번지는 강도를 조절하며 그 값은 1~100입니다.

gray 스타일 속성은 글자나 이미지를 흑백으로 변환합니다.

원본이미지
<img src='sample_03.jpg' style='filter:gray()'>

shadow는 글자에 쓰이는 스타일 속성으로 뻗는 그림자 효과를 만들어 줍니다.

color : 색상을 지정합니다.
direction : 그림자의 방향을 결정하며 그 값으로는 0,,45, 90, 135, 180, 225, 270, 315으로 설정가능합니다.

dropshadow는 글자에 쓰이는 스타일 속성으로 떨어진 그림자 효과를 만들어 줍니다.

color : 색상을 지정합니다.
offx / offy : 그림자의 좌표를 정의합니다.
position : 0 이면 투명픽셀, 1 이면 불투명 픽셀로 부터 그림자를 만들어 줍니다.