CSS 필터 생성기

CSS 필터 생성기는 CSS 필터 속성에 대한 시각적 편집기입니다. 흐림,밝기, 대비,포화도, 회색조,세피아, 반전,색조 회전 및 불투명도 등 각 필터 기능에 대한 슬라이더를 이동하고 효과가 미리보기에 적용되는 것을 실시간으로 확인한 다음 생성되는 정확한 CSS 를 복사합니다.

Filter 속성은 이미지 편집기가 필요 없이 브라우저에서 직접 흐리게, 색상 이동 및 대비 조정과 같은 그래픽 효과를 적용합니다. 여러 기능을 단일 선언으로 연결할 수 있으며 순서대로 적용되며 빈티지, 따뜻하고 드라마틱한 포토 스타일이 만들어집니다. 이 도구는 사용자를 위해 해당 체인을 관리하고 실제로 변경한 기능만 출력하여 CSS를 깨끗하게 유지합니다.

모든 것이 브라우저에서 발생합니다. 빈티지 또는 그레이스케일과 같은 사전 설정에서 시작하여 각 함수를 미세 조정하고 선언을 복사합니다. 계정이 없고 업로드가 없으며 페이지가 로드되면 오프라인에서 계속 작동합니다.

필터는 작성된 순서에 적용되며 순서는 결과를 변경합니다: 회색조 다음 세피아는 세피아 다음 회색조와 동일하지 않습니다. 첫 번째가 두 번째 색조를 띠게 될 색상을 제거하기 때문입니다. 알 가치가 있는 gotcha 는 시각적인 것보다는 구조적인 필터가 없는 것 이외의 모든 요소는 고정되고 절대적으로 배치된 자손에 대한 포함 블록이 되므로 필터링된 부모 내부의 드롭다운 또는 모달은 뷰포트 대신 해당 부모에 대해 위치를 지정합니다. 또한 새로운 스태킹 컨텍스트를 생성하여 이전에 작동했던 z-index 순서를 깨뜨릴 수 있습니다. 필터가 모양과 무관하게 보이는 방식으로 레이아웃을 중단하는 경우 거의 항상 그 이유입니다. 필터는 대부분의 브라우저에서 GPU 가속이지만 큰 요소의 큰 흐림 반경은 여전히 비쌉니다.