Γεννήτρια Border Radius

Μια δήλωση border-radius μπορεί να δεχτεί έως και τέσσερις ανεξάρτητες τιμές γωνιών συν μια προαιρετική σύνταξη οκτώ τιμών με κάθετο για οργανικές καμπύλες — περισσότερα κινούμενα μέρη απ' όσα συνειδητοποιούν οι περισσότεροι μέχρι να χρειαστούν κάτι πέρα από μια απλή στρογγυλεμένη κάρτα. Αυτή η γεννήτρια βάζει κάθε ένα από αυτά τα μέρη στην οθόνη: τέσσερα slider γωνιών με τη δική τους μονάδα px ή ποσοστού, μια συντόμευση σύνδεσης όλων των γωνιών για συμμετρικά σχήματα και μια λειτουργία blob για σχήματα που καμία μεμονωμένη τιμή ακτίνας δεν μπορεί να εκφράσει.

Η λειτουργία Γωνίες καλύπτει τα σχήματα που πραγματικά αναζητούν οι χρήστες: συνδέστε κάθε γωνία σε ένα slider για τέλειους κύκλους, pills και squircles ή αποσυνδέστε τες για να στρογγυλέψετε μόνο την κορυφή ενός dropdown panel ή μόνο μία πλευρά μιας κάρτας. Μια προεπισκόπηση σκακιέρας πίσω από το σχήμα, με δυνατότητα εναλλαγής μεταξύ ανοιχτού και σκοτεινού φόντου, καθιστά προφανές ποιες ακριβώς γωνίες κόβονται σε κάθε ακτίνα — το ίδιο οπτικό τέχνασμα που χρησιμοποιούν τα εργαλεία αρχείων σε αυτόν τον ιστότοπο για να δείξουν διαφάνεια.

Η λειτουργία Blob είναι το άλλο μισό: η σύνταξη CSS οκτώ τιμών με κάθετο επιτρέπει στις οριζόντιες και κατακόρυφες ακτίνες κάθε γωνίας να διαφέρουν, κάτι που είναι αυτό που μετατρέπει ένα στρογγυλεμένο ορθογώνιο σε ένα οργανικό, ακανόνιστο περίγραμμα. Πατήστε Τυχαιοποίηση για ένα φρέσκο σχήμα ανά πάσα στιγμή και αντιγράψτε το ακριβές CSS από πίσω του — δεν χρειάζεται εξαγωγή SVG ή εξωτερική βιβλιοθήκη. Οι προκαθορισμένες σελίδες καλύπτουν τα αιτήματα που πληκτρολογούν πραγματικά οι άνθρωποι σε μια μηχανή αναζήτησης: έναν τέλειο κύκλο, ένα pill button σχήματος σταδίου, ένα squircle τύπου iOS και ένα έτοιμο οργανικό blob.

Όπως κάθε εργαλείο σε αυτόν τον ιστότοπο, εκτελείται εξ ολοκλήρου στον browser σας: καμία μεταφόρτωση, κανένας λογαριασμός και η γεννήτρια συνεχίζει να λειτουργεί εκτός σύνδεσης μόλις φορτώσει η σελίδα.