Γεννήτρια διαβαθμίσεων CSS
Δημιούργησε γραμμικές και ακτινικές διαβαθμίσεις CSS με ζωντανή προεπισκόπηση και αντέγραψε έτοιμο κώδικα background.
Σχετικά εργαλεία
Πώς να χρησιμοποιήσετε το Διαβάθμιση CSS
- 01
Επίλεξε γραμμική ή ακτινική διαβάθμιση.
- 02
Πρόσθεσε σημεία χρώματος και σύρε το χρώμα και τη θέση τους.
- 03
Για γραμμική διαβάθμιση, όρισε τη γωνία με το ρυθμιστικό.
- 04
Αντίγραψε το CSS στο stylesheet σου.
Τι κάνει
Δημιουργεί γραμμικές και ακτινικές διαβαθμίσεις από σημεία χρώματος που ελέγχεις, με ζωντανή προεπισκόπηση και έτοιμη δήλωση background. Σύρε τα σημεία, όρισε γωνία ή σχήμα και το CSS ενημερώνεται αμέσως.
Όλα εκτελούνται στο πρόγραμμα περιήγησης, τίποτα δεν μεταφορτώνεται και μπορείς να χρησιμοποιήσεις το αποτέλεσμα εκτός σύνδεσης.
Γραμμικές και ακτινικές διαβαθμίσεις
Η γραμμική διαβάθμιση αναμειγνύει χρώματα σε ευθεία και η γωνία καθορίζει κατεύθυνση: 0 μοίρες πάνω, 90 δεξιά, 180 κάτω. Η ακτινική απλώνεται από το κέντρο ως κύκλος ή έλλειψη.
Και οι δύο είναι τυπικές τιμές CSS, linear-gradient() και radial-gradient(), και χρησιμοποιούν την ίδια λίστα σημείων χρώματος.
Εργασία με σημεία χρώματος
Κάθε σημείο είναι ένα χρώμα σε θέση από 0% έως 100%. Η διαβάθμιση αναμειγνύει ομαλά γειτονικά σημεία και η θέση καθορίζει πού κορυφώνεται το χρώμα.
Πρόσθεσε όσα σημεία χρειάζεσαι, σύρε τα για λεπτομερή ρύθμιση ή πάτησε στη γραμμή για νέο σημείο. Απαιτούνται τουλάχιστον δύο.
Χρήση του CSS στο έργο σου
Αντίγραψε τον κώδικα ως background οποιουδήποτε στοιχείου, όπως ενότητα, κάρτα ή κουμπί. Τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν τις τιμές χωρίς πρόθεμα.
Μπορείς επίσης να χρησιμοποιήσεις τη διαβάθμιση όπου αναμένεται εικόνα φόντου, να τη στρώσεις πάνω σε συμπαγές χρώμα ή να επαναχρησιμοποιήσεις τα ίδια σημεία σε γραμμική και ακτινική έκδοση.
Συχνές ερωτήσεις
Ποια είναι η διαφορά γραμμικής και ακτινικής διαβάθμισης;
Η γραμμική αναμειγνύει χρώματα κατά μήκος ευθείας στη γωνία που ορίζεις. Η ακτινική απλώνεται από το κέντρο σε κύκλο. Και οι δύο χρησιμοποιούν τα ίδια σημεία χρώματος.
Πώς λειτουργούν τα σημεία χρώματος;
Κάθε σημείο είναι χρώμα σε θέση από 0% έως 100%. Η μετακίνησή του αλλάζει πού κορυφώνεται το χρώμα.
Πώς χρησιμοποιώ το CSS;
Αντίγραψε τον κώδικα στην ιδιότητα background οποιουδήποτε στοιχείου. Λειτουργεί σε κάθε σύγχρονο πρόγραμμα περιήγησης χωρίς πρόθεμα.
Μπορώ να προσθέσω περισσότερα από δύο χρώματα;
Ναι. Πρόσθεσε όσα σημεία θέλεις και όρισε τη θέση τους για να ελέγξεις την ανάμειξη.
Ανεβαίνει κάτι;
Όχι. Η διαβάθμιση δημιουργείται πλήρως στο πρόγραμμα περιήγησης και τίποτα δεν αποστέλλεται σε διακομιστή.