CSS Code Generator Miễn Phí: Tạo Filter Ảnh Như Instagram

Page của bạn mà có màng lọc ảnh thì thích quá nhỉ? Nhiều năm trước tính năng này sẽ phải cần đến JavaScript nhưng ngày nay bạn đã có thể build màng lọc ảnh như ý muốn chỉ với HTML và CSS.

Và với cssFilters webapp bạn thậm chí không cần phải viết chút xíu code CSS nào!

Công cụ 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 cssFilter 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à xong rồi.

Ở 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.

Nhưng bạn cũng có thể customize những màng lọc 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.

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 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.

ITZone via Hongkiat

Chia sẻ bài viết ngay