15 ωραία εφέ κειμένου που δημιουργήθηκαν με CSS

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

Και για να το δείξουμε αυτό, έχουμε συγκεντρώσει 15 εκπληκτικά και δροσερά εφέ κειμένου που γίνονται δυνατά με το CSS (μερικοί με λίγη βοήθεια από τους κώδικες Javascript).

Για περισσότερα πράγματα που μπορείτε να κάνετε με το CSS, ελέγξτε έξω:

• 18 δροσερά πράγματα που δεν θα πιστέψετε δημιουργήθηκαν χρησιμοποιώντας το CSS
• 30 βιβλιοθήκες jQuery για κείμενο που πρέπει να γνωρίζετε
• Πώς να δημιουργήσετε σχήμα καρδιάς με το CSS
• Animate.css - Βιβλιοθήκη CSS3 για εύκολη δημιουργία κινούμενων σχεδίων

Ελαστικό εγκεφαλικό επεισόδιο

Ο Yoksel ζωντανεύει το κτύπημα του κειμένου με ένα δροσερό χρωματικό σχέδιο. Αυτό το αποτέλεσμα γίνεται με CSS και SVG. Το αποτέλεσμα είναι εκπληκτικό!

SVG Glitch

Θέλετε να κάνετε εφέ που μοιάζουν με σπασμένη αναλογική τηλεόραση; Ο Dirk Weber έκανε αυτό το εντυπωσιακό σφάλμα χρησιμοποιώντας το φίλτρο CSS και SVG.

Λογότυπο Shop Talk

Το λογότυπο του Shop Talk αναδημιουργείται από τον Hugo χρησιμοποιώντας μόνο CSS. Το λογότυπο μοιάζει με το πρωτότυπο, με τη σωστή υφή.

Χαμηλή επίδραση

Αυτή η ιδέα από τον Robet Messerle δίνει το αποτέλεσμα με το μαχαίρι κομμένο σε φέτες, που γίνεται με λιγότερες από 70 σειρές CSS.

Κομψή Εφέ Σκιάσεων

Το φαινόμενο Long Shadow έρχεται στο κείμενο, χρησιμοποιώντας το CSS. Ο δημιουργός, Juan Brujo έκανε 4 άλλα αποτελέσματα, αλλά αυτό είναι εύκολα το πιο εντυπωσιακό.

Ελαφρύ αποτέλεσμα κειμένου

Ο Ανδρέας δημιουργεί ένα θαυμάσιο κινηματογραφικό φαινόμενο ομίχλης. Ισχύει μόνο στα προγράμματα περιήγησης Webkit.

Κάλυψη κειμένου SVG

Ένα σχέδιο από τον Marco Barria δείχνει ένα κομψό αποτέλεσμα αποκρύψεως κειμένου σε μια μεγάλη εικόνα φόντου.

Κείμενο Animation

Ο Yoann δημιούργησε ένα θαυμάσιο εφέ κίνησης με αυτό το κινούμενο κείμενο. Παρακολουθήστε πώς η δεύτερη λέξη εναλλάσσεται μεταξύ τριών λέξεων.

Χτύπα το πάτωμα

Αυτό το εφέ 3D από το ThatGuySam είναι ένα απλό παιχνίδι σε σκιά κειμένου, αλλά με ένα εκπληκτικό αποτέλεσμα.

Κείμενο κειμένου φόντου

Ο Jintos έπαιζε γύρω με ένα κλιπ φόντου Webkit για να προσθέσει μια εικόνα φόντου μέσα στο κείμενο. Έκανε 16 δροσερές δημιουργίες χρησιμοποιώντας αυτή τη μέθοδο.

CSS Text-FX

Ο Moklik πρόσθεσε στο κείμενο το αχνό φωτισμό, δίνοντάς σας διαλείπουσες αναλαμπές που προειδοποιούν για τον κίνδυνο από μακριά.

Κινούμενη υπογραφή υπογραφής

Ο Gary Hepting δημιούργησε μια κινούμενη εικόνα υπογραφής σε πραγματικό χρόνο. Αυτό λειτουργεί με την εφαρμογή της Javascript στη διαδρομή SVG για να ενεργοποιήσετε την υπογραφή.

Πολύχρωμο Glitchy 404

Μπορείτε να ακούσετε τον ήχο αυτού του προβλήματος και να αισθανθείτε τη δόνηση μέσα στο κεφάλι σας; Αυτό είναι το πόσο καλό είναι αυτό το φαινόμενο σφάλματος. mistic100 γίνεται με CSS συν ένα κομμάτι της Javascript.

Σύμπαν

Τώρα αυτό είναι ένα κομψό και εμπνευσμένο λογότυπο. Είναι επίσης κατάλληλο για χρήση για “Σύμπαν”, γιατί οι τροχιές, το πάρτε?

Φόρτωση

Ένα δροσερό αποτέλεσμα φόρτωσης που είναι απλά η απόκρυψη και η εμφάνιση των γραμμάτων.