CSS 튜토리얼(7) 필터

CSS는 내장된 멀티미디어 필터 효과를 제공합니다. 이 기술을 사용하면 이미지, 텍스트 컨테이너 및 기타 개체와 같은 표준 HTML 요소에 시각적 필터 및 변환 효과를 추가할 수 있습니다. Dreamweaver4는 아래와 같이 선택할 수 있는 16개의 필터를 제공합니다.

다음으로 Dreamweaver4에서 이러한 CSS 필터를 편리하게 사용하는 방법을 살펴보겠습니다.

사용자 정의 스타일 ".filter"를 만들고 필터 드롭다운 상자에서 알파 필터를 선택하면 "Alpha(Opacity=?, FinishOpacity=?, style=?, StartX=?, StartY= ? , FinishX=?, FinishY=?)"는 아래와 같이 Opacity 매개변수를 50으로 설정하고 모든 후속 매개변수를 삭제합니다.

확인을 누르면 ".filter"라는 사용자 정의 스타일이 생성됩니다. 이 스타일을 이미지에 적용하면 이미지가 반투명해집니다. 이 스타일을 표에 적용하면 표도 반투명해집니다. 모든 필터 효과는 브라우저에서만 볼 수 있습니다. 다음은 원본 코드입니다:



참고: 이 예에서는 다음 매개변수를 사용하지 않고 불투명도 매개변수만 사용했습니다. 다른 매개변수를 삭제하세요.

각 필터의 ​​효과와 매개변수를 설명해 보겠습니다.

1. 알파: 투명도 설정

Alpha(Opacity=?, FinishOpacity=?, style=? , StartX= ?, StartY=?, FinishX=?, FinishY=?)

불투명도: 투명도 수준, 범위는 0-100, 0은 완전히 투명함을 나타내고 100은 완전히 불투명함을 나타냅니다.

FinishOpacity: 그라디언트의 투명도 효과를 설정할 때 마지막에 투명도를 지정하는 데 사용되며 범위도 0~100입니다.

스타일: 그라디언트 투명도 스타일을 설정합니다. 값 0은 균일한 모양을 나타내고, 1은 선형 모양을 나타내고, 2는 방사형 모양을 나타내고, 3은 직사각형을 나타냅니다.

StartX 및 StartY: 그라데이션 투명도 효과의 시작 X 및 Y 좌표를 나타냅니다.

FinishX 및 FinishY: 그라데이션 투명 효과 끝의 X 및 Y 좌표를 나타냅니다.

2. BlendTrans: 이미지 간 페이드인 및 페이드아웃 효과

BlendTrans(Duration=?)

기간: 페이드인 또는 페이드아웃 시간.

참고: 사진 사이에 효과를 만들려면 JS와 함께 이 필터를 사용하여 사진 시퀀스를 만들어야 합니다.

3. Blur: 블러 효과 만들기

Blur(Add=?, Direction=?, Strength=?)

Add: 한 방향으로 블러할지 여부, 매개변수는 부울 값, true(0 아님) 또는 false(0)입니다.

방향: 흐림 방향을 설정합니다. 여기서 0도는 수직 위쪽을 나타내고 45도마다 단위가 됩니다.

강도: 흐릿한 픽셀 값을 나타냅니다.

4. Chroma : 지정한 색상을 투명하게 설정합니다.

Chroma(Color=?)

Color : 투명하게 설정할 색상을 말합니다.

5. DropShadow: 그림자 효과 만들기

DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

Color: 색상을 지정합니다. 그림자.

OffX: 요소를 기준으로 그림자의 수평 오프셋을 정수로 지정합니다.

OffY: 요소를 기준으로 그림자의 수직 오프셋을 정수로 지정합니다.

양수: 부울 값입니다. 값이 true(0이 아님)이면 외부 그림자를 설정한다는 의미이고, false(0)이면 내부 그림자를 설정한다는 의미입니다.

6. FlipH: 요소를 수평으로 뒤집습니다

7. FlipV: 요소를 수직으로 뒤집습니다

8. Glow: 외부 광선 효과 만들기

(Color=?, Strength=?)

Color: 빛의 색상을 지정합니다. 강도: 빛의 강도. 1에서 255 사이의 정수일 수 있습니다. 숫자가 클수록 빛의 범위가 넓어집니다.

9. 회색: 이미지의 색상을 제거하고 흑백 이미지로 표시합니다

10. 반전: 이미지의 색상을 반전시켜 영화 같은 효과를 연출합니다

11. 조명: 광원을 배치하는 효과로, 물체에 광원의 투영 효과를 시뮬레이션하는 데 사용할 수 있습니다.

참고: 이 효과를 사용하려면 JS에서 위치와 강도를 설정해야 합니다. 빛의.

12. 마스크 : 투명한 마스크를 생성합니다

마스크(Color=?)

색상 : 배경을 덮고 있는 물체의 부분을 투명하게 하기 위한 배경색을 설정합니다.

13. RevealTrans: 전환 효과 만들기

RevealTrans(Duration=?, Transition=?)

Duration: 초 단위의 전환 시간입니다.

전환: 전환 방식이며 0~23까지 설정할 수 있습니다.

참고: 페이지 간에 전환하려면 영역에 다음 코드 줄을 추가할 수 있습니다. . 요소가 페이지에서 사용되는 경우 JS와 함께 사용해야 합니다.

14. 그림자: 또 다른 그림자 효과 만들기

그림자(색상=?, 방향=?)

색상: 그림자의 색상을 말합니다.

방향: 투영 방향을 설정합니다. 0도는 수직 위쪽을 의미하고 45도마다 하나의 단위입니다.

15. Wave: 파급 효과

Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)

Add: 여부를 ​​나타냅니다. 원본 객체를 표시하고, 0은 표시하지 않음을 의미하고, 0이 아닌 경우 원본 객체를 표시함을 의미합니다.

Freq: 변동 횟수를 설정합니다.

LightStrength: 파도 효과의 빛 강도를 0에서 100까지 설정합니다. 0은 가장 약한 것을 의미하고 100은 가장 강한 것을 의미합니다.

위상: 파동의 초기 위상 각도입니다. 0에서 100까지의 백분율 값입니다. (예: 25는 90도에 해당하고, 50은 180도에 해당합니다.)

강도: 파도 스윙의 진폭을 설정합니다.

16. Xray: 사진의 윤곽선 표시, X-ray 효과

참고: CSS 필터를 사용할 때는 표, 그림 등 영역이 있는 요소를 사용해야 합니다. 텍스트나 단락과 같이 영역이 없는 요소는 CSS 필터를 사용할 수 없습니다. 이러한 요소의 경우 이를 달성하기 위해 요소의 높이 및 너비 스타일이나 좌표를 설정할 수 있습니다.

아래 예를 보면 텍스트 줄에 그림자 효과(dropshadow)를 만들고 새 사용자 정의 style.shadow를 만든 다음 "DropShadow(Color=?, OffX=?, OffY=? ,) 필터 드롭다운 상자에서 Positive=?)", "DropShadow(Color=999999, OffX=2, OffY=2, Positive=1)"로 설정합니다. 그런 다음 정의된 스타일을 페이지에 적용합니다. 표의 텍스트에는 그림자가 있지만 단락의 텍스트에는 그림자가 없습니다. CSS 스타일 패널에서 스타일 시트 편집 버튼을 클릭하고 스타일에 Hight 속성을 추가합니다.

원본 개체의 높이에 영향을 주지 않기 위해 설정한 높이는 글꼴 자체의 높이를 초과할 수 없습니다. . 확인 후 브라우저에서 단락의 텍스트에도 그림자가 있는 것을 볼 수 있습니다.

위 내용은 CSS 튜토리얼(7) 필터의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!