Δημιουργία εφέ κειμένου CSS

Οι περισσότερες γκαλερί με εφέ κειμένου CSS σας δίνουν μια σταθερή προεπιλογή: μια λάμψη νέον, μια τρισδιάστατη εξώθηση, πάρτε την ή αφήστε την. Αυτή η γεννήτρια δημιουργεί το CSS από τις παραμέτρους σας, στο κείμενο που πραγματικά πληκτρολογείτε. Επιλέξτε λάμψη νέον, 3D-extrude, letterpress/ ανάγλυφο, με περίγραμμα ή ντεγκραντέ γέμισμα από την επιλογή εφέ, προσαρμόστε τα χειριστήρια αυτού του εφέ και η ζωντανή προεπισκόπηση και το μπλοκ CSS με δυνατότητα αντιγραφής από κάτω ενημερώνονται για κάθε αλλαγή.

Το εφέ 3D-extrude είναι αυτό που αξίζει να κατανοήσετε: για ένα επιλεγμένο βάθος (αριθμός στοιβαγμένων στρωμάτων) και γωνία, το στρώμα i μετατοπίζεται κατά i × cos(γωνία) οριζόντια και i × sin(γωνία) κατακόρυφα, υπολογισμένο σε JavaScript με τις πραγματικές τριγωνομετρικές συναρτήσεις — δεν διαβάζεται από πίνακα αναζήτησης προκαθορισμένων γωνιών. Στις 45 μοίρες η οριζόντια και η κατακόρυφη μετατόπιση είναι ίσες για κάθε στρώμα, επειδή το συνημίτονο και το ημίτονο των 45° έχουν την ίδια τιμή. περιστρέψτε το ρυθμιστικό γωνίας και παρακολουθήστε ολόκληρη τη στοίβα των στρώσεων «κείμενο-σκιάς» να περιστρέφεται γύρω από τα γράμματα σε πραγματικό χρόνο, καθένα από τα οποία είναι πιο σκούρο από το προηγούμενο για να προσποιηθεί ένα φωτισμένο τρισδιάστατο πρόσωπο.

Η λάμψη νέον στοιβάζει τέσσερα επίπεδα «text-shadow» αυξανόμενης ακτίνας θαμπώματος στο χρώμα που έχετε επιλέξει, με ένα προαιρετικό τρεμόπαιγμα: ενεργοποιήστε το και δημιουργείται ένας κανόνας «@keyframes» με μια τυχαία ακολουθία μειώσεων αδιαφάνειας και κινείται ζωντανά, και ένα κουμπί τυχαίας αναπαραγωγής σάς επιτρέπει να επανατοποθετήσετε το μοτίβο χωρίς να γράψετε ούτε ένα βασικό καρέ με το χέρι. Το περιγραμμένο κείμενο εφαρμόζεται "-webkit-text-stroke" για προγράμματα περιήγησης που το υποστηρίζουν, καθώς και ένα ειλικρινές εναλλακτικό "text-shadow" 8 κατευθύνσεων για εκείνα που δεν το κάνουν — και οι δύο γραμμές αποστέλλονται στο αντιγραμμένο CSS με μια σημείωση σχετικά με το γιατί. Gradient-fill κόβει μια «γραμμική διαβάθμιση» στο σχήμα κειμένου με το «background-clip: text», τώρα μια τυπική ιδιότητα με ευρεία υποστήριξη, διατηρώντας την παλαιότερη γραμμή προθέματος «-webkit-» για κινητήρες παλαιού τύπου.

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