웹프로그래밍/css

필터 효과

zelkova 2011. 2. 18. 18:40
<목차로 돌아가기>

 사진에 특수효과를 주는 필터

 

 gray  컬러 사진을 흑백 사진으로 변환
 invert  그림 반전
 xray  X-Ray 촬영사진
 chroma  배경색을 투명하게 해줌
 문자와 그림을 꾸며주는 필터  
 pliph  수평 뒤집기
 flipv  수직 뒤집기
 alpha  그림 경계를 투명하게 해줌
 blur  번짐 효과
 waver  물결 효과
 문자에 주로 사용되는 필터  
 dropshadow  원한느 위치에 그림자 생성
 shadow  원하는 각도로 번지는 그림자 생성
 glow  외부 광채

<span style="filter: blur(add=false, direction=135, strength=6); font-size:20pt;width:200px;">Blur Filter</span>

alpha 필터의 속성

 속성

 설명

 opacitiy  불투명도로 값의 범위는 0~100(기본 값은 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 필터의 속성
 속성  설명
 add  원본 그림과 효과가 적용된 그림을 겹칠지 여부 설정
 1 또는 true; 겹쳐서 표현, 기본값
 0 또는 false; 겹쳐서 표현하지 않고 효과가 적용된 그림만 보여줌
 direction   번짐 방향을 시계 방향으로 설정
  각도 값: 0, 45, 90, 135, 180, 225, 270, 315
 strength   번짐 강도 설정
  0~100: 수치가 높을수록 번짐 강도가 높음


wave 필터의 속성

 속성

 설명

 add  0 또는 false: 효과를 적용한 그림만 보여줌
 1 또는 true; 효과를 적용한 그림만 보여줌
 freq   wave 개수 지정
 lightstrength   wave 효과의 빛의 강도를 0~100범위 값으로 지정
 phase   Sin 웨이브 효과의 시작 위치를 0~100범위 값으로 지정
 strength   웨이브 강도를 0~100 범위 값으로 지정

dropshadow 필터의 속성

 속성

 설명

 color  그림자 색상 지정
 offx  그림자의 x축 거기를 표현하는 픽셀 값
 offy  그림자의 y축 거리를 표현하는 픽셀 값
 position  그림자 효과를 적용할 곳을 설정, 입력 값은 0(false) 또는 1(true)

shadow필터의 속성

 속성

 설명

 color  그림자 색상 지정
 direction  그림자의 방향을 시계 방향으로 설정
 각도 값: 0, 45, 90, 135, 180, 225, 270, 315


glow 필터의 속성

 속성

 설명

 color  곽채 색상 지정
 strength  번짐 강도를 1~100 범위로 지정
 값이 높을수록 번짐 강도가 높아짐



반응형

'웹프로그래밍 > css' 카테고리의 다른 글

CSS선택자  (0) 2014.07.25
CSS - 메뉴 제작하기  (0) 2014.06.09
레이어  (0) 2011.02.18
마우스 커서 모양  (0) 2011.02.17
배경 그림 다루기  (0) 2011.02.13