Softonic

Trình tạo họa tiết nhiễu

Bước 1 / 2
Tiếp theo

Một chút nhiễu sẽ che đi hiện tượng phân dải màu, làm dịu những mảng màu phẳng và khiến các dải chuyển màu trong giao diện bớt vô hồn. Trình tạo này dựng một họa tiết nhiễu hình vuông, lát kín liền mạch, bằng bộ lọc SVG feTurbulence, với các tùy chỉnh cho màu nền, độ mờ của nhiễu, tần số hạt và kiểu nhiễu. Kết quả là đoạn CSS hoàn chỉnh gồm màu nền cùng một data URI SVG nội tuyến, dán thẳng vào tệp style là dùng được.

Cách tạo họa tiết nhiễu

  1. 1

    Chọn màu nền

    Hạt nhiễu nằm chồng lên màu này, nên hãy bắt đầu từ đúng bề mặt bạn định dùng.

  2. 2

    Đặt độ mờ

    Từ mức gần như không thấy (2-5%) đến hạt phim dày (từ 25% trở lên). Với giao diện, tinh tế thường là lựa chọn thắng thế.

  3. 3

    Tinh chỉnh tần số

    Tần số cơ bản càng cao thì hạt càng mịn và dày; càng thấp thì các vệt càng to và mềm.

  4. 4

    Chọn kiểu nhiễu

    Nhiễu fractal cho cảm giác mềm và tự nhiên. Turbulence cho độ tương phản cao hơn, trông như mây.

  5. 5

    Sao chép CSS

    Kết quả là màu nền kèm một data URI SVG nội tuyến, sẵn sàng dán vào tệp style của bạn.

Nhiễu SVG với feTurbulence

Cách gọn nhẹ nhất để thêm nhiễu là dùng SVG kèm bộ lọc turbulence:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <filter id="n">
    <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch" />
  </filter>
  <rect width="100%" height="100%" filter="url(#n)" opacity="0.3" />
</svg>

Nhúng nội tuyến dưới dạng background-image: url("data:image/svg+xml,...") và bạn có vài trăm byte mã lệnh lát kín được mọi bề mặt, lại không phát sinh thêm yêu cầu HTTP nào.

Thiết lập gợi ý theo tình huống

Tình huống Độ mờ Tần số cơ bản Kiểu nhiễu
Bảng giao diện chế độ tối 3-5% 0,8-1,0 Nhiễu fractal
Lớp phủ trên dải màu ở đầu trang 5-10% 0,7-0,9 Nhiễu fractal
Thẻ có chất giấy 8-15% 0,6-0,8 Nhiễu fractal
Ảnh phong cách hạt phim 15-25% 0,9-1,2 Nhiễu fractal
Hạt nhiễu áp phích retro 25-40% 0,4-0,6 Turbulence

Ghi chú về hiệu năng

  • Trên phần lớn trình duyệt, turbulence của SVG không cần đến GPU. Nó chạy tốt trong nền CSS và vẽ lại rất nhẹ.
  • Chỉ dùng lại một ô lát. Công cụ xuất ra ô lát 200 x 200 kèm stitchTiles="stitch", nên khi lặp trên màn hình lớn gần như không thấy đường nối.
  • Đừng tạo hoạt ảnh cho nhiễu. feTurbulence không hoạt ảnh mượt nếu không đổi baseFrequency, và hiệu năng sẽ tụt mạnh trong các phiên làm việc dài.
  • Chồng nhiễu lên dải chuyển màu. Phủ hạt nhiễu ở độ mờ 10% lên một dải chuyển màu CSS sẽ cho bề mặt giàu chất hơn hẳn so với chỉ dùng dải màu.

Câu hỏi thường gặp

Bất cứ khi nào bạn có một mảng màu phẳng hoặc dải chuyển màu lớn trông quá sạch sẽ. Phần đầu trang, nền hộp thoại và các bảng giao diện tối sẽ có chiều sâu hơn với mức nhiễu 3-10%. Hãy tránh dùng ở vùng có chữ vì nó làm giảm khả năng đọc.

Trong bộ lọc feTurbulence của SVG, type="turbulence" lấy giá trị tuyệt đối của nhiễu Perlin (tương phản cao hơn, trông như mây), còn type="fractalNoise" dùng giá trị có dấu (hạt mềm và tự nhiên hơn). Với giao diện, nhiễu fractal gần như luôn là lựa chọn phù hợp.

Không. Công cụ xuất ra một data URI SVG nội tuyến chỉ vài trăm byte, nhúng thẳng trong CSS, nên không có tệp ảnh và cũng không có thêm yêu cầu mạng. Nó còn co giãn được cho mọi bề mặt mà không bị vỡ hạt.

Có. Trên màn hình 8 bit mỗi kênh, các dải chuyển màu tương phản thấp thường lộ rõ vạch phân dải. Một lớp nhiễu 2-3% sẽ tạo hiệu ứng dither cho vùng chuyển tiếp và xóa hẳn các vạch đó, cả trên điện thoại lẫn màn hình máy tính.

Công cụ liên quan

Bảng tham chiếu ASCII

Bảng ASCII đầy đủ từ 0 đến 127 với giá trị thập phân, thập lục phân, bát phân, nhị phân và ký hiệu tham chiếu ký tự số HTML, gồm NUL, LF và DEL.

Tham chiếu ký tự HTML

Danh sách có thể tìm kiếm các thực thể HTML, mã tên và mã số tương ứng của chúng, cùng chức năng sao chép chỉ với một cú nhấp cho các ký tự đặc biệt và biểu tượng.

Bảng tham khảo phím tắt

Tìm phím tắt mặc định theo tài liệu của VS Code, Chrome và Bash dùng GNU Readline trên macOS, Windows và Linux.

Trình định dạng HTML

Định dạng HTML cục bộ trong trình duyệt với thụt lề hai hoặc bốn khoảng trắng. HTML không được tải lên hoặc xác thực.

Bảng tra cứu nhanh Markdown

Tài liệu Markdown thực dụng với bản xem trước thực tế và ví dụ có thể sao chép cho tiêu đề, danh sách, bảng, mã, liên kết, hình ảnh và cú pháp GFM.

Công cụ xác thực số điện thoại

Kiểm tra cấu trúc số theo quốc gia và xem khu vực, loại số cùng các định dạng E.164, quốc tế, quốc gia và RFC 3966.

Công cụ này có phiên bản bằng các ngôn ngữ khác