CSS3의 필터 효과 구현 예에 대한 자세한 설명

최근 프로젝트 대부분이 CSS3를 접하게 되었는데, 빌어먹을 IE는 이를 지원하지 않습니다. 검색해 보니 W3C가 필터를 표준화하는 데 시간이 꽤 걸리는 것 같습니다. IE의 필터 효과를 알아보세요. 관심 있는 친구들은 이 기사가 여러분에게 도움이 되기를 바랍니다.

내 최근 프로젝트에는 CSS3가 포함되어 있습니다. IE는 이를 지원하지 않습니다. 검색한 결과 IE의 필터가 꽤 작동하는 것으로 나타났습니다. W3C가 필터를 표준화하고 있는 것 같습니다. 오늘은 IE의 필터 효과(탐색하려면 IE를 사용하십시오)를 정리하고, 내일은 CSS3의 해당 효과(탐색하려면 Webkit 커널을 사용하십시오)를 작성하겠습니다. , 독자들에게 더 좋은 기사가 있고 이를 공유하고 싶다면 웹 프런트엔드 커뮤니케이션 그룹(75701468)에 가입하여 귀하와 나의 경험을 공유하세요.

필터: 투명도 효과

구문: 필터:Alpha(Opacity=opacity,FinishOpacity=finishopacity, Style=style,StartX=startX, StartY=startY, FinishX=finishX, FinishY =finishY)

지침:
불투명도: 시작 값(0~100), 0은 투명, 100은 원본 이미지입니다.
FinishOpacity: 목표값.
스타일: 1 또는 2 또는 3
StartX: 임의의 값
StartY: 임의의 값
FinishX: 임의의 값
FinishY: 임의의 값

일반 투명도 효과: 필터: alpha(opacity=30);

W3C 코드: -webkit-filter:opacity(0.3); 또는 opacity:0.3;

rose

선 유형 투명도: 필터: alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=200, FinishY=180);

W3C 코드: 알 수 없음 ;

장미

방사성: 필터: Alpha(Opacity=0, FinishOpacity=100, Style=2);

W3C 코드 : 알 수 없음;

장미

부드러운 조명 효과 필터:alpha(opacity=100, FinishOpacity=0,style=3);

W3C 코드: 알 수 없음;

Rose

필터: 그림자 효과

구문: 필터:DropShadow (색상=색상, 꺼짐X=꺼짐X, 꺼짐Y=꺼짐Y, 양수=양수)

설명:
색상:#rrggbb 형식, 모두.
Offx: X축 편차 값입니다.
Offy: Y축 오프셋 값입니다.
긍정: "True"인 경우 투명하지 않은 픽셀에 대해 보이는 그림자를 만듭니다. "False"인 경우 투명한 픽셀 부분에 대해 보이는 그림자를 만듭니다.

그림자 효과: filter:progid:dXImageTransform.Microsoft.DropShadow(color=#000000,offX=5,offY=5, positives=true);

W3C 코드: -webkit-filter :drop-shadow(5px 5px 0 #000000); 또는 box-shadow:5px 5px 0 #000;

장미

그림자 효과: progid : DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=10);

W3C 코드: 알 수 없음;

Rose

색상 고려 효과: progid:DXImageTransform.Microsoft.Chroma(color=#59A074);

W3C 코드: 알 수 없음;

장미꽃

모자이크: 필터:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);

W3C 코드: 알 수 없음;

로즈

글로우 효과: filter:progid:dXImageTransform.Microsoft.Glow(color=#000000,Strength=5);

W3C 코드: 알 수 없음;

로즈

가로 뒤집기: 필터: Fliph;

W3C 코드: -webkit-transform:rotateY(180deg);

로즈

세로 뒤집기: 필터: Flipv;

W3C 코드: -webkit-transform:rotateX(180deg);

Rose

반전 효과: 필터: invert;

W3C 코드: -webkit-filter:invert(1);

Rose

흑백 효과: filter:gray;

W3C 코드: -webkit-filter:grayscale(1);

Rose

X선 사진: filter:xray;

W3C 코드: -webkit-filter:grayscale(1) invert(1);

장미

필터: 흐림 효과

구문: 필터:Blur(추가 = 추가, 방향 = 방향, 강도 = 강도 )

설명 :
추가: 이미지가 인상주의적 흐림 효과로 변경되는지 여부를 지정합니다. 1은 true이고 0은 false입니다.
방향: 각도, 0~315도, 단계 크기는 45도입니다.
강도: 흐림의 영향을 받는 너비의 픽셀 수, 기본값은 5픽셀입니다.

바람 흐림(각도 포함): 필터: 흐림(add=true,direction=45,strength=30);

W3C 코드: 없음

Rose

일반 흐림: filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=7);

W3C 코드: -webkit-filter:blur(3px);

Rose

필터: 파급 효과

구문: 필터: Wave(Add=add, Freq =freq, LightStrength= 강도, 위상=단계, 강도=강도)

설명:
추가: 중단할지 여부, 기본값은 "True"입니다.
Freq: 완전한 잔물결이 생성되는 횟수입니다.
LightStrength: 빛과 그림자를 강화합니다. 정수 값은 0~100입니다.
Phase: 사인파의 오프셋으로, 일반적으로 값은 0이며, 범위는 0~100의 정수 값입니다.
강도: 진폭을 나타냅니다.

사인파: 필터: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);

W3C 코드: 알 수 없음;

장미

그라디언트 효과: 필터: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="#000000", EndColorStr="#ffffff")

W3C 코드: background:-webkit-linear-gradient(#000000 0, #ffffff 100%);

[관련 권장사항]

1.CSS3 무료 동영상 튜토리얼

2.

CSS3의 10가지 주요 명령어에 대한 자세한 설명

웹 디자이너가 CSS3 기술을 잘 활용할 수 있는 방법에 대한 간략한 설명

4.

마우스 오버 버튼 효과를 만드는 CSS3

5.

CSS3 RGB 색상 설정 예시

위 내용은 CSS3의 필터 효과 구현 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!