CSS filter 속성은 스타일링 바로 가기처럼 보입니다: 한 줄로 사진이 흑백으로 바뀌고,배경이 흐려지거나 축소판이 따뜻해지며,이미지 편집기가 관여하지 않습니다. 그것은 바로. 또한 브라우저가 적용되는 요소를 배치하고 레이어하는 방식을 변경하기 때문에 호버 효과를 위해 추가 된 필터는 드롭 다운을 조용히 세 가지 구성 요소로 나눌 수 있습니다.
이 가이드는 각 필터 기능이 픽셀 값에 대해 수행하는 작업, 동일한 기능을 다른 순서로 수행하면 다른 이미지가 생성되는 이유, 레이아웃 및 애니메이션에서 필터가 작동하는 방식, 성능이 저하되는 무료 기능을 사용합니다 CSS 필터 생성기 선언을 작성하려면 모든 예제가 일반 CSS이므로 어디에나 붙여넣을 수 있습니다.
TL;DR: CSS
filter속성은 흐림,밝기, 대비,회색조, 세피아,포화도, 반전,색조 회전 및 불투명도와 같은 그래픽 효과를 요소와 그 안에 있는 모든 것에 적용하며,함수가 쓰여진 순서대로 이외의 모든 값none또한 스태킹 컨텍스트를 생성하고 고정 및 절대적으로 위치하는 자식에 대한 포함 블록이되며,이는 "my 모달의 일반적인 원인이 card"내부에 붙어 있습니다. Toolz CSS 필터 생성기는 슬라이더와 라이브 미리보기로 선언을 빌드하고 변경 한 기능 만 쓰고 클라이언트 측,무료, 가입 없음을 실행합니다.
CSS 필터 속성은 무엇입니까?
CSS 필터 속성은 이미지 처리 효과가 페이지에 그려지기 전에 요소에 적용됩니다. 이 효과는 element's 전체 렌더링을 다룹니다: 배경,테두리, 텍스트,이미지 및 하위 요소. W3C 에 정의되어 있습니다 필터 효과 모듈 레벨 1 그리고 현재의 모든 브라우저에서 지원됩니다; 그만큼 필터에 대한 MDN 참조입니다 호환성 세부정보를 나열합니다.
선언은 공백으로 구분된 필터 함수 목록입니다:
img.hero {
filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%);
}
함수는 왼쪽에서 오른쪽으로 실행됩니다. 각각은 이전 함수의 출력을 입력으로 사용하며,이는 순서가 중요한 이유를 이해하는 열쇠입니다.
필터는 이미지 파일을 수정하지 않습니다. 브라우저는 페인팅할 때마다 필터를 적용하므로 원본은 그대로 유지되며 CSS 한 줄로 효과를 변경하거나 제거할 수 있습니다.
각 필터 기능은 무엇을 합니까?
각 함수는 요소를 변경하지 않은 채로 두는 항등 값을 가지고 있습니다. Toolz 생성기는 출력을 짧게 유지하기 위해 that 을 사용합니다: 항등 값에 남아있는 모든 함수는 CSS 에서 생략됩니다.
| 기능 | 하는 일 | 정체성 | 발전기 슬라이더 범위 |
|---|---|---|---|
blur() |
주어진 반경에 대한 가우스 흐림 | 0px |
0 에서 20px |
brightness() |
각 색상 채널을 곱합니다 | 100% |
0~200% |
contrast() |
채널을 중간 회색에서 멀어지거나 회색을 향해 밀어냅니다 | 100% |
0~200% |
saturate() |
색상 강도를 높이거나 낮춥니다 | 100% |
0~200% |
grayscale() |
동일한 휘도의 회색을 향해 혼합됩니다 | 0% |
0~100% |
sepia() |
따뜻한 브라운 톤으로 블렌딩됩니다 | 0% |
0~100% |
invert() |
각 채널을 반대쪽으로 뒤집습니다 | 0% |
0~100% |
hue-rotate() |
색상환 주위의 색상을 회전합니다 | 0deg |
0 에서 360deg |
opacity() |
요소를 더욱 투명하게 만듭니다 | 100% |
0~100% |
사양에서는 다음과 같은 일부 범위를 넘어서는 값을 허용합니다 brightness(300%). 슬라이더는 사진 스타일 조정에 유용한 범위를 다룹니다; 손으로 CSS에 더 큰 값을 입력할 수 있습니다.
사양도 정의합니다 drop-shadow()는, 발전기가 포함하지 않는. 달리 box-shadow, drop-shadow() 요소's 직사각형 상자가 아닌 PNG 아이콘과 같은 투명한 이미지의 보이는 모양을 따릅니다. 직사각형 그림자의 경우 박스 그림자 가이드 보다 유연한 속성을 다룹니다.
컬러 필터는 픽셀 값을 어떻게 변경합니까?
대부분의 컬러 필터는 빨간색,녹색 및 파란색 채널에서 간단한 산술이며 각각 0 에서 1 까지의 숫자로 처리됩니다. 필터 효과 사양은 각 하나를 수식 또는 3 x 3 행렬로 정의합니다. 몇 가지 색상을 통해 작업하면 예측 가능해집니다.
밝기(150%) 모든 채널에 1.5 를 곱합니다. rgb (100, 100, 100) 의 중간 회색은 rgb (150, 150, 150) 가 됩니다. 255 를 넘을 값은 잘려져 있기 때문에 고휘도는 하이라이트를 순수한 흰색으로 씻어냅니다.
대비(200%) 각 채널에 (값 - 0.5) × 2 + 0.5 를 적용합니다 0.25 (약 64) 의 진한 회색은 (0.25 - 0.5) × 2 + 0.5 = 0, 검정색이 됩니다 0.75 의 밝은 회색은 1.0, 흰색이 됩니다 모든 것이 중간에서 멀리 퍼집니다.
그레이스케일(100%) 각 픽셀을 휘도 기준의 회색으로 대체하여 빨간색은 0.2126, 녹색은 0.7152, 파란색은 0.0722 의 가중치를 사용합니다. 순수한 빨간색, rgb (255, 0, 0) 는 0.2126 × 255 = 약 54 가 되므로 rgb (54, 54, 54). 순수한 녹색은 약 182 의 훨씬 밝은 회색이 됩니다. 그래서 회색조 변환은 녹색이 빨간색보다 밝다는 느낌을 유지합니다.
세피아(100%) 온난한 가중 계수를 가진 수로를 섞습니다. 빨간 산출을 위해 공식은 0.393R + 0.769G + 0.189B 입니다. 백색은 (1, 1, 1) 로 들어가고 대략 (1.35, 1.20, 0.94) 로 나오고, rgb (255, 255, 239) 에 클립을 붙입니다: 백색은 희미한 크림이 됩니다.
이 수치는 specification's 수식을 직접 적용한 것에서 나온 것입니다. 화면에서 반올림 및 색상 관리는 결과를 한두 단위 이동할 수 있습니다.
필터 함수의 순서가 결과를 변경하는 이유는 무엇입니까?
필터는 순서대로 적용되므로 각 함수는 이전 function's 출력에서 작동합니다. 함수가 회색조 제거 색상과 같은 정보를 제거하면 이후에 실행되는 모든 것은 작업할 것이 적습니다.
순수한 파란색, rgb (0, 0, 255) 를 취하고 두 주문 모두에서 회색조와 세피아를 100% 적용하십시오.
filter: grayscale(100%) sepia(100%);
- 회색조 먼저: 파란색은 휘도 0.0722 를 가지므로 픽셀은 모든 채널에서 rgb (18, 18, 18) 에 대해 0.0722 의 어두운 회색이됩니다.
- 세피아 초: 빨강은 0.0722 × (0.393 + 0.769 + 0.189) = 0.0975 가 되고, 초록은 0.0722 × 1.203 = 0.0869 가 되고, 파랑은 0.0722 × 0.937 = 0.0677 이 된다.
- 결과: 약 rgb(25, 22, 17), 매우 짙고 따뜻한 갈색입니다.
filter: sepia(100%) grayscale(100%);
- 세피아 먼저: 빨간색은 0.189, 녹색은 0.168, 파란색은 0.131, 어두운 갈색이 됩니다.
- 회색조 초: 휘도는 0.2126 × 0.189 + 0.7152 × 0.168 + 0.0722 × 0.131 = 0.170 입니다.
- 결과: 약 rgb(43, 43, 43), 전혀 색조가 없는 중성 회색입니다.
같은 두 함수,다른 순서,그리고 한 결과는 톤이 매겨지고 다른 하나는 그렇지 않습니다. 일반 규칙: 나중에 함수가 결과를 색칠하기를 원한다면 먼저 색 제거 함수를 넣고 중립적인 최종 이미지를 원한다면 마지막으로 넣으십시오.
발전기는 항상 1 개의 조정 순서에 있는 기능을 씁니다: 흐리게 하고십시오,밝기, 대조,포화, 회색 가늠자,세피아, 반전,색조 회전시키십시오,불투명도. 그래서 회색 가늠자는 항상 톤을 댄 버전을 주는 세피아의 앞에 옵니다. 다른 순서를 필요로 하는 경우에,CSS 를 베끼고 기능을 손으로 재배열하십시오.
프리셋은 무엇을 생산합니까?
생성기는 빈티지 프리셋에서 열립니다. 이것들은 각각의 프리셋이 쓰는 정확한 선언입니다:
| 미리 설정 | 생성된 CSS |
|---|---|
| 없음 | filter: none; |
| 그레이스케일 | filter: grayscale(100%); |
| 빈티지 | filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%); |
| 따뜻한 | filter: brightness(105%) saturate(140%) sepia(25%); |
| 시원한 | filter: saturate(120%) hue-rotate(200deg); |
| 극적인 | filter: brightness(90%) contrast(150%) saturate(120%); |
| 바랜 | filter: brightness(110%) saturate(80%) opacity(80%); |
| 반전시키다 | filter: invert(100%); |
| 흐리게 하다 | filter: blur(4px); |
프리셋은 시작점입니다. Warm 을 클릭한 다음 Blur 를 2px 로 드래그하면 출력이 됩니다 filter: blur(2px) brightness(105%) saturate(140%) sepia(25%);. 없음 또는 재설정을 클릭하면 으로 돌아갑니다 filter: none;.
Cool 프리셋은 이름에서 알 수 있는 것보다 강합니다: 200 도 색조 회전은 오렌지를 파란색으로,블루스를 주황색으로 움직입니다. "cool"로 읽혀지며 따뜻한 사진에서는 다른 모든 것에 무거운 색상 이동으로 사용됩니다.
미리보기는 업로드가 아닌 몇 가지 모양으로 파란색, 주황색 및 녹색 그라데이션의 고정 샘플입니다. 각 함수가 색상, 대비 및 흐림을 이동하는 방법을 보여 주지만 항상 실제 이미지에서 복사된 CSS를 테스트합니다. 그라데이션을 평평하게 하는 필터는 피부색에 진흙 투성이처럼 보일 수 있기 때문입니다.
발전기로 필터를 어떻게 구축합니까?
- 열다 필터 CSS 생성기. Vintage 에서 시작합니다.
- 원하는 모양에 가장 가까운 사전 설정을 선택하거나 없음 을 클릭하여 필터 없음에서 시작합니다.
- 슬라이더를 드래그하십시오. 이동하면서 미리보기가 업데이트되고,Generated CSS 라인이 업데이트됩니다.
- 전체를 넣으려면 CSS 복사를 클릭하세요
filter: ...;클립보드에 선언. - 이미지나 요소의 선택기에 붙여넣은 다음 실제 페이지에서 확인하세요.
출력에는 변경된 함수만 나타나므로 밝기를 정확히 100%로 다시 이동하면 제거됩니다 brightness() 떠나는 대신 라인에서 brightness(100%) 뒤에.
필터가 고정되고 절대적으로 배치된 요소를 차단하는 이유는 무엇입니까?
왜냐하면 어떤 filter 이외의 none 요소를 절대적으로 고정된 위치의 자손을 위한 포함 블록으로 만들고,새로운 스태킹 컨텍스트를 만듭니다. 필터 효과 사양은 두 가지를 모두 명시합니다. 이것은 브라우저 버그가 아닙니다; 속성이 정의되는 방식입니다.
실제로 이는 두 가지 고전적인 버그를 생성합니다.
고정되지 않은 고정 모달. 일반적으로 position: fixed 뷰포트에 상대적인 요소를 배치합니다. 필터링된 조상 내부에는 대신 해당 조상에 상대적인 요소가 배치됩니다:
.card { filter: grayscale(100%); }
/* Meant to cover the whole screen, but now covers only .card */
.card .modal { position: fixed; inset: 0; }
이웃 밑에 숨겨진 드롭다운. 필터링된 요소는 자체 스태킹 컨텍스트가 되므로 하위 요소가 됩니다 z-index: 1000 더 이상 카드 밖의 요소 위로 올라갈 수 없습니다. 카드 안에서만 위에 있습니다.
수정 사항은 둘 다 동일합니다. 필터 를 와 같은 더 좁은 요소에 적용합니다 img 카드 자체가 아닌 카드 내부. 또는 필터링된 요소 외부에서 모달이나 드롭다운을 렌더링합니다. 이것이 "portal" UI 프레임워크의 구성 요소가 수행하는 작업입니다. The transform 속성은 동일한 포함 블록 동작을 유발합니다 CSS 변환 가이드 두 속성이 모두 있는 이 버그를 충족하는 경우 유용합니다.
필터는 백드롭 필터 및 불투명도와 어떻게 비교됩니까?
몇몇 재산은 여과기 기능과 겹치고, 맞은 것을 선택해서 부작용을 피합니다.
| 재산 | 영향을 미칩니다 | 일반적인 사용 |
|---|---|---|
filter |
요소와 그 내용 | 사진 효과, 회색조 로고, 이미지 흐림 |
backdrop-filter |
요소 뒤에 무엇이 있든 | 젖빛 유리 패널, 흐린 오버레이 |
opacity |
요소와 그 내용 | 요소를 페이드 인하거나 아웃합니다 |
filter: opacity() |
요소와 그 내용 | 필터 체인의 일부인 투명성 |
mix-blend-mode |
요소가 뒤에 있는 것과 어떻게 혼합되는지 | 컬러 오버레이, 듀오톤 효과 |
backdrop-filter 와 같은 기능을 취합니다 filter하지만,요소 뒤에 있는 내용에 적용하는데,이것이 바로 glassmorphism 패널이 그 아래 페이지를 흐리게 하는 방법입니다. The 유리형성 생성기 이러한 선언을 작성합니다.
요소 자체를 페이드하기 위해 일반합니다 opacity 는 더 명확한 선택이다. opacity() 필터 체인 내부는 이미 필터를 작성하고 같은 줄에 투명도를 원할 때 유용합니다.
CSS 필터를 애니메이션 할 수 있습니까?
예. filter 애니메이션이 가능하며 일반적인 패턴은 호버링 시 색상으로 바뀌는 회색조 로고입니다:
.logo {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.logo:hover {
filter: none;
}
브라우저는 사이를 보간합니다 grayscale(100%) 그리고 none 왜냐하면 none 는 항등값에서 일치하는 함수로 처리됩니다. 보간은 두 상태가 동일한 함수를 동일한 순서로 나열할 때 깔끔하게 작동합니다. 시작 목록과 끝 목록의 순서가 다르면 결과가 원활하게 애니메이션되는 대신 점프할 수 있으므로 두 상태를 동일한 함수 순서로 작성합니다.
CSS 필터가 성능을 저하시킵니까?
필터에는 렌더링 시간이 소요되며,블러가 가장 많이 발생합니다. 브라우저는 일반적으로 GPU 에서 필터를 실행하므로 대부분의 컬러 필터가 저렴합니다. blur() 다릅니다: 작업은 흐림 반경과 영역 크기에 따라 커지므로 전체 화면 요소, 특히 스크롤 콘텐츠 뒤에 애니메이션이 적용되거나 배치되는 요소의 큰 반경은 느린 장치에서 프레임을 삭제할 수 있습니다.
실제 한계:
- 큰 요소에서는 흐림 반경을 작게 유지하고 반경 자체에 애니메이션을 적용하지 마십시오.
- 전체 페이지 래퍼가 아닌 더 작은 요소나 축소된 이미지를 흐리게 합니다.
- 모션의 경우 애니메이트합니다
transform그리고opacity브라우저가 효율적으로 처리하고 필터를 정적으로 유지하는 것입니다. - 데스크탑뿐만 아니라 중급 전화기로 테스트합니다.
특정 효과에 대한 일반적인 질문
몇 가지 효과가 작성할 만큼 자주 나타납니다.
흑백 이미지: filter: grayscale(100%); 100% 미만의 값은 약간의 색상을 남깁니다 grayscale(50%) 음소거된 모습을 연출합니다.
텍스트 뒤에 흐리게 배경 이미지: filter: brightness(60%); 이미지 요소에. 추측보다는 텍스트 대비를 나중에 확인; 그만큼 색상 대비 검사기 WCAG 비율을 제공합니다.
포함된 문서 또는 다이어그램의 대략적인 어두운 모드: filter: invert(100%) hue-rotate(180deg); 반전 반전 빛과 어둠하지만 또한 그들의 반대에 색조를 켜; 180 도 색조를 회전하면 원래의 색조로 다시 대부분의 색상을 가져옵니다. 그것은 근사치이며,내부의 사진은 잘못 보일 것입니다,그래서 그들을 제외.
톤이 있는 흑백: filter: grayscale(100%) sepia(60%); 위에서 작업한 대로입니다.
텍스트 섀도우 및 변환을 포함한 전체 CSS 빌더 세트가 있습니다 CSS 도구 허브.
발전기는 비공개인가요?
예. 미리보기와 CSS 는 JavaScript 로 브라우저에서 생성됩니다. 업로드되는 것이 없으며,처음에 업로드할 이미지가 없으며,페이지가 로드되면 도구가 오프라인으로 계속 작동합니다. CSS 를 복사하면 일일 사용량 한도에 포함되며 복사본이 발생했다는 것만 기록됩니다.
