Trình tạo nền mẫu CSS

Hầu hết các công cụ "trình tạo mẫu" đều âm thầm sử dụng lại cùng một công thức lặp lại-tuyến tính-độ dốc cho mọi tùy chọn và chỉ thay đổi các con số. Cái này thì không: mỗi loại trong số sáu loại mẫu ở đây được xây dựng từ kỹ thuật CSS cụ thể thực sự tạo ra hình dạng đó. Sọc sử dụng một dải màu tuyến tính lặp lại duy nhất với hai dải màu. Các dấu chấm sử dụng một gradient xuyên tâm được lát gạch hoàn toàn thông qua kích thước nền - thủ thuật chấm CSS cổ điển - thay vì một gradient xuyên tâm lặp lại, không thể xếp một chấm tròn một cách rõ ràng trên lưới hình chữ nhật. Bàn cờ sử dụng công thức gradient hình nón bốn góc phần tư thực: một gradient hình nón tập trung vào một ô hình vuông sẽ tự nhiên chia thành bốn ô vuông góc phần tư ở các ranh giới 90 độ và xen kẽ hai màu trên các ô của các góc phần tư đó thành một bàn cờ chính hãng, không phải là một phép tính gần đúng.

Lưới và đường chéo chéo cả hai lớp hai độ dốc tuyến tính lặp lại dưới dạng các mục hình nền riêng biệt thay vì giả mạo hướng thứ hai bằng các thủ thuật viền. Lưới kết hợp độ dốc lặp lại "sang phải" và "xuống dưới" để tạo ra các đường quy tắc ngang và dọc sắc nét. Các lớp Crosshatch có độ dốc lặp lại +45 độ và -45 độ cho kiểu dệt chéo kiểu đan rổ - đáng nói chính xác: đây là một hình chữ thập trung thực, không phải hình học xương cá thực sự và công cụ gắn nhãn cho nó theo cách đó thay vì yêu cầu quá cao. Hình tam giác sử dụng lại kỹ thuật chuyển màu hình nón bốn nêm của bàn cờ nhưng bắt đầu chuyển đổi độ dốc xoay 45 độ, làm dịch chuyển ranh giới hình nêm từ điểm giữa cạnh của ô đến các góc của nó và biến bốn hình nêm giống nhau thành bốn hình tam giác từ góc này sang góc khác thay vì bốn hình vuông góc phần tư.

Mỗi loại mẫu chỉ hiển thị các điều khiển thực sự áp dụng cho nó — một thanh trượt góc hiển thị cho các sọc, bán kính dấu chấm và khoảng cách hiển thị cho các dấu chấm, độ dày của đường hiển thị cho lưới và gạch chéo — và hộp xem trước lát gạch lớn sẽ sơn lại sau mỗi thay đổi để bạn có thể thấy một số lần lặp lại đầy đủ trước khi thực hiện một giá trị. Chuyển chế độ đầu ra sang SVG và mẫu tương tự sẽ xuất hiện lại dưới dạng phần tử <pattern> được xây dựng từ các nguyên hàm trực tiếp, hình tròn, đường dẫn hoặc đa giác đơn giản, sẵn sàng dán vào bên trong <defs> của bất kỳ tài liệu SVG nào, chỉ bằng một cú nhấp chuột để tải xuống tệp .svg độc lập.

Mọi thứ đều chạy cục bộ trong trình duyệt của bạn: không tải lên hình ảnh, không cần quay lại máy chủ, không cần tài khoản. Để tô màu đồng nhất hoặc chuyển màu mà không lặp lại, thay vào đó, trình tạo chuyển màu CSS trên trang này là công cụ phù hợp; cái này dành riêng cho các nền hình học có thể xếp được được xây dựng từ nội dung hình ảnh bằng không.