CSS Squircle Generator — Στρογγυλεμένο τετράγωνο
Σχεδιάστε οπτικά την ακτίνα περιγράμματος CSS: τέσσερα ανεξάρτητα ρυθμιστικά γωνίας σε px ή τοις εκατό, μια συντόμευση σύνδεσης σε όλες τις γωνίες για στιγμιαίους κύκλους και χάπια, καθώς και μια λειτουργία οργανικής σταγόνας με τυχαία σχήματα.
Αποτέλεσμα
Αυτή η σελίδα ανοίγει τη γεννήτρια ακτίνας περιγράμματος με και τις τέσσερις γωνίες συνδεδεμένες στο 30%, μια μέτρια στρογγυλοποίηση που βρίσκεται μεταξύ ενός ευκρινούς τετραγώνου και ενός πλήρους κύκλου. Δεν είναι ένας αληθινός μαθηματικός σκίουρος (υπερέλλειψη), αλλά είναι το πλησιέστερο που μπορεί να έχει μια μεμονωμένη ιδιότητα CSS και είναι η αξία που φθάνουν τα περισσότερα συστήματα σχεδιασμού όταν θέλουν αυτή την εμφάνιση.
Το όνομα προέρχεται από τα εικονίδια εφαρμογών με στρογγυλεμένο τετράγωνο που διαδόθηκε από το iOS: αρκετή καμπύλη σε κάθε γωνία για να νιώθετε απαλή και φιλική, αλλά ποτέ τόσο πολύ ώστε το σχήμα να φαίνεται στρογγυλό. Τα πλακίδια εικονιδίων, οι μικρογραφίες καρτών και τα μοντέρνα πλαίσια avatar στηρίζονται σε ακτίνες στο ίδιο πρόχειρο εύρος ακριβώς για αυτόν τον λόγο.
Σπρώξτε το συνδεδεμένο ρυθμιστικό προς τα πάνω για πιο απαλή, πιο κυκλική αίσθηση ή προς τα κάτω για πιο ευκρινή, πιο τετράγωνο — η γραμμή CSS ενημερώνεται με κάθε αλλαγή, έτοιμη να αντιγραφεί μόλις η καμπύλη γίνει κατάλληλη για το εικονίδιο ή την κάρτα σας.