Χάπι CSS / Γεννήτρια σχήματος σταδίου
Σχεδιάστε οπτικά την ακτίνα περιγράμματος CSS: τέσσερα ανεξάρτητα ρυθμιστικά γωνίας σε px ή τοις εκατό, μια συντόμευση σύνδεσης σε όλες τις γωνίες για στιγμιαίους κύκλους και χάπια, καθώς και μια λειτουργία οργανικής σταγόνας με τυχαία σχήματα.
Αποτέλεσμα
Αυτή η σελίδα ανοίγει τη γεννήτρια ακτίνας περιγράμματος με και τις τέσσερις γωνίες συνδεδεμένες και ωθημένες σε πολύ μεγάλη ακτίνα: 999 εικονοστοιχεία. Σε ένα τυπικό ορθογώνιο μεγέθους κουμπιού, μια τόσο μεγάλη ακτίνα περικόπτεται από το πρόγραμμα περιήγησης στο μισό ακριβώς ύψος του κουτιού, που είναι αυτό που δημιουργεί το πλήρως στρογγυλεμένο σχήμα χαπιού ή γηπέδου αντί για ένα τετράγωνο με ελαφρώς στρογγυλεμένες γωνίες.
Αυτός είναι ο λόγος για τον οποίο τα κουμπιά χαπιών δεν χρειάζονται μια ακριβή τιμή ακτίνας συντονισμένη στο ύψος κάθε κουμπιού — οποιοσδήποτε αριθμός είναι άνετα μεγαλύτερος από το μισό του ύψους δίνει το ίδιο αποκομμένο αποτέλεσμα, γι' αυτό και τα 999 px (ή ακόμα και τα 9999 px) έχουν γίνει η άτυπη συντομογραφία της κοινότητας για το «γύρω από αυτό μέχρι το τέλος» στο CSS.
Αλλάξτε το μέγεθος του πλαισίου στη δική σας διάταξη και τα ίδια 999 εικονοστοιχεία συνεχίζουν να παράγουν ένα πλήρες χάπι σε οποιοδήποτε ύψος, καθώς το πρόγραμμα περιήγησης κουμπώνει πάντα στο μισό κουτί αυτόματα. Αντιγράψτε το CSS μόλις φαίνεται σωστό ή αποσυνδέστε τις γωνίες για να δημιουργήσετε μια ασύμμετρη κάψουλα.