Home Web design Css Tạo bộ lọc hình ảnh như Instagram với CSS Code Generator

Tạo bộ lọc hình ảnh như Instagram với CSS Code Generator

5 min read
0
0
4
cssfilters

Công cụ lọc hình ảnh miễn phí này sẽ giúp bạn xây dựng màng lọc ảnh tùy chỉnh bằng CSS3 Filter. Với cssFilters.co bạn không cần phải lo cách hoạt động của chúng như thế nào, chỉ việc tùy chỉnh setting và copy code là ok, không cần viết một tí code CSS nào cả.

cssfilters

Ở phía trên màn hình bạn sẽ nhận thấy một thanh dài chứa đầy custom Instagram filters. Những màng lọc này đã bao gồm tất cả những lựa chọn nổi tiếng như Hudson, Toaster, Inkwell, Lofi,…

Bạn chỉ việc click bất cứ filter nào bạn thích vào sau đó click vào tab “CSS code” ở góc trên-phải. Từ đó bạn sẽ có cả code CSS lẫn HTML. Chỉ việc copy/paste vào website là xong.

CSS Code Generator

Nhưng bạn cũng có thể customize những màng lọc hình ảnh này với con lăn trong settings. Dưới tab “generator” bạn có thể điểu chỉnh một số tùy chọn như độ bão hòa & độ tương phản, cả độ đục, xám hóa, sepia và cả một số style xếp chồng như linear gradient hoặc radial gradient.

CSS Code Generator

Mỗi khi bạn chuyển con lăn, công cụ sẽ tự động cập nhật code nên bạn không phải lưu gì hết. Và bạn thậm chí có thể đổi hình ảnh mặc định, tự upload hoặc lựa chọn từ Unsplash.

Ứng dụng web lọc hình ảnh này do Indrashish Ghosh thực hiện và chạy nhiều class mặc định, có thể thấy trong CSSgram library.

Nhưng custom settings còn khác xa so với presets cơ bản, cộng thêm free code generation khiến đây trở thành công cụ tiện dụng cho coder lẫn những ai không biết code. Chúng ta có CSS3 generators cho nhiều tính chất như background gradients và text shadows. Và giờ chúng ta có cssFilters làm CSS3 image filter generator cao cấp.

via Techtalk

Load More Related Articles
Load More By Dong
Load More In Css