CSS 필터 생성기

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

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

모든 것은 브라우저에서 발생합니다. 페이지는 빈티지 사전 설정에서 열립니다; 다른 사전 설정을 선택하고 각 기능을 미세 조정하고 선언문을 복사합니다. 계정도 없고 업로드도 없으며 페이지가 로드되면 오프라인으로 계속 작동합니다.

다음은 따뜻한 사진 모양의 CSS 필터 생성기입니다. 따뜻한 사전 설정 및 생성 된 CSS 읽기 필터를 클릭: 밝기 (105%) 포화 (140%) 세피아 (25%); 미리보기가 호박색으로 이동하면서. 흐림을 2px 로 드래그하면 선이 필터가됩니다: 흐림 (2px) 밝기 (105%) 포화 (140%) 세피아 (25%);. 없음 을 클릭하거나 재설정을 누르면 필터로 돌아갑니다: 없음; 미리보기는 자신의 사진이 아닌 고정 색상 샘플이기 때문에 배송하기 전에 실제 이미지에서 복사 된 CSS 를 확인하십시오.

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