즉 필터수집_HTML/Xhtml_웹페이지 제작

IE는 개발 초기에 우리에게 골칫거리였습니다. 남들이 지원하는 것을 지원하지 않는 것도 있고, 오늘은 그 기능 중 하나인 필터를 간략하게 소개하겠습니다.

　
　CSS 필터는 주로 이미지에 다양한 특수 효과를 적용하는 데 사용됩니다. 이는 웹사이트 제작에 있어서 매우 마법 같은 역할을 합니다. CSS 필터를 통해 웹사이트를 더욱 아름답게 만들 수 있습니다. CSS에서 필터 속성은 텍스트, 그림, 표의 필터 효과를 설정할 수 있습니다.
구문: STYLE={"filter:filtername(fparameter1,fparameter2...)}
참고: Filtername은 필터의 이름이고, fparameter1, fparameter2 등은 필터의 매개변수입니다.
13종의 CSS 필터 거울 효과
1. 필터:chroma - 특수 색상을 투명하게 만듭니다.
구문: STYLE="filter:Chroma(Color=color)"
주석: color:#rrggbb 형식, any .
2. 필터: 흐림 - 고속 이동 효과, 즉 흐림 효과를 만듭니다.
구문: STYLE="filter:Blur(Add=add,Direction=direction,Strength=strength)"
주석: 추가: 일반적으로 1 또는 0; 방향: 각도, 0-315도, 단계는 45도; 강도: 효과 증가 값은 일반적으로 5이면 충분합니다.
3. 필터: FlipV --수직 거울 이미지를 생성합니다.
구문: STYLE="filter:FlipV"
4. 필터: alpha--투명도 수준 설정
구문: STYLE="filter:Alpha(Opacity=opacity,FinishOpacity) =finishopacity,Style=style ,StartX = startX, StartY = startY, FinishX = 종료 스타일: 1 또는 2 또는 3; StartX: 모든 값; StartY: 모든 값
5. 필터: FlipH - 수평 거울 이미지를 만듭니다.
구문: STYLE="filter:FlipH"
6. 필터:glow--근처 개체의 외부에 광선을 추가합니다.
구문: STYLE="filter:Glow(Color=color,Strength=strength) )"
주석: 색상: 광선 색상; 강도: 강도( 0-100)
7. 필터:마스크--객체에 투명 마스크를 만듭니다.
구문: STYLE="filter:Mask( Color=color)"
8. 필터: 필터 :Xray--물체가 X-레이에 의해 조명되는 것처럼 보이도록 합니다.
구문: STYLE="filter: :Invert"
10. 필터: DropShadow -- 개체의 고정 그림자를 생성합니다.
구문: STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=긍정적)"
표시: 색상: #rrggbb 형식 , any; Offx: X축 편차 값; 양수: 1 또는 0.
11. 필터: 회색--그림을 회색조로 바꿉니다.
구문: STYLE="filter :Gray"
12. 필터: 파동 - 파급 효과.
구문: filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase, Strength=strength)
주석: 추가 : 일반적으로 1 또는 0; Freq: 변형 값; LightStrength: 변형 비율; 강도: 변형 강도.
13.shadow--오프셋 고정 그림자 생성.
구문: filter:Shadow( 색상=색상,방향=방향)
주석: 색상: #rrggbb 형식; 방향: 각도, 0-315도, 단계 크기는 45도입니다.
CSS 필터를 사용할 때 주의해야 할 한 가지는 현재 웹사이트 레이아웃에서는 필터가 div에 첨부되는 경우가 많습니다. HTML 코드에서 단순히 div에 대한 ID를 설정하면 필터가 효과적이지 않습니다. 이 id 속성은 스타일이나 CSS에서 정의되어야 합니다. 그렇지 않으면 그렇지 않습니다. 일하다.

홈페이지 제작 시 코드 한 문장으로 PPT 문서처럼 자유롭게 이미지를 전환할 수 있어 매우 간단합니다! 변환하기 전에 먼저 세 가지 기본 코드를 이해해야 합니다.
Rotation: style="filter: progid:DXImageTransform.Microsoft.BasicImage(rotation:1)"
배경색 제거: style="filter:Chroma( Color= #000000)"
그라데이션 색상 설정: style="position:relative;left:0px;top:0px;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ff0000,endcolorstr=#ffff00,gradientType= 1) "
멋진 리뷰: 웹사이트 제작을 위한 CSS 필터 효과 모음
다음은 이미지 변환 필터 모음입니다. 친구들에게 도움이 되었으면 좋겠습니다~! ! !
무작위 변환: progid:DXImageTransform.Microsoft.RevealTrans(enabled=true,transition=23)
정사각형 그라데이션: progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=in)
정사각형 그라데이션 대형 : progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=out)
교차가 점점 작아짐: progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=in)
교차가 점점 커짐: progid : DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=out)
점점 커지는 별 모양: progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=out)
작아지는 별 모양: progid:DXImageTransform . Microsoft.Iris(irisstyle=star,motion=in)
원이 커짐: progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=out)
원이 작아짐: progid:DXImageTransform.Microsoft . Iris(irisstyle=circle,motion=in)
다이아몬드가 작아짐: progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=in)
다이아몬드가 커짐: progid:DXImageTransform.Microsoft.Iris (irisstyle=diamond,motion=out)
더하기 기호가 커짐: progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=out)
더하기 기호가 작아짐: progid:DXImageTransform.Microsoft.Iris (irisstyle=plus, Motion=in)
　위로 지우기: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=up)
　아래로 지우기: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction =down )
　왼쪽으로 지우기: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=left)
　오른쪽으로 지우기: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=right )
왼쪽 및 오른쪽 중간 부분 축소: progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=vertical)
무작위로 디졸브: progid:DXImageTransform.Microsoft.RandomDissolve(enable=true)
확장 중간 부분 위쪽 및 아래쪽: progid:DXImageTransform .Microsoft.Barn(motion=out,orientation=horizontal)
가운데 왼쪽 및 오른쪽 확장: progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=vertical)
무작위 가로선: progid:DXImageTransform.Microsoft.RandomBars( Orientation=horizontal)
무작위 세로선: progid:DXImageTransform.Microsoft.RandomBars(orientation=vertical)
상단 및 하단 중간 축소: progid:DXImageTransform. Microsoft.Barn(motion=in, orientation=horizontal)
표준 그라데이션 변환: BlendTrans(enabled=true,percent=10)
조정 가능한 그라데이션 변환: progid:DXImageTransform.Microsoft.Fade(enabled=ture,overlap= 1.0)
오른쪽 하단에 삽입: progid:DXImageTransform.Microsoft .Inset(enabled=ture)
스트레치 숨기기: progid:DXImageTransform.Microsoft.Stretch(stretchstyle=hide)
푸시 스트레치: progid:DXImageTransform .Microsoft.Stretch(stretchstyle=push)
회전 늘이기: progid:DXImageTransform.Microsoft.Stretch(stretchstyle=spin)
카운터 시계: progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=wedge)
방사선 광선 : progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=radial)
모자이크 효과: progid:DXImageTransform.Microsoft.Pixelate(maxSquare=20)
시계: progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=clock)
사다리 왼쪽 하단: progid:DXImageTransform.Microsoft.Strips(motion=leftdown )
사다리 오른쪽 상단: progid:DXImageTransform.Microsoft.Strips(motion=rightup)
사다리 왼쪽 상단: progid :DXImageTransform.Microsoft.Strips(motion=leftup)
사다리 오른쪽 하단: progid:DXImageTransform.Microsoft.Strips(motion=rightdown)
나선형 수축: progid:DXImageTransform.Microsoft.Spiral(gridSizeX=20 ,gridSizeY=20)
풍차 회전: progid:DXImageTransform.Microsoft.Wheel(spokes=20)
지그재그: progid:DXImageTransform.Microsoft.Zigzag(gridSizeX=20,gridSizeY=20)
H 블라인드: progid:DXImageTransform.Microsoft.Blinds(bands=6, 방향=아래)
: progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=up)
　：progid:DXImageTransform.Microsoft.Blinds(bands= 60,방향=아래)
　：progid:DXImageTransform.Microsoft.Blinds(bands=60,방향=위)
　V 블라인드: progid:DXImageTransform.Microsoft.Blinds(bands=6,방향=오른쪽)
　：progid:DXImageTransform.Microsoft.Blinds(밴드=6,방향=왼쪽)
　　：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=right)
　　：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=left)
　　交换式幻灯picture：progid:DXImageTransform.Microsoft .Slide(slidestyle=swap,bands=1)
　　：progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=20)
　　推动式幻灯文：progid:DXImageTransform.Microsoft.Slide(slidestyle=push ,bands=1)
　　：progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=20)
　　隐藏式幻灯picture：progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=1)
　　：progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=20)
　　模糊推进：progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=forward)
　　：progid :DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=reverse)
　　：progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=forward)
　　：progid:DXImageTransform .Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=reverse)
　　纵向棋盘：progid:DXImageTransform.Microsoft.CheckerBoard(direction=right,squaresX=12,squaresY=12)
　　：progid:DXImageTransform .Microsoft.CheckerBoard(방향=왼쪽,squaresX=12,squaresY=12)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=2,squaresY=2)
　　：progid:DXImageTransform.Microsoft .Checkerboard(direction=left,squaresX=2,squaresY=2)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=60,squaresY=60)
　　：progid:DXImageTransform.Microsoft.Checkerboard (방향=왼쪽,squaresX=60,squaresY=60)
　　横向棋盘：progid:DXImageTransform.Microsoft.CheckerBoard(direction=down,squaresX=12,squaresY=12)
　　：progid:DXImageTransform.Microsoft.CheckerBoard (방향=위,squaresX=12,squaresY=12)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=2,squaresY=2)
　　：progid:DXImageTransform.Microsoft.Checkerboard(방향 =up,squaresX=2,squaresY=2)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=60,squaresY=60)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=up ,사각형X=60,사각형Y=60)