CSS 필터 생성기

모든 CSS 필터 생성기는 Blur(), Brightness(), Contrast() 및 나머지 항목을 쌓을 수 있습니다. 하지만 대부분은 하나의 고정된 순서로만 필터를 적용하기 때문에 순서가 중요하지 않습니다. 이것은 다릅니다. 필터 체인은 기본 HTML5 드래그 앤 드롭으로 구축된 실제 재정렬 가능한 목록이며, 두 기능의 재정렬은 프로덕션 CSS에서와 마찬가지로 렌더링된 픽셀을 실제로 변경합니다. 흐림 후 색조 회전은 색상 회전 후 흐림과 다르게 보입니다. 이제 배송하기 전에 그 이유를 알 수 있습니다.

자신의 사진과 연결 가능한 9가지 기능(흐림, 밝기, 대비, 채도, 색조 회전, 세피아, 회색조, 반전 및 그림자)을 업로드하여 시뮬레이션된 견본이 아닌 `<img>` 요소에 대한 실제 `filter` CSS 선언으로 사진에 실시간으로 적용하세요. 선택 항목에서 기능을 추가하고, 해당 행을 목록 위나 아래로 드래그하여 체인의 위치를 ​​변경하고, 슬라이더를 조정하면, 입력할 때마다 미리보기와 복사 가능한 `filter: ...;` 라인이 업데이트됩니다. 행 바로 옆에 있는 자체 버튼을 사용하여 단계를 제거합니다.

두 번째로 작은 체인은 미리보기 위에 위치한 오버레이 패널에 적용되는 '배경 필터' 값을 구축하므로 기본 이미지의 자체 필터 체인을 건드리지 않고도 반투명 내비게이션 바와 모달 배경의 기술인 반투명 유리 효과를 볼 수 있습니다. 사진을 업로드하기 전에도 다채로운 자리 표시자 배경에서 작동하므로 몇 초 만에 반투명 패널 디자인을 다이얼링할 수 있습니다.

미리보기가 올바르게 보이면 출력 상자에서 CSS를 바로 복사하거나 실제 PNG를 내보냅니다. 동일한 필터 문자열이 Canvas 2D 컨텍스트의 `ctx.filter` 속성에 전달되고(CSS `filter` 속성과 동일한 구문을 사용함) 캔버스는 `canvas.toBlob()`을 사용하여 다운로드 가능한 파일로 변환됩니다. 내보낸 이미지는 동일한 렌더링 기본 요소를 통해 실행되는 동일한 필터 문자열에 의해 생성되므로 실시간 미리 보기와 정확히 일치합니다. 모든 것은 브라우저에서 로컬로 발생합니다. 귀하의 사진은 어디에도 업로드되지 않습니다.