| - Alpha 효과 - | |||
 |
|
|
|
| 원본 이미지 | style=1 | style=2 | style=3 |
style=1 - <img src="이미지주소" style="filter:alpha(style=1, opacity=100, finishopacity=0)">
style=2 - <img src="이미지주소" style="filter:alpha(style=1, opacity=100, finishopacity=0)">
style=3 - <img src="이미지주소" style="filter:alpha(style=1, opacity=100, finishopacity=0)">
여기서 opacity=100 숫자가 낮아 질수록 투명해지고 숫자가 높을수록 원본과 가까워진다.
| - Blue 효과 - | |||
| |
|
|
|
|
direction=45,strength=100 |
direction=90,strength=100 |
direction=135,strength=100 |
direction=225,strength=100 |
- 소스 -
<img src="이미지주소" style="filter:blur(direction=45,strength=100)">
direction - 흐리게 하는 방향을 지정해준다 (시계 방향으로 각도를 입력
strength - 수치가 낮을수록 투명해지고 수치가 클수록 원본 이미지에 가까워진다
|
- Gray 효과 - | |
 |
|
|
원본이미지 |
적용시켰을 떄 |
- 소스 -
<img src="이미지주소" style="filter:gray()">
|
- fliph, flipv 효과 - | ||
|
|
|
|
원본이미지 |
fliph |
flipv |
- 소스 -
<img src="이미지주소" style="filter:fliph()">
<img src="이미지주소" style="filter:flipv()">
fliph - 이미지의 좌우 바꾸기
flipv - 이미지의 상하 바꾸기
|
- invert 효과 - | |
|
|
|
원본 이미지 |
효과 적용시 |
- 소스 -
<img src="이미지주소" style="filter:invert()">
명도와 채도의 색을 반대로 바꿔준다
|
- fliph, flipv 효과 - | ||
|
|
|
|
원본이미지 |
|
|
- 소스 -
1 -<img src="http://oxtag.com/zboard/data/gallery/baby_4.jpg" width="141" height="173" style="filter:wave(strength=8,freq=2,lightstrength=10,phase=50,add=0)">
2 - <img src="http://oxtag.com/zboard/data/gallery/baby_4.jpg" width="141" height="173" style="FILTER: wave(strength=5,freq=25,lightstrength=10,phase=50,add=0)">
strength - 웨이브의 강도
freq -웨이브의 갯수
lightstrength - 빛의 강도
phase -웨이브가 시작될 위치를 지정해준다
add - 원본 이미지를 합칠 경우에는 0 아닐 경우에는 1
| - xray 효과 - | |
| |
|
| 원본 이미지 | 효과 적용 |
- 소스 -
<img src="이미지주소" style="FILTER: xray()">
'인터넷관련' 카테고리의 다른 글
| 이미지 안쓰고 모서리(테두리) 둥근 테이블 만들기 (0) | 2008.02.02 |
|---|---|
| 스포트라이트 효과 (0) | 2008.02.02 |
| PNG 그림파일 알파값 살리기 (0) | 2008.02.02 |
| 팝업창에 관한 모든것(새창) (0) | 2008.02.02 |
| 랜덤으로 스트라이핑 효과내기 (0) | 2008.02.02 |
| 이미지 웨이브 (0) | 2008.02.02 |
| 이미지에 마우스 올리면 선명해지게 (0) | 2008.02.02 |
| 이미지위에 마우스커서 올리면 흔들리게 하는 효과 (0) | 2008.02.02 |
