14장. 필터 효과와 CSS 활용하기 포토샵을 대신하는 필터 효과 CSS 활용하기
필터 효과와 CSS 활용하기 – 그림 자르기 Clip : rect(a,b,c,d) 사용 예 <div id="layer1" style="width:400px; height:600px; position:absolute; left:100px; top:0px; clip:rect(0 300 600 180);"> <img src="city.jpg" width="400" height="600"> </div> 잘려진 그림 a c d b (B,a) (d,c)
필터 효과와 CSS 활용하기 – 필터 그림과 문자에 필터 적용하는 법 필터의 종류 문자와 그림을 꾸며주는 필터 <태그 style= filter:필터종류(세부속성지정)> 필터의 종류 사진에 특수 효과를 주는 필터 gray invert xray chroma 문자와 그림을 꾸며주는 필터 filph filpv alpha blur wave 문자에 주로 사용되는 필터 dropshadow shadow glow
필터 효과와 CSS 활용하기 – 사진에 특수효과를 주는 필터 gray 필터는 컬러 값을 모두 제거하고 흑백사진으로 만들어준다. <img src="이미지 전체 경로" style="filter:gray()"> invert 필터는 색상, 채도, 명도 값을 반전시켜서 반대되는 느낌의 그림을 만들어준다. <img src="Aniston.jpg" style="filter:invert()"> xray 필터는 x-ray 사진처럼 그림이 흑백으로 표현된다. <img src="Aniston.jpg" style="filter:xray()"> chroma 필터는 지정색을 투명하게 만들어 준다. <img src="이미지 전체경로" style="filter:chroma(color=투명하게할 색상명)">
필터 효과와 CSS 활용하기 – 문자와 그림을 꾸며주는 필터 대칭 필터로 그림을 상, 하, 좌, 우로 뒤집어준다. <img src="dog.jpg" style=filter:fliph()> <img src="dog.jpg" style=filter:flipv()> alpha 필터는 불투명도(opacity) 값 조절 <img src="dog.jpg" style="filter:alpha(opacity=40,style=3,finishopacity=0)"> blur는 이미지를 흐리게 하면서 번짐 효과 <img src="dog.jpg" style="filter:blur(direction=225,strength=30,add=0)"> wave 필터는 퍼머 머리처럼 웨이브를 준다. <img src="dog.jpg" style="filter:wave(strength=25,freq=2,lightstrength=95,phase=51,add=1)">
필터 효과와 CSS 활용하기 – 문자에 주로 사용되는 필터 dropshadow 필터는 특정 위치에 그림자를 만들어 준다. <p style="filter:dropshadow(color=gray,offx=3,offy=3,position=0)">DropShadow</p> shadow 필터는 지정 각도로 번짐 효과가 있는 그림자를 만들어준다. <p style="filter:shadow(color=green,direction=135">Shadow</p> glow 필터는 문자 주위에 외부 광채를 만들어준다. <p style="filter:glow(color=red,strength=5)">Glow로 문자에 광채주기</p>