Lộ trình tác vụ / từ đầu vào đến kết quả
Cách tạo một họa tiết nền CSS
- 01
Chọn một họa tiết
Mở Họa tiết và chọn Chấm, Lưới hoặc Chéo. Cả ba đều được dựng chỉ từ gradient CSS — không có tệp hình ảnh nào tham gia ở bất kỳ điểm nào. Chuyển qua lại giữa chúng giữ nguyên các giá trị ô, vệt và màu của bạn, nên so sánh các kiểu không tốn chút công nào. Lưới chấm 28 px mặc định là một khởi đầu khiêm tốn.
- 02
Cấu hình ô
Chọn Kích thước ô từ 8 đến 96 px và Độ rộng vệt từ 1 đến 16 px. Vệt không được vượt quá một nửa kích thước ô; nếu vượt, trạng thái sẽ hiện KIỂM TRA GIÁ TRỊ kèm chính xác quy tắc bị vi phạm.
- 03
Chọn hai màu
Màu họa tiết vẽ các vệt và Màu nền canvas tô phần đất bên dưới chúng. Họa tiết tinh tế đến từ độ tương phản thấp giữa hai màu — một vệt chỉ tối hơn nền canvas một chút sẽ đọc như kết cấu bề mặt chứ không phải trang trí.
- 04
Đánh giá vòng lặp ở tỷ lệ thật
Bản xem trước trải kết quả khắp bảng, và đây chính là nơi độ tương phản yếu cùng các ô chật hẹp lộ ra. Kinh nghiệm chung: giữ vệt nhỏ hơn hẳn một nửa ô — một vệt 2 px trên ô 28 px đọc như kết cấu, không phải nhiễu.
- 05
Sao chép CSS họa tiết
Nhấn Sao chép CSS hoặc Tải xuống .css để lưu toolars-background-pattern.css. Quy tắc .pattern gồm ba khai báo — background-color, background-image và background-size — sẵn sàng cho bất kỳ phần tử nào.
- 06
Áp dụng và thích nghi quy tắc
Quy tắc gắn lên bất kỳ phần tử nào mà không gây hiệu ứng phụ về bố cục, vì nó chỉ tô nền. Chỉnh background-size về sau để đổi mật độ họa tiết, và hạ độ tương phản giữa hai màu — thay vì thu nhỏ vệt — khi một họa tiết tranh sự chú ý với văn bản.