Πρόγραμμα δημιουργίας υποβάθρου μοτίβων CSS

Τα περισσότερα εργαλεία "δημιουργίας μοτίβων" επαναχρησιμοποιούν αθόρυβα τον ίδιο τύπο επαναλαμβανόμενης γραμμικής διαβάθμισης για κάθε επιλογή και απλώς αλλάζουν τους αριθμούς. Αυτό δεν ισχύει: καθένας από τους έξι τύπους μοτίβων εδώ είναι κατασκευασμένος από τη συγκεκριμένη τεχνική CSS που πραγματικά παράγει αυτό το σχήμα. Οι ρίγες χρησιμοποιούν μια ενιαία επαναλαμβανόμενη γραμμική διαβάθμιση με δύο χρωματικές ζώνες. Οι κουκκίδες χρησιμοποιούν μια ακτινική κλίση με πλακάκια καθαρά σε μέγεθος φόντου - το κλασικό κόλπο με κουκκίδες CSS - αντί για μια επαναλαμβανόμενη ακτινική διαβάθμιση, η οποία δεν μπορεί να πλακώσει μια κυκλική κουκκίδα καθαρά σε ένα ορθογώνιο πλέγμα. Το Checkerboard χρησιμοποιεί τον πραγματικό τύπο κωνικής διαβάθμισης τεσσάρων τεταρτημορίων: μια κωνική διαβάθμιση με κέντρο ένα τετράγωνο πλακίδιο χωρίζεται φυσικά σε τέσσερα τετράγωνα τεταρτημορίων σε όρια 90 μοιρών και εναλλάσσοντας δύο χρώματα σε αυτά τα πλακίδια τεταρτημορίων σε ένα γνήσιο σκακιέρα, όχι μια προσέγγιση.

Πλέγμα και διαγώνια διασταύρωση και οι δύο επιστρώνουν δύο επαναλαμβανόμενες γραμμικές διαβαθμίσεις ως ξεχωριστές εγγραφές εικόνας φόντου αντί να προσποιούνται τη δεύτερη κατεύθυνση με κόλπα περιγραμμάτων. Το πλέγμα συνδυάζει μια επαναλαμβανόμενη κλίση "προς τα δεξιά" και "προς τα κάτω" για ευκρινείς οριζόντιες και κάθετες γραμμές κανόνων. Το Crosshatch στρώνει μια επαναλαμβανόμενη κλίση +45 μοίρες και -45 μοίρες για μια διαγώνια ύφανση σε στυλ καλαθιού — αξίζει να είμαστε ακριβείς: πρόκειται για ένα ειλικρινές σταυρόνημα, όχι αληθινή γεωμετρία ψαροκόκαλου, και το εργαλείο το χαρακτηρίζει έτσι αντί να υπερασπίζεται. Τα τρίγωνα επαναχρησιμοποιούν την τεχνική κωνικής διαβάθμισης τεσσάρων σφηνών του σκακιέρας, αλλά ξεκινούν την κλίση περιστρεφόμενη 45 μοίρες, η οποία μετατοπίζει τα όρια της σφήνας από τα μεσαία σημεία της άκρης του πλακιδίου στις γωνίες του και μετατρέπει τις ίδιες τέσσερις σφήνες σε τέσσερα τρίγωνα από γωνία προς γωνία αντί για τέσσερα τετράγωνα τεταρτημορίου.

Κάθε τύπος μοτίβου εκθέτει μόνο τα στοιχεία ελέγχου που ισχύουν πραγματικά σε αυτόν — εμφανίζεται ένα ρυθμιστικό γωνίας για ρίγες, η ακτίνα κουκκίδας και το διάστημα για κουκκίδες, το πάχος γραμμής εμφανίζεται για πλέγμα και διασταύρωση — και το μεγάλο πλαίσιο προεπισκόπησης με πλακάκια βάφεται ξανά σε κάθε αλλαγή, ώστε να μπορείτε να δείτε πολλές πλήρεις επαναλήψεις πριν δεσμευτείτε σε μια τιμή. Γυρίστε τη λειτουργία εξόδου σε SVG και το ίδιο μοτίβο θα εμφανιστεί ξανά ως στοιχείο <pattern> που έχει δημιουργηθεί από απλά ορθό, κύκλο, μονοπάτι ή πολύγωνο, έτοιμο για επικόλληση μέσα στο <defs> οποιουδήποτε εγγράφου SVG, με λήψη με ένα κλικ για ένα αυτόνομο αρχείο .svg.

Τα πάντα εκτελούνται τοπικά στο πρόγραμμα περιήγησής σας: χωρίς μεταφορτώσεις εικόνων, χωρίς διακομιστή μετ' επιστροφής, χωρίς λογαριασμό. Για γεμίσματα συμπαγούς ή ντεγκραντέ χωρίς επανάληψη, η γεννήτρια διαβάθμισης CSS σε αυτόν τον ιστότοπο είναι το σωστό εργαλείο. Αυτό είναι ειδικά για πλακίδια γεωμετρικά υπόβαθρα κατασκευασμένα από μηδενικά στοιχεία εικόνας.