14장. 필터 효과와 CSS 활용하기 포토샵을 대신하는 필터 효과 CSS 활용하기.

Presentation on theme: "14장. 필터 효과와 CSS 활용하기 포토샵을 대신하는 필터 효과 CSS 활용하기."— Presentation transcript:

1 14장. 필터 효과와 CSS 활용하기 포토샵을 대신하는 필터 효과 CSS 활용하기

2 필터 효과와 CSS 활용하기 – 그림 자르기 Clip : rect(a,b,c,d) 사용 예
<div id="layer1" style="width:400px; height:600px; position:absolute; left:100px; top:0px; clip:rect( );"> <img src="city.jpg" width="400" height="600"> </div> 잘려진 그림 a c d b (B,a) (d,c)

3 필터 효과와 CSS 활용하기 – 필터 그림과 문자에 필터 적용하는 법 필터의 종류 문자와 그림을 꾸며주는 필터
<태그 style= filter:필터종류(세부속성지정)> 필터의 종류 사진에 특수 효과를 주는 필터 gray invert xray chroma 문자와 그림을 꾸며주는 필터 filph filpv alpha blur wave 문자에 주로 사용되는 필터 dropshadow shadow glow

4 필터 효과와 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=투명하게할 색상명)">

5 필터 효과와 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)">

6 필터 효과와 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>