Γεννήτρια CSS Gradient
Δημιουργήστε εντυπωσιακά CSS gradient οπτικά. Δημιουργήστε γραμμικά, ακτινικά και κωνικά gradient με πολλαπλές στάσεις χρώματος, γωνίες και θέσεις. Αντιγράψτε κώδικα CSS έτοιμο για παραγωγή αμέσως.
Τι είναι ένα CSS gradient;
Ένα CSS gradient είναι μια τιμή εικόνας CSS που εμφανίζει ομαλές μεταβάσεις μεταξύ δύο ή περισσότερων χρωμάτων χωρίς αρχεία εικόνας. Τα gradient αποδίδονται από το πρόγραμμα περιήγησης, καθιστώντας τα ανεξάρτητα από την ανάλυση και υψηλής απόδοσης.
Ποιοι τύποι CSS gradient υποστηρίζονται;
Αυτή η γεννήτρια υποστηρίζει τρεις τύπους: linear-gradient (χρώματα κατά μήκος ευθείας), radial-gradient (χρώματα που ακτινοβολούν από το κέντρο) και conic-gradient (χρώματα που περιστρέφονται γύρω από ένα κεντρικό σημείο).
Διαφορά γραμμικού και ακτινικού gradient;
Τα γραμμικά gradient μεταβαίνουν χρώματα κατά μήκος ευθείας που ορίζεται από γωνία ή λέξη-κλειδί κατεύθυνσης. Τα ακτινικά gradient μεταβαίνουν χρώματα προς τα έξω από ένα κεντρικό σημείο σε κυκλικά ή ελλειπτικά σχήματα.
Πόσες στάσεις χρώματος μπορώ να χρησιμοποιήσω;
Μπορείτε να χρησιμοποιήσετε όσες στάσεις χρώματος χρειάζεστε. Κάθε στάση ορίζει ένα χρώμα και προαιρετικά μια θέση (0% έως 100%) κατά μήκος της γραμμής gradient. Πολλαπλές στάσεις δημιουργούν πολύπλοκες πολύχρωμες μεταβάσεις.
Πώς χρησιμοποιώ τον δημιουργημένο κώδικα CSS;
Αντιγράψτε τον δημιουργημένο κώδικα CSS και επικολλήστε τον ως τιμή για την ιδιότητα background ή background-image στο φύλλο στυλ CSS. Ο κώδικας λειτουργεί σε όλα τα σύγχρονα προγράμματα περιήγησης.
Τι είναι οι στάσεις χρώματος στα gradient;
Οι στάσεις χρώματος ορίζουν συγκεκριμένα χρώματα σε συγκεκριμένες θέσεις κατά μήκος της γραμμής gradient. Για παράδειγμα, "red 0%, blue 50%, green 100%" δημιουργεί ένα gradient από κόκκινο μέσω μπλε στο μέσο προς πράσινο.
Μπορώ να δημιουργήσω γωνιακά gradient;
Ναι, τα γραμμικά gradient υποστηρίζουν τιμές γωνίας από 0deg έως 360deg. Μπορείτε επίσης να χρησιμοποιήσετε λέξεις-κλειδιά κατεύθυνσης όπως "to right", "to bottom", "to top left".
Τα CSS gradient είναι ανταποκρινόμενα;
Ναι, τα CSS gradient είναι εγγενώς ανταποκρινόμενα επειδή είναι διανυσματικά και αποδίδονται από το πρόγραμμα περιήγησης. Κλιμακώνονται τέλεια σε οποιοδήποτε μέγεθος χωρίς απώλεια ποιότητας ή αύξηση αρχείου.
Τα CSS gradient επηρεάζουν την απόδοση;
Τα CSS gradient είναι γενικά πολύ αποδοτικά. Εξαλείφουν αιτήματα HTTP για αρχεία εικόνας και επιταχύνονται από υλικό. Ωστόσο, εξαιρετικά πολύπλοκα gradient μπορεί να επηρεάσουν την απόδοση σε συσκευές χαμηλού επιπέδου.
Μπορώ να χρησιμοποιήσω gradient σε φόντο και περιγράμματα;
Ναι, τα gradient μπορούν να χρησιμοποιηθούν για background-image, border-image, mask-image και οποιαδήποτε ιδιότητα δέχεται τιμές εικόνας CSS.
Ποια προγράμματα περιήγησης υποστηρίζουν CSS gradient;
Όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν CSS gradient: Chrome, Firefox, Safari, Edge και Opera. Η υποστήριξη είναι εξαιρετική από IE10. Τα προθέματα κατασκευαστή δεν απαιτούνται πλέον.
Πώς δημιουργώ επαναλαμβανόμενο gradient;
Χρησιμοποιήστε repeating-linear-gradient ή repeating-radial-gradient αντί των τυπικών εκδόσεων. Επαναλαμβάνουν το μοτίβο gradient για να γεμίσουν ολόκληρο το στοιχείο, δημιουργώντας ριγέ ή μοτίβα.
Μπορώ να ανιμαίσω τα CSS gradient;
Τα CSS gradient δεν μπορούν να ανιμαιστούν απευθείας με μεταβάσεις CSS. Μπορείτε όμως να ανιμαίσετε background-position, background-size ή να χρησιμοποιήσετε προσαρμοσμένες ιδιότητες CSS με @property.
Αυτή η γεννήτρια gradient είναι δωρεάν;
Ναι, αυτή η γεννήτρια CSS gradient είναι εντελώς δωρεάν. Δεν απαιτείται εγγραφή, δεν υπάρχουν όρια χρήσης και όλος ο κώδικας είναι δικός σας για οποιοδήποτε έργο χωρίς απόδοση.