CSS 필터 효과를 사용한 이미지 조정

이미지 조정 명도 과 대조, 또는 이미지를 그레이 스케일 또는 세피아 이미지 편집 응용 프로그램에서 볼 수있는 공통 기능입니다. 포토샵. 그러나 이제 CSS를 사용하여 웹 이미지에 동일한 효과를 추가 할 수 있습니다..

이 기능은 실제로 작업 초안 단계에있는 필터 효과에서 가져옵니다. 그러나 Webkit 브라우저는이 기능을 구현하는 데있어 한 발 앞서고있는 것 같습니다..

그래서 한번 시도해보고 Mehdi Kh의 이미지를 사용하여 효과를 보여줍니다..

그 효과들

효과를 적용하는 것은 매우 쉽습니다. 아래 스 니펫을보고 이미지를 그레이 스케일;

 img -webkit-filter : 그레이 스케일 (100 %);  

... 세피아 ala Instagram.

 img -webkit-filter : 세피아 (100 %);  

둘 다 세피아 그리고 그레이 스케일 값은 백분율로 표시됩니다. 100%는 최대 값이며 적용 0 % 이미지를 변경하지 않고 유지하지만 값이 명시 적으로 지정되지 않은 경우 100 % 기본값으로 취해질 것입니다..

이미지를 밝게하는 것도 가능합니다. 명도 다음과 같이 함수;

 img -webkit-filter : 밝기 (50 %);  

밝기 효과는 위의 대비 및 세피아 효과처럼 작동합니다. 0 % 이미지를 그대로 유지하고 100 % 이미지를 완전히 밝게합니다. 이미지 대신 빈 흰색 페이지 만 표시 할 수 있습니다..

또한 밝기 효과 음수 값 허용, 그것은 이미지를 어둡게한다..

 img -webkit-filter : 밝기 (-50 %);  

... 그리고 우리는이 방법으로 이미지 대비를 조정할 수 있습니다..

 img -webkit-filter : 대비 (200 %);  

위에서 볼 수 있듯이 값의 작동 방식에는 약간의 차이가 있습니다. 대조() 으로 200 %, 이것은 100 % 이미지가 변경되지 않는 시작점입니다. 값이 아래 일 때 100 %, 50 %를 가정 해 봅시다. 이미지의 대비가 떨어집니다..

또한 아래 예제와 같이 하나의 선언 블록에서 효과를 결합 할 수도 있습니다. 우리는 이미지를 그레이 스케일 그리고 대조 동시에 50 % 씩.

 img -webkit-filter : 회색 명암 (100 %) 대비 (150 %);  

필터를 CSS3 전환과 결합하여 우리는 우아하게 만들 수 있습니다. 공중 선회 효과.

 img : hover -webkit-filter : 회색 음영 (0 %);  img : 호버 -webkit-filter : 세피아 (0 %);  img : 호버 -webkit-filter : 밝기 (0 %);  img : hover -webkit-filter : contrast (100 %);  

마지막으로 우리가 시도 할 수있는 또 하나의 효과가 있습니다. 그만큼 가우스 흐림, 대상 요소를 흐리게 처리합니다..

 img : hover -webkit-filter : blur (5px);  

Photoshop에서와 마찬가지로 흐림 값은 픽셀 반경에 표시되며 값이 명시 적으로 지정되지 않으면 0이 기본값으로 사용되고 이미지는 그대로 남습니다..

최종 생각

실제로 스펙에는 많은 효과가 있습니다. 와 같은 색조 - 회전, 거꾸로 하다 과 가득한, 하지만 그들은 실제 웹 사례에 덜 적용된 것 같습니다. 따라서, 논의는 단지 4 가지 효과로 제한되었다..

그리고이 튜토리얼에서 이미지에 적용되는 토론에도 불구하고 DOM의 모든 요소에 실제로 속성을 적용 할 수 있습니다..

마지막으로 아래 링크에서 라이브 데모를 볼 수 있습니다. 현재 필터는에서 지원됩니다. Chrome 19 이상.

• 데모
• 소스 다운로드