Δημιουργία κειμένου δυναμικής διαβάθμισης σε CSS: Οδηγός κώδικα, σχεδίασης και εξαγωγής

Κατανόηση κειμένου διαβάθμισης σε CSS

Το κείμενο διαβάθμισης είναι η εφαρμογή των εφέ διαβάθμισης - ομαλές μεταβάσεις από δύο ή περισσότερα χρώματα - σε στοιχεία κειμένου μέσω CSS, αντί να εφαρμόζετε ένα μόνο χρώμα.Η μέθοδος δίνει μια μοντέρνα εμφάνιση στο κείμενο και μπορεί να χρησιμοποιηθεί σε τίτλους κεφαλίδας ιστού, στοιχεία μάρκας και κινούμενα διεπαφές χρήστη.

Η εφαρμογή κειμένου διαβάθμισης CSS έχει πολλά σημαντικά οφέλη στο σχεδιασμό UI / UX.Από οπτική άποψη, δημιουργεί αισθητική αξία και παρέχει μια σύγχρονη, πρωτοποριακή εμφάνιση και αίσθηση με άμεση ματιά.Το δυναμικό στυλ ενισχύει επίσης τη δέσμευση στις σελίδες προορισμού και στα τμήματα ηρώων, εισάγοντας μεταβάσεις κίνησης ή χρωμάτων, προσελκύοντας την προσοχή του θεατή.Το κείμενο διαβάθμισης δίνει επίσης στους σχεδιαστές πρόσθετη ελευθερία έκφρασης για να παρουσιάσουν την ταυτότητα της μάρκας μέσω διακριτικών επιλογών χρωμάτων και οπτικού βάθους που επιτυγχάνονται μέσω των στρωμάτων.

Τύποι διαβάθμισης για κείμενο που πρέπει να γνωρίζετε

Χρησιμοποιώντας κείμενο διαβάθμισης σε CSS σημαίνει ότι γνωρίζετε τους διάφορους τύπους διαβαθμίσεων για να δημιουργήσετε το αποτέλεσμα που ψάχνετε.Το CSS φιλοξενεί διάφορους τύπους διαβάθμισης χρώματος γραμματοσειράς, ο καθένας με έναν συγκεκριμένο τρόπο παρουσίασης των μεταβάσεων μεταξύ των χρωμάτων.

Γραμμικές κλίσεις

Το γραμμικό χρώμα κειμένου διαβάθμισης στο CSS χρησιμοποιείται συχνά και περιλαμβάνει την αποφοίτηση των χρωμάτων σε ευθεία γραμμή - οριζόντια, κάθετα ή διαγώνια.Η σύνταξη έχει ως εξής:

Σύνταξη: γραμμική κλίση (κατεύθυνση, color-stop1, color-stop2).

Για παράδειγμα, η γραμμική κλίση (προς τα δεξιά, # ff7e5f, # feb47b) παράγει ένα φαινόμενο οριζόντιας κλίσης.Αυτό μπορεί να χρησιμοποιηθεί για καθαρές επικεφαλίδες, πανό ή κείμενα ηρώων όπου είναι απαραίτητη μια απρόσκοπτη μετατόπιση χρώματος από πλευρά σε πλευρά.

Ακτινικές κλίσεις

Οι ακτινικές κλίσεις ακτινοβολούν από ένα μόνο κέντρο και σχηματίζουν μια γενική κυκλική ή ελλειπτική κλίση χρωμάτων.Η σύνταξη είναι:

Σύνταξη: ακτινική κλίση (σχήμα, χρώμα-stop1, χρώμα-stop2).

Ένα δείγμα όπως η ακτινική κλίση (κύκλος, # 6a11cb, # 2575fc) παράγει ένα λαμπερό ή ηλιακό εφέ ιδανικό για τη δημιουργία βάθους σε λογότυπα, ετικέτες ή την επισήμανση στοιχείων κειμένου σε σύγχρονα σχέδια UI.

Κωνικές κλίσεις

Οι κωνικές κλίσεις περιστρέφουν τα χρώματα γύρω από ένα κεντρικό σημείο, όπως οι φέτες ενός διαγράμματος πίτας.Η σύνταξή τους μοιάζει με αυτό: κωνική διαβάθμιση (color-stop1, color-stop2).Για παράδειγμα, η κωνική κλίση (από 0deg, κόκκινο, κίτρινο, πράσινο, κόκκινο) δημιουργεί μια κυκλική περιστροφή των χρωμάτων.Αυτές οι διαβαθμίσεις χρησιμοποιούνται συχνά για πιο καλλιτεχνικό ή infographic-style κείμενο, δίνοντας τυπογραφία σας μια δυναμική και απροσδόκητη συστροφή.

Πώς να δημιουργήσετε ένα animation διαβάθμισης κειμένου σε CSS

Η δημιουργία ενός CSS gradient text color ή gradient text effect σε CSS είναι εκπληκτικά απλή αλλά με οπτικό αντίκτυπο.Εδώ είναι μια ανάλυση βήμα προς βήμα εμπνευσμένη από το φροντιστήριο:

ΒΗΜΑ 1
1. Ρύθμιση των αρχείων του έργου σας

Ξεκινήστε δημιουργώντας ένα νέο φάκελο και ανοίξτε τον στον προτιμώμενο επεξεργαστή κώδικα (όπως τον κώδικα VS).Στο εσωτερικό, δημιουργήστε δύο αρχεία: index.html και style.CSS.

ΒΗΜΑ 2
1. Εγγραφή βασικού HTML

Στο index.html, προσθέστε μια δομή boilerplate και συμπεριλάβετε μια ετικέτα < h1 > για το κείμενο διαβάθμισης.Συνδέστε το αρχείο style.CSS στην ενότητα < head >.

<! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" / > < meta name = "viewport" content = "width = device-width, initi- scale = 1.0" / > < title > Αναβάθμιση Κειμένου < / title > < link rel = "stylesheet" href = "style.CSS" / > < / head > < body > < h1 > Κείμενο Κινούμενης Αναβάθμισης < / h1 > < / body > < / html >

ΒΗΜΑ 3
1. Στυλ του σώματος χρησιμοποιώντας ΣΣΣ

Στο style.CSS, συγκεντρώστε το περιεχόμενό σας χρησιμοποιώντας το Flexbox και εφαρμόστε ένα σκοτεινό φόντο για αντίθεση:

σώμα {περιθώριο: 0; παραγέμισμα: 0; ύψος: 100vh; οθόνη: flex; δικαιολόγηση-περιεχόμενο: κέντρο; align-αντικείμενα: κέντρο; φόντο: # 181818; γραμματοσειρά-οικογένεια: 'Poppins', sans-serif;}

ΒΗΜΑ 4
1. Προσθήκη και κλιπ του φόντου διαβάθμισης στο κείμενο

Στυλοποιήστε την ετικέτα h1 για να εφαρμόσετε το φόντο διαβάθμισης και κλιπ στο κείμενο:

h1 {font-size: 4rem; background: linear-gradient (90deg, # ff6a00, # ee0979, # ff6a00); background-size: 200%; background-clip: text; -webkit-background-clip : κείμενο; χρώμα: διαφανές; animation: κλίση-animation 3s γραμμικό άπειρο;}

ΒΗΜΑ 5
1. Κίνηση της κλίσης

Τώρα, ορίστε τα πλήκτρα για να δημιουργήσετε μια κινούμενη κλίση κειμένου από αριστερά προς τα δεξιά στο CSS:

@ keyframes gradient-animation {0% {φόντο-θέση: 200% 50%;} 100% {φόντο-θέση: 0% 50%;}}

Τύπος: Για ομαλότερες μεταβάσεις, επαναλάβετε την πρώτη διαβάθμιση χρώματος γραμματοσειράς σε CSS στο τέλος (όπως φαίνεται στο # ff6a00 χρησιμοποιείται δύο φορές).Αυτό βοηθά στην αποφυγή απότομων άλματα χρώματος κατά τη διάρκεια του βρόχου κίνησης.

Δεν ξέρεις να γράφεις σαν αρχάριος;Μην ανησυχείτε, το CapCut καθιστά εξαιρετικά εύκολο να δημιουργήσετε εκπληκτικά εφέ κειμένου διαβάθμισης για τις εικόνες ή τα βίντεό σας με λίγες μόνο βρύσες.

Χρήση του CapCut για σχεδιασμό διαβαθμισμένου κειμένου χωρίς κώδικα

Επεξεργαστής βίντεο επιφάνειας εργασίας CapCut Είναι ένα ισχυρό και πολλαπλών χρήσεων εργαλείο σχεδιασμού πλούσιο σε δημιουργικά χαρακτηριστικά επεξεργασίας κειμένου, όπως μάσκες, εφέ κειμένου και προσαρμογή γραμματοσειρών.Η ικανότητά του να δημιουργεί πολύχρωμο κείμενο διαβάθμισης χωρίς να χρειάζεται να πληκτρολογήσει μια γραμμή κώδικα το καθιστά μια εξαιρετικά χρήσιμη εφαρμογή για σχεδιαστές και δημιουργούς.Η μάσκα και τα εφέ κειμένου του CapCut κάνουν εξαιρετικά προηγμένη και professional-looking Δυνατότητα σχεδιασμού κειμένου.Χρησιμοποιώντας την επιλογή μάσκα, μπορείτε να αναμίξετε κείμενο διαβάθμισης και οποιοδήποτε τύπο σχήματος, που κυμαίνεται από γραμμική και ακτινική έως μάσκες καθρέφτη, και να δημιουργήσετε βάθος και διάσταση.Ξεκινήστε με το CapCut σήμερα και αρχίστε να δημιουργείτε φοβερό κείμενο διαβάθμισης για τη δημοσίευσή σας χωρίς καμία κωδικοποίηση!

Βασικά χαρακτηριστικά

• Μάσκες: Με τη λειτουργία μάσκας του CapCut, μπορείτε να συνδυάσετε πολλαπλά στρώματα κειμένου για να δημιουργήσετε απρόσκοπτα, προσαρμοσμένα εφέ κλίσης.
• Εφέ κειμένου: CapCut περιλαμβάνει δυναμική Εφέ κειμένου όπως λάμψη, σκιά, νέον και εγκεφαλικό επεισόδιο.Αυτά μπορούν να βελτιώσουν την εμφάνιση του κειμένου διαβάθμισης προσθέτοντας βάθος και κλίση.
• Επιλογές εξαγωγής: Το CapCut σας επιτρέπει να το εξάγετε ως υψηλής ποιότητας PNG, ιδανικό για ενσωμάτωση σε ιστότοπους που χρησιμοποιούν HTML / CSS.

Πώς να δημιουργήσετε κείμενο διαβάθμισης στο CapCut

ΒΗΜΑ 1
1. Εισαγωγή μέσων και κειμένου

Ανοίξτε το CapCut και δημιουργήστε ένα νέο έργο.Εισάγετε την εικόνα φόντου ή το βίντεό σας στο χρονοδιάγραμμα ή ανεβάστε το με μη αυτόματο τρόπο κάνοντας κλικ στο "Εισαγωγή". Προχωρήστε στην καρτέλα "Κείμενο" και κάντε κλικ στο "Προσθήκη κειμένου". Εισάγετε το μήνυμά σας για στυλιζάρισμα.

ΒΗΜΑ 2
1. Δημιουργία κειμένου διαβάθμισης

Η δημιουργία της διαβάθμισης ξεκινά με την αναπαραγωγή του στρώματος κειμένου και την τοποθέτηση του αντιγράφου πάνω από το πρωτότυπο στην περιοχή της γραμμής του χρόνου.Αλλάξτε το χρώμα του επάνω κειμένου για να προσθέσετε αντίθεση και κάντε δεξί κλικ και επιλέξτε "Δημιουργία σύνθετου συνδετήρα".

Επιλέξτε το επάνω κλιπ και κατευθυνθείτε προς την καρτέλα "Βίντεο" και εφαρμόστε μια "Μάσκα". Ρυθμίστε τις ρυθμίσεις γωνίας και φτερών για να καθορίσετε την κατεύθυνση και την ομαλότητα της μετάβασης κλίσης.

ΒΗΜΑ 3
1. Εξαγωγή του αρχείου

Μόλις ολοκληρωθεί το κείμενο διαβάθμισης, κάντε κλικ στο κουμπί "Εξαγωγή" στην επάνω δεξιά γωνία.Εάν θέλετε να χρησιμοποιήσετε το κείμενο διαβάθμισης σε έναν ιστότοπο (όπως ένα τμήμα ήρωα ή banner), επιλέξτε τη μορφή PNG για να εξαγάγετε μια στατική εικόνα, ιδανική για ενσωμάτωση CSS / HTML.Εναλλακτικά, εξαγάγετε το ως αρχείο βίντεο (π.χ. MP4) εάν σκοπεύετε να το χρησιμοποιήσετε σε περιεχόμενο που βασίζεται σε κίνηση, όπως εισαγωγές, κυλίνδρους ή κινούμενες κεφαλίδες ιστού.

Συμβουλές και προτάσεις καλλωπισμού για διαβαθμισμένο κείμενο

• Επιλέξτε συμπληρωματικά χρώματα για ομαλότερες μεταβάσεις Ναι. Εξαιρετική διαβάθμιση κειμένου αρχίζει με καλή αντιστοίχιση χρωμάτων.Επιλέξτε καλά τις αποχρώσεις αυτής της μετάβασης και συμπληρώστε τον τόνο του κειμένου σας.Με το CapCut, μπορείτε να δοκιμάσετε πολλά μείγματα χρωμάτων σε πραγματικό χρόνο.
• Χρησιμοποιήστε μάσκες για τον έλεγχο της κλίσης ακριβείας Ναι. Γίνονται σημαντικές αν επιθυμείτε οι κλίσεις σας να πάρουν μια συγκεκριμένη μορφή ή κατεύθυνση.Καθορίζουν πώς τα χρώματα μεταβαίνουν από το ένα στο άλλο.Το CapCut διαθέτει ένα σύνολο εύχρηστων επιλογών μάσκας, όπως split, κύκλο ή αστέρια.Εφαρμόστε τα σε αντιγραμμένα στρώματα κειμένου και προσαρμόσετε τα φτερά για να δημιουργήσετε αισθητικά ευχάριστες μεταβάσεις με απόλυτη ακρίβεια.
• Ενσωμάτωση μικρών σκιών κειμένου για βάθος Ναι. Οι σκιές ή οι λάμψεις που εφαρμόζονται στο κείμενο διαβάθμισης θα το κάνουν να ξεχωρίζει πάνω από πολυάσχολα υπόβαθρα, δίνοντας μια αίσθηση βάθους και αναγνωσιμότητας.Μπορείτε να προσθέσετε εφέ σκιάς χρησιμοποιώντας το CapCut.Αυτό αναπαράγει μια απαλή σκιά και καθιστά το κείμενο εύκολο να διαβαστεί χωρίς να συντρίψει το σχέδιό σας.
• Κίνηση του κειμένου διαβάθμισης για μια σύγχρονη εμφάνιση Ναι. Η κίνηση δίνει μια επαγγελματική ματιά σε ένα σχέδιο.Το κινούμενο κείμενο διαβάθμισης φαίνεται δυναμικό και τραβάει την προσοχή καλύτερα από τις στατικές εικόνες.Το CapCut έχει μια επιλογή από πρότυπα κινούμενων σχεδίων κειμένου, συμπεριλαμβανομένων των "Pop Up", "Fade" και "Zoom". Αυτά μπορούν να συνδυαστούν με τα στρώματα διαβάθμισης και να χρησιμοποιηθούν για να κάνουν μια κομψή εισαγωγή και ένα outro ή looping κοινωνικά κλιπ.
• Χρόνος του κειμένου σε μουσική ή βίντεο Ναι. Ο συγχρονισμός κειμένου διαβάθμισης σε ρυθμούς ή μεταβάσεις σε ένα βίντεο παρέχει μια αρμονική και συναρπαστική εμπειρία.Ο χρόνος παίζει σημαντικό ρόλο στο να κάνετε το σχέδιό σας να φαίνεται εσκεμμένο.Στο CapCut, μπορείτε να εφαρμόσετε δείκτες beat και απλά να σύρετε και να αποθέσετε τα στρώματα κειμένου στη γραμμή χρόνου για να ευθυγραμμιστείτε με τα ηχητικά σήματα ή τις περικοπές βίντεο.
• Εξαγωγή στη σωστή ανάλυση και μορφή Ναι. Μόλις το σχέδιό σας οριστικοποιηθεί, η σωστή εξαγωγή του θα το κάνει να φαίνεται αιχμηρό σε κάθε πλατφόρμα.Επιλέξτε μορφές ανάλογα με το αν είναι στατικό ή κινούμενο υλικό.Μπορείτε να το εξάγετε ως PNG για σκοπούς HTML και CSS ή ως βίντεο υψηλής ποιότητας για ψηφιακό υλικό.Επιλέξτε 2K ή 4K για ποιότητα, ακόμη και σε μεγαλύτερες οθόνες, για να επιτύχετε απότομες κλίσεις.

Συμπέρασμα

Σε αυτό το άρθρο, μάθατε πώς να δημιουργήσετε κείμενο διαβάθμισης σε CSS.Απαιτεί γνώση των κωδικών.Η δημιουργία κειμένου διαβάθμισης δεν περιλαμβάνει προγραμματισμό όταν είστε εξοπλισμένοι με το σωστό σύνολο εργαλείων. Το CapCut είναι το τέλειο παράδειγμα.Δίνει έναν οπτικό, χωρίς κώδικα τρόπο δημιουργίας εκπληκτικού διαβαθμισμένου κειμένου.Τα χαρακτηριστικά του, όπως μάσκες, σύνθετα κλιπ, εφέ κειμένου και προεπιλογές κινούμενων σχεδίων, σας επιτρέπουν να πειραματιστείτε ελεύθερα με τις μεταβάσεις χρωμάτων και την κίνηση.Είτε κάνετε στατικές απεικονίσεις ιστού είτε δυναμική τυπογραφία για ιστότοπους κοινωνικής δικτύωσης, το CapCut σας επιτρέπει να απεικονίσετε και να εξάγετε το σχέδιό σας ακριβώς όπως το βλέπετε.Δοκιμάστε το CapCut τώρα και ξεκινήστε να δημιουργείτε κείμενο διαβάθμισης για να κάνετε το έργο σας να ξεχωρίζει, χωρίς ποτέ να χρειάζεται να πληκτρολογήσετε μια γραμμή κώδικα.

Συχνές ερωτήσεις

1
1. Κείμενο διαβάθμισης σε CSS Λειτουργεί σε όλους τους browsers;

Το κείμενο διαβάθμισης μέσω του CSS background-clip: text θα λειτουργεί στα περισσότερα σύγχρονα προγράμματα περιήγησης ιστού, όπως το Chrome, το Edge και το Safari, αλλά δεν θα λειτουργεί σωστά σε παλαιότερες εκδόσεις του Internet Explorer ή σε παλαιότερα προγράμματα περιήγησης.Μπορείτε να αγκαλιάσετε το CapCut για να δημιουργήσετε ένα στατικό PNG του κειμένου διαβάθμισης για να επιτύχετε ευρύτερη συμβατότητα.Αυτό θα κάνει το σχέδιό σας να φαίνεται ομοιόμορφο σε κάθε πλατφόρμα και συσκευή.

2
1. Πώς να κάνετε το κείμενο διαβάθμισης να ανταποκρίνεται;

Για να εξασφαλίσετε ότι το κινούμενο κείμενο διαβάθμισης στο CSS ανταποκρίνεται, χρησιμοποιήστε κλιμακούμενες μονάδες γραμματοσειράς όπως em, rem ή vw και ρυθμίστε στυλ με ερωτήματα πολυμέσων για διαφορετικά μεγέθη οθόνης.Για κινούμενα σχέδια, τα πλήκτρα CSS μπορούν να ενεργοποιήσουν τη θέση φόντου.Να ένα γρήγορο παράδειγμα:

.gradient-text {background: linear-gradient (90deg, # ff8a00, # e52e71, # 9b00ff); background-size: 200% auto; background-clip: text; -webkit-background-clip : κείμενο; χρώμα: διαφανές; animation: gradientMove 3s linear infinite;} @ keyframes gradientMove {0% {background-position: 200% center;} 100% {background-position: 0% center;}

3
1. Πώς να εξαγάγετε κείμενο διαβάθμισης από το CapCut στο ΣΣΣ Τι;

Το CapCut δεν εξάγει άμεσα κώδικα CSS.Αντ 'αυτού, μπορείτε να αναδημιουργήσετε με μη αυτόματο τρόπο το εφέ κειμένου διαβάθμισης σε CSS, εξάγοντας τις τιμές χρώματος και την κατεύθυνση της διαβάθμισης που χρησιμοποιείται στο CapCut.