Οι βασικές αρχές των CSS gradients
Η «Γεννήτρια διαβαθμίσεων (Gradient)» υποστηρίζει τους τρεις βασικούς τύπους διαβαθμίσεων του CSS: τη γραμμική, την ακτινωτή και την κωνική.
- Γραμμική (Linear): Αναμιγνύει τα χρώματα κατά μήκος μιας ευθείας γραμμής, με τη γωνία να καθορίζει την κατεύθυνσή της.
- Ακτινωτή (Radial): Απλώνει τα χρώματα προς τα έξω από το κέντρο σε σχήμα κύκλου ή έλλειψης.
- Κωνική (Conic): Περιστρέφει τα χρώματα γύρω από το κέντρο σαν χρωματικό τροχό.
Κάθε διαβάθμιση διαμορφώνεται με τη χρήση σημείων χρώματος (color stops), τα οποία ορίζουν ένα χρώμα καρφιτσωμένο σε μια θέση από το 0% έως το 100%. Το εργαλείο σάς επιτρέπει να προσθέσετε έως και οκτώ σημεία χρώματος για να δημιουργήσετε την επιθυμητή ανάμειξη.
Κατανόηση των γραμμικών διαβαθμίσεων
Μια γραμμική διαβάθμιση αναμιγνύει τα χρώματα κατά μήκος μιας ευθείας γραμμής. Η κατεύθυνση αυτής της γραμμής καθορίζεται από τη γωνία που ορίζει ο χρήστης.
Στη «Γεννήτρια διαβαθμίσεων (Gradient)», η ρύθμιση της γωνίας γίνεται μέσω ενός αριθμητικού πεδίου ή ρυθμιστικού. Οι τιμές της γωνίας ακολουθούν το πρότυπο του CSS:
- Στις 0° η κατεύθυνση της διαβάθμισης δείχνει προς τα πάνω.
- Στις 90° η κατεύθυνση στρέφεται προς τα δεξιά.
Η αρχική κατάσταση του εργαλείου περιλαμβάνει μια γραμμική διαβάθμιση με δύο προκαθορισμένα σημεία χρώματος: το #6366f1 τοποθετημένο στο 0% και το #ec4899 τοποθετημένο στο 100%.
Εξερεύνηση των ακτινωτών διαβαθμίσεων
Η ακτινωτή διαβάθμιση απλώνει τα χρώματα προς τα έξω, ξεκινώντας από ένα κεντρικό σημείο. Σε αντίθεση με τις γραμμικές διαβαθμίσεις, οι ακτινωτές δεν χρησιμοποιούν γωνία για τον καθορισμό της κατεύθυνσης.
Η διάχυση του χρώματος καθορίζεται από το σχήμα της διαβάθμισης. Η γεννήτρια παρέχει δύο επιλογές για τη διαμόρφωση αυτού του σχήματος:
- Έλλειψη: Το χρώμα απλώνεται σε ελλειπτικό σχήμα, προσαρμοζόμενο στις αναλογίες του στοιχείου.
- Κύκλος: Η διάχυση γίνεται ομοιόμορφα σε κυκλικό σχήμα, διατηρώντας σταθερή ακτίνα προς όλες τις κατευθύνσεις.
Κωνικές διαβαθμίσεις
Η κωνική διαβάθμιση περιστρέφει τα χρώματα γύρω από ένα κεντρικό σημείο, δημιουργώντας ένα αποτέλεσμα που προσομοιάζει με χρωματικό τροχό. Η μετάβαση των χρωμάτων δεν γίνεται από το κέντρο προς τα έξω ούτε κατά μήκος μιας ευθείας, αλλά κυκλικά, ακολουθώντας τη φορά των δεικτών του ρολογιού.
Όπως και στη γραμμική διαβάθμιση, η αρχική γωνία εκκίνησης της περιστροφής ορίζεται από το ρυθμιστικό γωνίας, όπου οι 0° δείχνουν προς τα πάνω και οι 90° προς τα δεξιά.
Ο ρόλος των σημείων χρώματος στη σχεδίαση
Τα σημεία χρώματος (color stops) καθορίζουν ποια χρώματα θα εμφανίζονται στη διαβάθμιση και σε ποια ακριβώς σημεία της διαδρομής θα τοποθετούνται.
- Θέση σημείου: Κάθε σημείο χρώματος συνοδεύεται από μια τιμή ποσοστού από 0% (αρχή της διαβάθμισης) έως 100% (τέλος της διαβάθμισης).
- Προσθήκη νέων σημείων: Όταν προσθέτετε ένα νέο σημείο χρώματος, αυτό τοποθετείται αυτόματα στην προκαθορισμένη θέση 50%.
- Όριο σημείων: Το εργαλείο επιτρέπει την προσθήκη έως και οκτώ σημείων χρώματος. Μόλις συμπληρωθεί ο μέγιστος αριθμός των οκτώ σημείων, το κουμπί «Προσθήκη σημείου» απενεργοποιείται.
Λειτουργία και χρήση του εργαλείου
Η «Γεννήτρια διαβαθμίσεων (Gradient)» παρέχει άμεση οπτική ανατροφοδότηση και παραγωγή κώδικα CSS. Η ροή εργασίας περιλαμβάνει τα εξής βήματα:
- Επιλογή τύπου: Στην ενότητα «Τύπος διαβάθμισης», επιλέγετε μεταξύ των «Γραμμική (Linear)», «Ακτινωτή (Radial)» ή «Κωνική (Conic)».
- Ρύθμιση κατεύθυνσης ή σχήματος: Ανάλογα με τον τύπο, ορίζετε τη «Γωνία» (για γραμμικές και κωνικές) ή το «Σχήμα» επιλέγοντας «Έλλειψη» ή «Κύκλος» (για ακτινωτές).
- Διαχείριση χρωμάτων: Στην ενότητα «Σημεία χρώματος», τροποποιείτε το «Χρώμα σημείου» και τη «Θέση» για κάθε σημείο. Μπορείτε να χρησιμοποιήσετε το κουμπί «Προσθήκη σημείου» ή «Αφαίρεση σημείου» για να ελέγξετε το πλήθος τους.
- Αντιγραφή κώδικα: Στο πλαίσιο «CSS» εμφανίζεται ο παραγόμενος κώδικας. Κάνοντας κλικ στο κουμπί «Αντιγραφή CSS», η κατάσταση του κουμπιού αλλάζει για να υποδείξει ότι η αντιγραφή ολοκληρώθηκε, επιβεβαιώνοντας την επιτυχή αντιγραφή στο πρόχειρο της συσκευής σας.
Κάθε διαβάθμιση αποδίδεται απευθείας στον περιηγητή σας. Καμία από τις ρυθμίσεις σας δεν μεταφορτώνεται στο BroBroGo.
Συχνές Ερωτήσεις (FAQ)
Ποια είναι η διαφορά μεταξύ γραμμικών, ακτινωτών και κωνικών διαβαθμίσεων;
Μια γραμμική (linear) διαβάθμιση αναμιγνύει τα χρώματα κατά μήκος μιας ευθείας γραμμής που κατευθύνετε με μια γωνία. Μια ακτινωτή (radial) διαβάθμιση τα απλώνει προς τα έξω από το κέντρο σε σχήμα κύκλου ή έλλειψης. Μια κωνική (conic) διαβάθμιση τα περιστρέφει γύρω από το κέντρο σαν χρωματικό τροχό.
Τι είναι τα σημεία χρώματος (color stops);
Κάθε σημείο χρώματος (color stop) είναι ένα χρώμα καρφιτσωμένο σε μια θέση κατά μήκος της διαβάθμισης — 0% στην αρχή, 100% στο τέλος. Μετακινήστε ένα σημείο για να αλλάξετε το σημείο κορύφωσης του χρώματος ή προσθέστε περισσότερα σημεία για μια πιο πλούσια ανάμειξη. Μπορείτε να χρησιμοποιήσετε έως και οκτώ.
Πώς ελέγχω την κατεύθυνση;
Για μια γραμμική (linear) ή κωνική (conic) διαβάθμιση, το ρυθμιστικό γωνίας ορίζει την κατεύθυνση — οι 0° δείχνουν προς τα πάνω, οι 90° προς τα δεξιά. Μια ακτινωτή (radial) διαβάθμιση δεν έχει γωνία. Αντ' αυτού, επιλέξτε σχήμα κύκλου ή έλλειψης για να αλλάξετε τον τρόπο εξάπλωσής της.
Πού γίνεται η επεξεργασία των δεδομένων μου;
Κάθε διαβάθμιση αποδίδεται απευθείας στον περιηγητή σας. Καμία από τις ρυθμίσεις σας δεν μεταφορτώνεται στο BroBroGo.