Γεννήτρια Εφέ Κειμένου CSS

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

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

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

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