Cách áp dụng bộ lọc Instagram trên hình ảnh trên web

Nhiều người yêu thích sử dụng Instagram và các bộ lọc đi kèm với ứng dụng, để làm cho ảnh của họ thú vị và đẹp hơn. Cho đến nay, việc sử dụng các bộ lọc này bị hạn chế sử dụng bên trong ứng dụng. Nếu bạn muốn sử dụng các bộ lọc Instagram trên hình ảnh web, bên ngoài ứng dụng, như những bức ảnh bạn muốn đưa lên blog hoặc trang web cá nhân của bạn?

Chà, bạn có thể sử dụng CSSGram, một thư viện nhỏ cho phép bạn chỉnh sửa ảnh của bạn bằng các bộ lọc tương tự như những gì bạn có thể tìm thấy trên ứng dụng Instagram. Không giống như Photoshop trong đó các chỉnh sửa là thủ công hoặc được thực hiện thông qua các hành động Photoshop, với CSSGram, toàn bộ quá trình được thực hiện thông qua CSS.

Làm thế nào nó hoạt động

Để tạo hiệu ứng, CSSGram sử dụng Bộ lọc CSS và Chế độ hòa trộn CSS, về cơ bản pha trộn các hiệu ứng đến điểm bắt chước bộ lọc Instagram mong muốn của bạn. Các hiệu ứng được áp dụng cho vùng chứa hình ảnh, thông qua các yếu tố giả. Hãy xem cách thực hiện với ví dụ "1977" này:

Đây là phần tử giả được thêm vào.

 ._1977 vị trí: tương đối;  

Và đây là bộ lọc CSS và Blend được thêm vào:

 ._1977 -webkit-filter: độ tương phản (1.1) độ sáng (1.1) bão hòa (1.3); bộ lọc: độ tương phản (1.1) độ sáng (1.1) bão hòa (1.3);  ._1977: sau nền: rgba (243, 106, 188, 0.3); trộn-trộn-chế độ: màn hình;  

Cách sử dụng

Chúng ta không thể thêm lớp bộ lọc trực tiếp vào thành phần hình ảnh, nó phải được thêm vào lớp chứa hoặc lớp cha, ví dụ như với

 @import 'nhà cung cấp / cssgram'; 

 .lớp học của tôi mộc @extend% _1977;