css 필터 기초 튜 토리 얼
2564 단어 css 필터 기초 튜 토리 얼
웹 디자인 기술 의 발전 에 따라 사람들 은 기 존의 HTML 태그 에 만족 하지 않 고 페이지 에 멀티미디어 속성,예 를 들 어 필터 와 그 라 데 이 션 효 과 를 추가 하 기 를 원한 다.CSS 기술 의 급속 한 발전 은 이러한 수 요 를 현실 로 만 들 었 다.지금부터 새로운 CSS 확장 부분 을 소개 하 겠 습 니 다:CSS 필터 속성(Filter Properties).이 기술 을 사용 하면 시각 화 된 필터 와 변환 효 과 를 표준 HTML 요소 에 추가 할 수 있 습 니 다.예 를 들 어 그림,텍스트 용기,그리고 다른 대상 등 입 니 다.필터 와 그 라 데 이 션 효과 에 대해 전 자 는 기본 이 고 후 자 는 필터 효과 의 끊 임 없 는 변화 와 프레젠테이션 교체 이기 때문이다.필터 와 그 라 데 이 션 효과 가 기본 적 인 SCRIPT 애플 릿 에 결합 되면 웹 디자이너 는 동적 인 상호작용 문 서 를 만 드 는 강력 한 도 구 를 가 질 수 있다.바로 CSS FILTER+SCRIPT 입 니 다. 동적 문 서 를 만 들 려 면 SCRIPT(스 크 립 트 언어)의 기반 이 필요 하 다 는 뜻 이다.
정상 적 인 그림
퍼 지 효과 처 리 된 그림 중 어느 것 이 더 예 쁜 것 같 아 요?이 효과 에 도달 하 는 것 은 매우 쉽다.단지 조금 더 넣 었 을 뿐이다.
스스로 시험 해 봐,가짜 가 있 는 지 없 는 지!Photoshop 같은 이미지 소프트웨어 를 사용 하지 마 십시오.간단 한 문법 은 다음 과 같 습 니 다:filter:filter name(parameters) 필터:필터 이름(매개 변수)
시각 화 필터 속성 은 HTML 컨트롤 요소 에 만 사용 할 수 있 습 니 다.HTML 공간 요소 란 페이지 에 사각형 공간 을 정의 하 는 것 입 니 다.브 라 우 저의 창 은 이 공간 을 표시 할 수 있 습 니 다.HTML 의 합 법 적 인 컨트롤 과 설명 을 보 여 줍 니 다.
비고:안 타 깝 게 도 IE 4.0 이상 만 지원 합 니 다.다른 브 라 우 저 라면...
원소
설명 하 다.
BODY
웹 문서 의 주체 요소,모든 보 이 는 범 위 는요소 안에 있 습 니 다.
BUTTON
폼 필드 의 단 추 는'보 내기(submit)','리 셋(reset)'등 형식 으로 할 수 있 습 니 다.
DIV
웹 페이지 의 한 구역 을 정 의 했 습 니 다.이 구역 의 높이,너비 또는 절대 위 치 는 모두 알 수 있 습 니 다.
IMG
그림 요 소 는'src'속성 을 지정 하여 그림 의 출처 를 지정 합 니 다.
INPUT
입력 폼 필드
MARQUEE
이동 자막 효과
SPAN
웹 페이지 의 한 구역 을 정 의 했 습 니 다.이 구역 의 높이,너비 또는 절대 위 치 는 모두 알 수 있 습 니 다.
TABLE
표.
TD
표 데이터 셀
TEXTAREA
텍스트 영역
TFOOT
다 중 입력 텍스트 상자
TH
표 제목 셀
THEAD
표 제목
TR
표 줄
IE 4.0 이상 지원 하 는 필터 속성 표
필터 효과
묘사 하 다.
Alpha
투명도 설정
Blru
퍼 지 효과 만 들 기
Chroma
지정 한 색상 을 투명 으로 설정 합 니 다.
DropShadow
그림자 투사
FlipH
수평 반전
FlipV
수직 반전
Glow
대상 의 외부 경계 에 광 효 과 를 증가 합 니 다.
Grayscale
그림 의 색도 를 낮추다
Invert
색상,포화 도,밝기 값 을 완전히 반전 시 켜 필름 효 과 를 냅 니 다.
Light
한 대상 에 조명 투영 을 하 다.
Mask
하나의 대상 을 위해 투명 막 을 세우다
Shadow
대상 의 고체 윤곽,즉 음영 효과 구축
Wave
X 축 과 Y 축 방향 에서 사인 파문 을 이용 하여 그림 을 흐 트 러 뜨 린 다.
Xray
대상 의 윤곽 만 보이 기