Σχετικά με αυτό το εργαλείο
Δημιουργήστε όμορφες γραμμικές και ακτινικές διαβαθμίσεις CSS με έναν οπτικό επεξεργαστή. Επιλέξτε χρώματα, προσαρμόστε τις στάσεις, αλλάξτε κατεύθυνση ή γωνία και δείτε τη ζωντανή ενημέρωση προεπισκόπησης σε πραγματικό χρόνο. Αντιγράψτε τον κώδικα CSS που δημιουργήθηκε — συμπεριλαμβανομένων των προθεμάτων προμηθευτή για παλαιότερα προγράμματα περιήγησης — και επικολλήστε τον απευθείας στο φύλλο στυλ σας.
Συχνές ερωτήσεις
- Οι διαβαθμίσεις CSS λειτουργούν σε όλα τα προγράμματα περιήγησης;
- Οι σύγχρονες διαβαθμίσεις CSS (γραμμική κλίση, ακτινική κλίση) υποστηρίζονται σε όλα τα τρέχοντα προγράμματα περιήγησης, συμπεριλαμβανομένων των Chrome, Firefox, Safari και Edge. Το εργαλείο μπορεί προαιρετικά να δημιουργήσει προθέματα -webkit- για παλαιότερες εκδόσεις του προγράμματος περιήγησης.
- Μπορώ να δημιουργήσω πολύχρωμες διαβαθμίσεις;
- Ναι. Προσθέστε όσες χρωματικές στάσεις χρειάζεστε. Μπορείτε επίσης να προσαρμόσετε τη θέση κάθε στάσης για να ελέγξετε πού αναμειγνύονται τα χρώματα. Αυτό επιτρέπει σύνθετες διαβαθμίσεις ουράνιου τόξου, ηλιοβασιλέματος ή προσαρμοσμένες διαβαθμίσεις επωνυμίας.
- Ποια είναι η διαφορά μεταξύ γραμμικών και ακτινικών κλίσεων;
- Οι γραμμικές διαβαθμίσεις μεταφέρουν τα χρώματα κατά μήκος μιας ευθείας γραμμής (από πάνω προς τα κάτω, από αριστερά προς τα δεξιά, διαγώνια ή οποιαδήποτε γωνία). Οι ακτινικές διαβαθμίσεις μεταφέρουν τα χρώματα προς τα έξω από ένα κεντρικό σημείο σε κυκλικό ή ελλειπτικό σχήμα.
- Μπορώ να χρησιμοποιήσω τη διαβάθμιση ως φόντο για κείμενο;
- Ναι. Χρησιμοποιήστε κλιπ φόντου: κείμενο με -webkit-text-fill-color: διαφανές για την εφαρμογή της διαβάθμισης στο κείμενο. Το CSS που δημιουργείται παρέχει τον ορισμό της κλίσης — συνδυάστε το με αυτές τις ιδιότητες για κείμενο διαβάθμισης.