Κατανόηση της ιδιότητας CSS border-radius
Η ιδιότητα border-radius στο CSS καθορίζει τον τρόπο με τον οποίο στρογγυλεύουν οι γωνίες του περιγράμματος ενός στοιχείου. Η Γεννήτρια Border Radius επιτρέπει την οπτική ρύθμιση αυτής της ιδιότητας, προσφέροντας άμεση προεπισκόπηση του σχήματος και παράγοντας τον αντίστοιχο κώδικα CSS για άμεση χρήση σε ιστοσελίδες.
Η αρχική τιμή του ρυθμιστικού στο εργαλείο είναι 24, η οποία παράγει τον κώδικα border-radius: 24px;. Η ρύθμιση των γωνιών γίνεται με βάση τη φορά των δεικτών του ρολογιού, ξεκινώντας από την πάνω αριστερή γωνία και καταλήγοντας στην κάτω αριστερή.
Μονάδες μέτρησης: Pixel έναντι Ποσοστού
Η επιλογή της κατάλληλης μονάδας μέτρησης επηρεάζει ριζικά τη συμπεριφορά του στοιχείου κατά τη σχεδίαση και την απόκρισή του σε διαφορετικά μεγέθη οθόνης. Το εργαλείο παρέχει τη δυνατότητα εναλλαγής μεταξύ των μονάδων "px" (pixel) και "%" (ποσοστό).
- Pixel (px): Όταν χρησιμοποιούνται pixel, η γωνία στρογγυλεύει κατά ένα σταθερό, απόλυτο ποσό. Η καμπυλότητα παραμένει αμετάβλητη, ανεξάρτητα από τις διαστάσεις που θα λάβει το στοιχείο στην ιστοσελίδα.
- Ποσοστό (%): Όταν επιλέγεται το ποσοστό, η στρογγυλοποίηση γίνεται σε σχέση με τις διαστάσεις του ίδιου του πλαισίου. Το οριζόντιο ποσοστό υπολογίζεται με βάση το πλάτος του στοιχείου, ενώ το κάθετο ποσοστό ακολουθεί το ύψος του. Αυτή η προσέγγιση είναι απαραίτητη για τη δημιουργία ελαστικών και αποκρινόμενων (responsive) σχεδίων.
Βασική στρογγυλοποίηση και σύνδεση γωνιών
Στην απλή λειτουργία, κάθε γωνία αντιμετωπίζεται ως ένα τεταρτημόριο κύκλου που ορίζεται από μία μόνο ακτίνα. Το εργαλείο επιτρέπει τον έλεγχο των γωνιών με δύο τρόπους, ανάλογα με την κατάσταση του στοιχείου ελέγχου «Σύνδεση όλων των γωνιών»:
- Συνδεδεμένες γωνίες: Ένα ενιαίο ρυθμιστικό με την ετικέτα «Όλες οι γωνίες» ελέγχει ταυτόχρονα και τις τέσσερις γωνίες του πλαισίου.
- Αποσυνδεδεμένες γωνίες: Εμφανίζονται τέσσερα ξεχωριστά ρυθμιστικά με εύρος τιμών από 0 έως 100. Αυτά φέρουν τις ετικέτες «Πάνω αριστερά», «Πάνω δεξιά», «Κάτω δεξιά» και «Κάτω αριστερά», επιτρέποντας τον ανεξάρτητο χειρισμό κάθε γωνίας ξεχωριστά.
Προηγμένα σχήματα με την ελλειπτική λειτουργία
Όταν ενεργοποιείται η επιλογή «Ελλειπτικές γωνίες», το εργαλείο μεταβαίνει σε ελλειπτική λειτουργία. Σε αυτή την κατάσταση, κάθε γωνία δεν περιορίζεται σε ένα τέλειο κυκλικό τόξο, αλλά αποκτά ξεχωριστή οριζόντια και κάθετη ακτίνα. Για κάθε γωνία εμφανίζονται δύο ρυθμιστικά: «Οριζόντια» και «Κάθετα».
Αυτή η λειτουργία επιτρέπει τη δημιουργία πιο απαλών, ασύμμετρων και οργανικών σχημάτων, όπως οι «κηλίδες» (blobs). Στο επίπεδο του κώδικα, η γεννήτρια συντάσσει αυτόματα τη μορφή CSS με τη χρήση της καθέτου (slash) για να διαχωρίσει τις οριζόντιες από τις κάθετες τιμές. Όταν η ελλειπτική λειτουργία απενεργοποιείται και οι γωνίες γίνονται ξανά ομοιόμορφα κυκλικές, ο κώδικας επιστρέφει αυτόματα στη σύντομη μορφή του.
Τεχνικές για τη δημιουργία κύκλων και σχημάτων κάψουλας
Με τη σωστή χρήση των μονάδων και των ρυθμιστικών, μπορούν να δημιουργηθούν συγκεκριμένα γεωμετρικά σχήματα:
- Τέλειος κύκλος: Για να μετατραπεί ένα τετράγωνο στοιχείο σε τέλειο κύκλο, ενεργοποιείται η σύνδεση των γωνιών, επιλέγεται η μονάδα "%" και το ρυθμιστικό τοποθετείται στο 50%.
- Σχήμα κάψουλας (pill-shaped button): Για τη σχεδίαση ενός επιμήκους κουμπιού με πλήρως στρογγυλεμένες άκρες, χρησιμοποιείται η μονάδα "px". Σύροντας το ρυθμιστικό σε τιμή μεγαλύτερη από το μισό του ύψους του στοιχείου, οι πλευρές παραμένουν τέλεια ημικυκλικές, ανεξάρτητα από το πόσο θα αυξηθεί το πλάτος του κουμπιού.
Η χρήση των προτύπων
Το εργαλείο ενσωματώνει έτοιμα πρότυπα κάτω από την ενότητα «Πρότυπα», τα οποία επιτρέπουν τη γρήγορη εναλλαγή μεταξύ γνωστών σχημάτων με ένα κλικ:
- Αιχμηρό: Μηδενίζει όλες τις γωνίες για τη δημιουργία ορθογώνιων σχημάτων.
- Στρογγυλεμένο: Εφαρμόζει μια κλασική, ήπια καμπυλότητα στις γωνίες.
- Κύκλος: Θέτει όλες τις γωνίες στο 50%, μετατρέποντας αμέσως ένα τετράγωνο σε κύκλο.
- Κηλίδα (Blob): Δημιουργεί ένα ασύμμετρο, οργανικό σχήμα.
- Φύλλο: Ρυθμίζει τις γωνίες έτσι ώστε το σχήμα να μοιάζει με φύλλο, στρογγυλεύοντας μόνο συγκεκριμένες διαγώνιες γωνίες.
Εφαρμογή του κώδικα CSS και προστασία δεδομένων
Κάτω από την επικεφαλίδα «CSS», το εργαλείο εμφανίζει τον παραγόμενο κώδικα σε πραγματικό χρόνο. Ο χρήστης μπορεί να αντιγράψει τον κώδικα απευθείας στο πρόχειρο χρησιμοποιώντας το κουμπί «Αντιγραφή CSS» και να τον επικολλήσει στο αρχείο στυλ της ιστοσελίδας του.
Όσον αφορά την επεξεργασία των δεδομένων, κάθε γωνία σχεδιάζεται απευθείας στον περιηγητή σας. Καμία από τις ρυθμίσεις σας δεν μεταφορτώνεται στο BroBroGo, διασφαλίζοντας ότι η διαδικασία σχεδιασμού εκτελείται τοπικά στη συσκευή σας.
Συχνές Ερωτήσεις (FAQ)
Πώς λειτουργούν οι τέσσερις γωνίες και η διαφορά μεταξύ px και %;
Τα τέσσερα ρυθμιστικά αντιστοιχούν, δεξιόστροφα, στις γωνίες πάνω-αριστερά, πάνω-δεξιά, κάτω-δεξιά και κάτω-αριστερά. Σε pixel, η γωνία στρογγυλεύει κατά ένα σταθερό ποσό. Σε ποσοστό (%), στρογγυλεύει σε σχέση με το πλαίσιο — το οριζόντιο ποσοστό ακολουθεί το πλάτος και το κάθετο ποσοστό ακολουθεί το ύψος, οπότε το 50% μετατρέπει ένα τετράγωνο σε κύκλο.
Τι κάνει η ελλειπτική λειτουργία (elliptical mode);
Όταν είναι απενεργοποιημένη, κάθε γωνία είναι ένα τεταρτημόριο κύκλου με μία μόνο ακτίνα. Όταν την ενεργοποιείτε, κάθε γωνία αποκτά ξεχωριστή οριζόντια και κάθετη ακτίνα, κάτι που σας επιτρέπει να δημιουργείτε απαλά, οργανικά σχήματα «κηλίδας» (blob). Η γεννήτρια γράφει αυτόματα τη μορφή με την κάθετο (slash) για τις δύο τιμές και επιστρέφει στη σύντομη μορφή μόλις οι γωνίες γίνουν ξανά ομοιόμορφα στρογγυλές.
Πώς μπορώ να φτιάξω έναν τέλειο κύκλο ή σχήμα κάψουλας;
Συνδέστε τις γωνίες, επιλέξτε ποσοστό (%) και ορίστε την τιμή σε 50%: ένα τετράγωνο θα γίνει τέλειος κύκλος. Για ένα κουμπί σε σχήμα κάψουλας (pill), διατηρήστε τα pixel (px) και σύρετε μια γωνία πέρα από το μισό του ύψους του κουμπιού — οι πλευρές θα παραμείνουν πλήρως στρογγυλεμένες σε οποιοδήποτε πλάτος. Το προκαθορισμένο σχήμα «Κύκλος» (Circle preset) εφαρμόζει την πρώτη περίπτωση με ένα κλικ.