Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Cách áp dụng các bộ lọc Instagram trong trình duyệt chỉ với CSS

by
Difficulty:BeginnerLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Chào mừng bạn đến với mẹo nhanh khác trên Envato Tuts+; trong video của ngày hôm nay, chúng ta sẽ nói về các bộ lọc Instagram. Nếu bạn là một người dùng Instagram (và có thể ngay cả khi bạn không phải), bạn sẽ thấy rằng nó cung cấp cho bạn nhiều bộ lọc khác nhau để bạn có thể áp dụng cho một bức ảnh mà bạn đang tải lên. Ngày nay bạn có thể có được kết quả tương tự trong trình duyệt bằng cách chỉ sử dụng CSS. Chúng ta hãy cùng tìm hiểu nhé!

Xem Video hướng dẫn

Instagram.css

Instagram.css là một thư viện, có trên Github, thực hiện tất cả những công việc nặng nhọc cho bạn. Tải nó về, sau đó thêm nó vào trang web của bạn (hoặc dưới dạng một asset được kéo vào một pen trên CodePen).

Markup của chúng ta trông giống như sau:

Chúng ta có một demo-container mà chúng ta chỉ sử dụng để định vị hình ảnh ở giữa. Thẻ <img> được gói trong một <figure>, và đó là <figure> mà chúng ta sẽ thêm vào một số lớp.

Thêm một lớp filter-

Hiện có sẵn trên 40 bộ lọc, tất cả được liệt kê trên trang Github. Dưới đây là một hoặc hai ví dụ mà bạn có thể tự mình thử trong pen được nhúng bên dưới đây:

  • 1977 filter-1977
  • Helena filter-helena
  • Kelvin filter-kelvin
  • Moon filter-moon
  • Poprocket filter-poprocket
  • Reyes filter-reyes
  • Sierra filter-sierra
  • Toaster filter-toaster
  • Valencia filter-valencia
  • Walden filter-walden

Nó hoạt động thế nào?

Nếu bạn mở nguyên bản instagram.css, bạn sẽ thấy rằng mỗi lớp áp dụng thuộc tính CSS là filter, như sau:

Những thuộc tính khác cần thêm một bước nữa và thêm blend-mode vào một phần tử giả nằm phía trên hình ảnh:

Các giá trị được áp dụng cho filtermix-blend-mode thay đổi các kênh, độ bão hòa, và độ sáng của hình ảnh, kết hợp với nhau để cung cấp cho chúng ta những hiệu ứng tương tự như Instagram. Đây cũng là những hiệu ứng khá mạnh mẽ, trước đây chỉ có thể có trong trình duyệt với SVG.

Trình duyệt hỗ trợ

Bộ lọc CSS được hỗ trợ khá tốt trong các trình duyệt hiện đại, bao gồm phiên bản mới nhất của Edge (13+). IE và IE Mobile đều không hỗ trợ. Hãy xem CanIUse để biết thêm chi tiết.

Tóm tắt

Đó là tất cả cho mẹo nhanh này; instagram.css cung cấp một cách thật sự nhanh chóng để áp dụng một số hiệu ứng tuyệt vời cho hình ảnh của bạn trong trình duyệt. Hãy tải nó về, thử nó, và kéo từng phần về để áp dụng cho các bộ lọc và hiệu ứng của riêng bạn.

Tìm hiểu thêm về Chế độ pha trộn và Bộ lọc trong CSS

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.