[포토샵을 대신 하는 필터효과]
[ 필터효과 ]
필터효과에 주로 사용되는 태그는 <body>, <div>, <img>, <input>, <marquee>, <span>
<table>, <td>, <textarea> , <th> 등이 있다.
형식 ) <태그 style=filter:필터종류(세부속성지정)>
사용예) <img src="photo.jpg" style=filter:chroma(color=red)">
위의 코드는 그림에서 빨간색을 투명하게 처리한다.
필터의 종류는 다음과 같다.
--------------- 사진에 특수효과를 주는 필터 -------------------------
○ gray
- 컬러 사진을 흑백 사진으로 변환
○ invert
- 그림반전
○ xray
- X-Rray 촬영 사진
○ chroma
- 배경색을 투명하게 해줌
--------------- 문자와 그림을 꾸며주는 필터 -------------------------
○ fliph
- 수평 뒤집기
○ flipv
- 수직 뒤집기
○ alpha
- 그림 경계를 투명하게 해줌
○ blur
- 번짐효과
○ wave
- 물결효과
----------------- 문자에 주로 사용되는 필터 --------------------------
○ dropshadow
- 원하는 위치에 그림자 생성
○ shadow
- 원하는 각도로 번지는 그림자 생성
○ glow
- 외부 광채
----------------------------------------------
사용형식) <img src="그림경로" style="filter:gray()">
<img src="그림경로" style="filter:invert()">
<th style="filter:fliph()">필터로 그림 뒤집기</th>
<태그 style="filter:alpha(속성=값, 속성=값)"> <-- 투명도 조절
---------- alpha 필터로 투명하게 하기 속성-------------
사용예 ) <th style="filter:alpha(opactiy=20,style=1,startx=10,finishx=70,starty=10,finish=70)">내용</th>
○ opactiy
- 불투명도로 값의 범위는 0 ~100
- 0은 완전 투명, 100은 완전 불투명
○ style
- 불투명하게 할 그림의 경계 모양 설정
- style=0: 단일(기본값)
- style=1: 선형
- style=2: 타원형
- style=3: 직사각형
○ finishopacity
- 그림 경계의 불투명도 설정
- 값의 범위는 0 ~ 100
- 경계를 모호하게 하려면 0으로 지정
○ startx
- 불투명도 증감의 x축 시작 좌표
○ starty
- 불투명도 증감의 y축 시작 좌표
○ finishx
- 불투명도 증감의 x축 끝 좌표
○ finishy
- 불투명도 증감의 y축 끝 좌표
------------------------- blur 필터로 번짐 효과 주기 속성-------------------
사용예) <th style="filter:blur(direction=135,strength=7)">내용</th>
○ add
- 원본 그림과 효과가 적용된 그림을 겹칠지 여부 설정
- 1또는 true: 겹쳐서 표현, 기본 값
- 0 또는 false : 겹쳐서 표현하지 않고 효과가 적용된 그림만 보여줌
○ direction
- 번짐 방향을 시계방향으로 설정
- 각도 값 : 0, 45, 90, 125, 225, 270, 315
○ strength
- 번짐 강도 설정
- 0 ~ 100 : 수치가 높을수록 번짐 강도가 높음
------------------------- wave 필터로 물결효과 속성-------------------
사용예) <th style="filter:wave(strength=3,freq=4,lightstrength=2,phase=4,add=1)">wave 필터로 물결효과 주기</th>
○ add
- 0또는 false: 효과를 적용한 그림만 보여줌
- 1또는 true: 효과를 적용한 그림과 원본 그림을 겹쳐서 포현
○ freq
- wave의 개수 지정
○ lightstrength
- 효과의 빛의 강도를 0 ~ 100 범위 값으로 지정
○ phase
- Sin 웨이브 효과의 시작 위치를 0 ~ 100 범위 값으로 지정
○ strength
- 웨이브의 강도를 0 ~ 100 범위 값으로 지정
------------------ dropshadow 필터로 원하는 위치에 그림자 만들기-------------------
사용예) <p style="filter:dropshadow(color=gray, offx=3,offy=3,position=0)">DropShadow</p>
○ color
- 그림자 색상 지정
○ offx
- 그림자의 x축 거리를 표현하는 픽셀 값
○ offy
- 그림자의 y축 거리를 표현하는 픽셀 값
○ position
- 그림자 효과를 적용할 곳을 설정, 입력 값은 0(false)또는 1(true)
------------------- shadow 필터로 원하는 각도로 번지는 그림자 만들기 --------------------
사용예) <p style="filter:shadow(color=green,direction=135">Shadow</p>
○ color
- 그림자 색상 지정
○ direction
- 그림자의 방향을 시계 방향으로 설정
- 각도 값 : 0, 45, 90, 135, 180, 225, 270, 315
---------------------- glow 필터로 문자에 광채주기 ----------------------------
사용예) <p style="filter:glow(color=red,strength=5)">내용</p>
○ color
- 광채 색상 지정
○ strength
- 번짐 정보를 1 ~ 100 범위로 지정
- 값이 노을 수록 번짐 강도가 높아짐
'CSS > Style 함수' 카테고리의 다른 글
| css 우선 순위 강제 설정 !important (0) | 2015.11.12 |
|---|---|
| CSS : white-space: pre-line 자동줄바꿈 관련 (0) | 2015.11.06 |
| Style padding (0) | 2015.10.16 |
| max-width (0) | 2015.03.18 |
nineDeveloper
안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!