텍스트와 이미지에 몇가지 필터를 적용한 예
아래의 예제에서 사용된 이미지 파일
.........................................................................................................................................................................................................................................................................
아래의 예제에서 사용된 이미지 파일
<html><head><title>문자와 이미지 특수 효과</title>
</head>
<body>
<center><h2 >문자와 이미지를 꾸며주는 필터</h2>
<p> 기본글자와 원본사진<img src="p-51.jpg"></p>
<p style="filter:dropshadow(color=#aaaaaa,offx=5,offy=5,positive=1); width:400px; height:30px;
font-weight:bolder; font-size:20pt;">그림자가 형상으로부터 떨어져 있다</p>
<div style="width:250px;padding:10px;filter:shadow(color:gray,
strength:10, direction:150); font-weight:bolder; font-size:20pt;">
그림자가 길게 늘어져 있다</div>
<p style="filter:glow(color=yellow,strength=3);width:300px; height:30px;">아우디</p>
</head>
<body>
<center><h2 >문자와 이미지를 꾸며주는 필터</h2>
<p> 기본글자와 원본사진<img src="p-51.jpg"></p>
<p style="filter:dropshadow(color=#aaaaaa,offx=5,offy=5,positive=1); width:400px; height:30px;
font-weight:bolder; font-size:20pt;">그림자가 형상으로부터 떨어져 있다</p>
<div style="width:250px;padding:10px;filter:shadow(color:gray,
strength:10, direction:150); font-weight:bolder; font-size:20pt;">
그림자가 길게 늘어져 있다</div>
<p style="filter:glow(color=yellow,strength=3);width:300px; height:30px;">아우디</p>
<p>
<span style="filter:fliph(); width:100%">filph 필터로 이미지 뒤집기(좌우)</span>
<img src="p-51.jpg" style="filter:fliph()"></p>
<p>
<span style="filter:flipv(); width:100%">filpv 필터로 이미지 뒤집기(상하)</span>
<img src="p-51.jpg" style="filter:flipv()"></p>
<p>
<span style="filter:alpha (opacity=255,style=2,finishopacity=0); width:100%">alpha 필터로 이미지 경계를 투명하게 하기</span>
<img src="p-51.jpg" style="filter:alpha (opacity=255,style=2,finishopacity=0)"></p>
<p>
<span style="filter:blur(direction=135,strength=15,add=1); width:100%">blur 필터로 번짐 효과주기</span>
<img src="p-51.jpg" style="filter:blur(direction=135,strength=15,add=1)"></p>
<p>
<span style="filter:Wave(freq=1, light=50, phase=10, strength=5); width:50%;">필터로 물결효과 주기</span>
<img src="p-51.jpg" style="filter:wave(Add=0, Freq=5, LightStrength=10, Phase=10, Strength=10)"></p>
<p>
<span style="filter:fliph(); width:100%">filph 필터로 이미지 뒤집기(좌우)</span>
<img src="p-51.jpg" style="filter:fliph()"></p>
<p>
<span style="filter:flipv(); width:100%">filpv 필터로 이미지 뒤집기(상하)</span>
<img src="p-51.jpg" style="filter:flipv()"></p>
<p>
<span style="filter:alpha (opacity=255,style=2,finishopacity=0); width:100%">alpha 필터로 이미지 경계를 투명하게 하기</span>
<img src="p-51.jpg" style="filter:alpha (opacity=255,style=2,finishopacity=0)"></p>
<p>
<span style="filter:blur(direction=135,strength=15,add=1); width:100%">blur 필터로 번짐 효과주기</span>
<img src="p-51.jpg" style="filter:blur(direction=135,strength=15,add=1)"></p>
<p>
<span style="filter:Wave(freq=1, light=50, phase=10, strength=5); width:50%;">필터로 물결효과 주기</span>
<img src="p-51.jpg" style="filter:wave(Add=0, Freq=5, LightStrength=10, Phase=10, Strength=10)"></p>
<p>
<img src="p-51.jpg" style="filter:gray();"><p>
컬러 이미지를 흑백으로 변환하는 필터<br>
</center>
</body>
</html>
컬러 이미지를 흑백으로 변환하는 필터<br>
</center>
</body>
</html>
.........................................................................................................................................................................................................................................................................
문자와 이미지를 꾸며주는 필터
기본글자와 원본사진
그림자가 형상으로부터 떨어져 있다
그림자가 길게 늘어져 있다
아우디
filph 필터로 이미지 뒤집기(좌우)
filpv 필터로 이미지 뒤집기(상하)
alpha 필터로 이미지 경계를 투명하게 하기
blur 필터로 번짐 효과주기
필터로 물결효과 주기
컬러 이미지를 흑백으로 변환하는 필터