html 샘플 코드와 그에 포함된 CSS 코드는 다음과 같습니다. 여기에 사용된 그림은 fd.jpg 입니다. 코드를 복사하고 그림 이름을 fd.jpg로 지정하면 전체 효과를 볼 수 있습니다.
<!DOCTYPE HTML PUBLIC "- //W3C //DTD HTML 4.01 전환//EN">
<html>
<머리>
<title>CSS 필터 효과.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="이것은 내 페이지입니다">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<스타일 유형="텍스트/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;
필터:엑스레이;
}
</style>
</head>
<본문>
<테이블 너비=1000 테두리=1>
<tr><td width=100>필터 속성</td><td width=100>설명</td><td width=400>매개변수 및 값</td><td width=400>효과 예</td ></tr>
<tr><td><span class=alpha>알파</span></td><td>투명도 효과 설정</td><td>불투명도: 투명도 수준, 0~100, 0은 완전히 투명함<br>
스타일: 투명 영역의 모양 특성을 지정합니다. 0은 균일 분포, 2는 방사형, 3은 직사각형입니다.<br>마감도: 그라디언트 효과를 얻기 위해 그라디언트 끝의 투명도를 설정합니다. 0에서 100까지<br>
startX, startY: 그라디언트 투명 효과의 시작 좌표<br>finishX, FinishY: 그라디언트 투명 효과의 끝 좌표</td><td><p><img src="fd.jpg" class="alphas"/ ></p ></td></tr>
<tr><td>흐림</td><td>흐림 효과 만들기</td><td>추가: 사진을 흐림 효과로 변경해야 하는지 여부를 true 또는 false로 지정합니다.<br>
방향: 흐림 방향을 설정합니다. 0도는 수직 위쪽을 의미하고, 45도마다 1단위이며, 기본값은 왼쪽으로 270도입니다.<br>강도: 흐림의 영향을 받는 너비의 픽셀 수를 나타내며, 기본값은 5입니다. /td>
<td><div class="blrs">행운을 빌어요!</div></td></tr>
<tr><td>채도</td><td>지정된 색상을 투명으로 설정</td><td>색상: 투명 색상 지정</td><td>chroma<div class="chromas">예 < /div></td></tr>
<tr><td>DropShadow</td><td>오프셋 이미지 윤곽선 생성, 즉 그림자 투사</td><td>color: 투영 색상<br>offx, offy: 그림자 x, y 방향 오프셋<br>
긍정: true는 불투명 픽셀에 대한 그림자를 만들고, false는 투명한 픽셀에 대한 그림자를 만듭니다.</td><td><div class="dropshadows">dropshadow 예</div></td></tr>
<tr><td>FlipH</td><td>가로 뒤집기</td><td>없음</td><td><div class="fliphs">가로 뒤집기</div></td >< /tr>
<tr><td>FlipV</td><td>세로 뒤집기</td><td>없음</td><td><div class="flipvs">세로 뒤집기</div></td >< /tr>
<tr><td>글로우</td><td>객체의 외부 경계에 조명 효과 추가</td><td>color: 조명의 색상을 지정합니다<br>
강도: 광도</td><td><div class="glows">GLOW 예</div></td></tr>
<tr><td>회색</td><td>이미지 색상을 줄여 회색조로 변환</td><td>없음</td><td><img src="fd.jpg" 클래스 ="회색"/></td></tr>
<tr><td>반전</td><td>색상, 채도 및 밝기 값을 완전히 반전시켜 부정적인 효과를 만듭니다.</td><td>없음</td><td><img src="fd .jpg" class="inverts"/></td></tr>
<tr><td>빛</td><td>물체에 빛 투사</td><td>아니요</td><td>아니요</td></tr>
<tr><td>마스크</td><td>객체에 대한 투명 마스크 만들기</td><td>color: 마스크 색상 지정</td><td><div class="masks" >마스크 예</div></td></tr>
<tr><td>그림자</td><td>객체의 실선 윤곽 설정, 즉 그림자 효과</td><td>색상: 투사 색상<br>방향: 투사 방향</td> <td>< div class="shadows">SHADOW 예</div></td></tr>
<tr><td>파동</td><td>정현파 잔물결을 사용하여 X축 및 Y축 방향의 이미지를 방해합니다.</td><td>add: true는 이미지를 파도로 방해하는 것을 의미하고 false는 그렇지 않음을 의미합니다. 방해<br >
freq: 잔물결이 발생하는 빈도(잔물결이 몇 개나 발생하는지)<br>lightstrength: 잔물결이 발생하는 효과를 강화합니다(값은 0~100)<br>
위상: 사인파의 시작 부분에 오프셋을 설정합니다. 일반적으로 0에서 최대 100까지입니다.<br>강도: 사인파의 진폭을 설정</td><td><div class="waves">WAVE 예</ div> </ td></tr>
<tr><td>Xray</td><td>객체의 윤곽선만 표시</td><td>없음</td><td><img src="fd.jpg" class="xrays" /> </td></tr>
</table>
</body>
</html>