[CSS]필터를 활용하자 - 포토샵 필터 적용 예시
1. alpha 필터 적용 예시
◐ 효과 : 대상의 투명한 정도를 나타낸다.
◈ 이미지 적용 태그예시 ▼
<img src="이미지" style="FILTER: alpha(opacity=100, style=2, finishopacity=0)">
◈ 텍스트에 적용시키는 태그예시 ▽
<DIV style="width:180; height:15; font-size:15pt; filter:alpha(opacity=50, style=2, finishopacity=0)">인터넷 휴게소</DIV>
2. blur 필터 적용 예시
◐ 효과 : 빠르게 움직이는 피사체를 촬영한 효과
◈ 이미지 적용 태그예시 ▼
<img src="이미지" style="filter:blur(direction=135,strength=100)">
◈ 텍스트에 적용시키는 태그예시 ▽
<DIV style="width:180; height:15; font-size:15pt; font-weight:700; filter:blur(direction=135,strength=30)">인터넷 휴게소</DIV>
3. Chroma 필터 적용 예시
◐ 효과 : 특정색상을 투명처리
◈ 이미지 적용 태그예시 ▼
<img src="이미지" style="filter:Chroma(color=#ff0000)">
◈ 텍스트에 적용시키는 태그예시 ▽
<DIV style="width:180; height:15; background:black; font-size:15pt; filter:Chroma(color=yellow)">인터넷 휴게소</DIV>
4. dropshadow 필터 적용 예시
◐ 효과 : 대상에 그림자 효과를 준다.
◈ 이미지 적용 태그예시 ▼
이 Dropshadow 필터는 이미지에는 적용이 되지 않는다. 단, 바탕을 투명하게 처리한 .gif 이미지에는 적용
◈ 텍스트에 적용시키는 태그예시 ▽
<DIV style="width:180; height:15; font-size:15pt; filter:dropshadow(color=gray, offx=3, offy=3, positive=1)">인터넷 휴게소</DIV>
5. FlipH 와 FlipV 필터 적용 예시
◐ 효과 : FlipH : 대상이 수평방향으로 반사되어 비치는 효과
FlipV : 대상이 수직방향으로 반사되어 비치는 효과
◈ 이미지 적용 태그예시 ▼
① <img src="이미지" style="filter:FlipH()">
② <img src="이미지" style="filter:FlipV()">
◈ 텍스트에 적용시키는 태그예시 ▽
① <DIV style="width:180; height:15; font-size:15pt; font-weight:700; filter:FlipH()">인터넷 휴게소</DIV>
② <DIV style="width:180; height:15; font-size:15pt; font-weight:700; filter:Flipv()">인터넷 휴게소</DIV>
6. Glow 필터 적용 예시
◐ 효과 : 객체의 경계선 바깥쪽에다 색번짐 효과를 준다
◈ 이미지 적용 태그예시 ▼
<img src="이미지" style="filter:glow(color=blue, strength=15)">
※ 이미지에 적용은 바탕을 투명하게 처리한 .gif 형식에만 적용이 됩니다.
◈ 텍스트에 적용시키는 태그예시 ▽
<DIV style="width:180; height:15; font-size:15pt; font-weight:700; filter:glow(color=cornflowerblue, strength=8)">인터넷 휴게소</DIV>
7. GrayScale 필터 적용 예시
◐ 효과 : 대상을 회색계열(흑백)으로 표현한다.
◈ 이미지 적용 태그예시 ▼
<img src="이미지" style="filter:gray()">
◈ 텍스트에 적용시키는 태그예시 ▽
<DIV style="width:180; height:20; font-size:15pt; font-weight:700; filter:gray()">인터넷 휴게소</DIV> | 
오렌지
