웹 이미지에 Instagram 필터를 적용하는 방법

Instagram과 앱과 함께 제공되는 필터를 사용하여 사진을 더 재미 있고 아름답게 만드는 것을 좋아합니다. 지금까지는 이러한 필터의 사용이 앱 내부에서만 사용하도록 제한되어 있습니다. 네가 원한다면? 웹 이미지에서 Instagram 필터 사용, 앱 외부, 예를 들어 개인 블로그 나 웹 사이트에 올리려는 사진?

자, 여러분은 CSSGram을 사용할 수 있습니다. Instagram 앱에서 찾을 수있는 것과 유사한 필터로 사진을 편집하십시오. 편집이 수동이거나 Photoshop 액션을 통해 수행되는 Photoshop과 달리 CSSGram을 사용하면 전체 프로세스가 CSS를 통해 수행됩니다..

작동 원리

이 효과를 내기 위해 CSSGram은 CSS 필터 과 CSS 블렌드 모드, 기본적으로 원하는 Instagram 필터를 모방 한 지점에 효과를 혼합합니다. 효과는 의사 요소를 통해 이미지 컨테이너에 적용됩니다. 이 "1977"예제를 통해이 작업이 어떻게 수행되는지 확인해 봅시다.

다음은 추가 된 의사 요소입니다..

 ._1977 위치 : 상대적;  ._1977 : content : "; 표시 후 블록 : 높이 : 100 %, 너비 : 100 %, 위쪽 : 0, 왼쪽 : 0, 위치 : 절대; 

그리고 이것이 CSS 필터이며 Blend가 추가되었습니다.

 ._1977 -webkit-filter : 명암 (1.1) 밝기 (1.1) 포화 (1.3); 필터 : 콘트라스트 (1.1) 휘도 (1.1) 포화 (1.3);  ._1977 : 백그라운드 : rgba (243, 106, 188, 0.3); 믹스 - 블렌드 - 모드 : 스크린;  

사용하는 방법

필터 클래스를 이미지 요소에 직접 추가 할 수 없으며 컨테이너 나 부모 클래스에 추가해야합니다. 예를 들어

 @ 수입 '공급 업체 / cssgram'; 

 .내 수업 ... @extend % _1977;