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