CSS 필터 효과의 본질

html 샘플 코드와 그에 포함된 CSS 코드는 다음과 같습니다. 여기에 사용된 그림은 fd.jpg 입니다. 코드를 복사하고 그림 이름을 fd.jpg로 지정하면 전체 효과를 볼 수 있습니다.

<머리>







<스타일 유형="텍스트/css">
.alphas
{
필터:알파(불투명도=0,finishopacity=100,style=1,startx=0,starty=85,finishx=150,finishy=85);
}
.블러
{
글꼴 모음:lucida handwirting italic;
글꼴 크기:72px;
글꼴 스타일:굵게;
색상:#336600;
width:350px;/*이 속성은 필수입니다. 그렇지 않으면 효과가 표시되지 않습니다*/
필터:blur(추가=true,방향=90,강도=25);
}
.chromas
{
글꼴 모음:lucida handwirting italic;
글꼴 크기:72px;
글꼴 스타일:굵게;
색상: 빨간색;
너비:350px;
필터:chroma(색상=빨간색);
}
.dropshadows
{
글꼴 모음:lucida handwirting italic;
글꼴 크기:72px;
글꼴 스타일:굵게;
색상:#336600;
너비:350px;
필터:dropshadow(색상=빨간색,offx=15,offy=10,긍정적=1);
}
.fliphs
{
글꼴 모음:lucida handwirting italic;
글꼴 크기:72px;
글꼴 스타일:굵게;
색상:#336600;
너비:350px;
필터:플립;
}
.flipvs
{
글꼴 모음:lucida handwirting italic;
글꼴 크기:72px;
글꼴 스타일:굵게;
색상:#336600;
너비:350px;
필터:flipv;
}
.빛남
{
글꼴 모음:lucida handwirting italic;
글꼴 크기:72px;
글꼴 스타일:굵게;
색상:#336600;
너비:350px;
필터:빛(색상=파란색,강도=15);
}
.그레이
{
글꼴 모음:lucida handwirting italic;
글꼴 크기:72px;
글꼴 스타일:굵게;
색상:#336600;
너비:350px;
필터:회색;
}
.반전
{
글꼴 모음:lucida handwirting italic;
글꼴 크기:72px;
글꼴 스타일:굵게;
색상:#336600;
너비:350px;
필터:반전;
}
.마스크
{
글꼴 모음:lucida handwirting italic;
글꼴 크기:72px;
글꼴 스타일:굵게;
색상:#336600;
너비:350px;
필터:마스크(색상=녹색);
}
.그림자
{
글꼴 모음:lucida handwirting italic;
글꼴 크기:72px;
글꼴 스타일:굵게;
색상:#336600;
너비:350px;
필터:그림자(색상=빨간색,방향=225);
}
.파도
{
글꼴 모음:lucida handwirting italic;
글꼴 크기:72px;
글꼴 스타일:굵게;
색상:#336600;
너비:350px;
필터:wave(추가=true, 주파수=3, 조명 강도=100, 위상=45, 강도=20);
}
.엑스레이
{
글꼴 모음:lucida handwirting italic;
글꼴 크기:72px;
글꼴 스타일:굵게;
색상:#336600;
너비:350px;
필터:엑스레이;
}



<본문>
<테이블 너비=1000 테두리=1>
필터 속성설명매개변수 및 값효과 예
알파투명도 효과 설정불투명도: 투명도 수준, 0~100, 0은 완전히 투명함

스타일: 투명 영역의 모양 특성을 지정합니다. 0은 균일 분포, 2는 방사형, 3은 직사각형입니다.
마감도: 그라디언트 효과를 얻기 위해 그라디언트 끝의 투명도를 설정합니다. 0에서 100까지

startX, startY: 그라디언트 투명 효과의 시작 좌표
finishX, FinishY: 그라디언트 투명 효과의 끝 좌표

예 < /div>
DropShadow오프셋 이미지 윤곽선 생성, 즉 그림자 투사color: 투영 색상
offx, offy: 그림자 x, y 방향 오프셋

긍정: true는 불투명 픽셀에 대한 그림자를 만들고, false는 투명한 픽셀에 대한 그림자를 만듭니다.

dropshadow 예

FlipH가로 뒤집기없음

가로 뒤집기

< /tr>
FlipV세로 뒤집기없음

세로 뒤집기

< /tr>
글로우객체의 외부 경계에 조명 효과 추가color: 조명의 색상을 지정합니다

강도: 광도

GLOW 예

회색이미지 색상을 줄여 회색조로 변환없음
반전색상, 채도 및 밝기 값을 완전히 반전시켜 부정적인 효과를 만듭니다.없음
빛물체에 빛 투사아니요아니요
마스크객체에 대한 투명 마스크 만들기color: 마스크 색상 지정

마스크 예

그림자객체의 실선 윤곽 설정, 즉 그림자 효과색상: 투사 색상
방향: 투사 방향 < div class="shadows">SHADOW 예

WAVE 예
Xray객체의 윤곽선만 표시없음