Ίσως είστε εξοικειωμένοι με τη χρήση κειμένου για να αποκρύψετε μια εικόνα στο Photoshop. είναι ο πιο γνωστός τρόπος για να προσθέσετε κάποια υφή ή ακόμα και φόντο φόντου στο κείμενο σας. Στη συνέχεια, μπορείτε να χρησιμοποιήσετε αυτό το κείμενο ως εικόνα στον ιστότοπό σας. Ωστόσο, δεν θα ήταν υπέροχο αν μπορούσατε να εφαρμόσετε το ίδιο αποτέλεσμα χρησιμοποιώντας μόνο HTML και CSS; Τα καλά νέα είναι ότι μπορείτε!
Το CSS έχει εισαγάγει ιδιότητες όπως κλιπ φόντου και μάσκα-εικόνα που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε παρόμοια αποτελέσματα με αυτά που δημιουργείτε στο Photoshop. Επιπλέον, θα μπορούσατε επίσης να χρησιμοποιήσετε το SVG για να κόψετε μια εικόνα με κείμενο.
Σήμερα, θα εξετάσουμε τις επιλογές, και ακόμη θα ρίξουμε κάποια απλά κινούμενα σχέδια. Εάν θέλετε να ακολουθήσετε μαζί με τον κώδικα, μπορείτε κατεβάστε τα αρχεία εδώ.
Προβλεπόμενα, μερικές από τις ιδιότητες που θα χρησιμοποιήσουμε δεν υποστηρίζονται καθολικά, πράγμα που σημαίνει ότι θα αποτύχουν σε προγράμματα περιήγησης όπως το IE και το Firefox. Τα καλά νέα είναι ότι αυτές οι ιδιότητες θα αποτύχουν σιωπηλά, πράγμα που σημαίνει ότι αυτές οι τεχνικές είναι μια προοδευτική ενίσχυση και πρόστιμο για χρήση σε ιστότοπους.
Η πρώτη επιλογή που θα εξετάσουμε είναι η ιδιότητα του κλιπ φόντου . Αυτή η ιδιότητα θα καθορίσει εάν το φόντο θα επεκταθεί στα σύνορα ή όχι. Επιτρέπει στο κείμενο ενός ορισμένου στοιχείου να κλιματίζει μια εικόνα.
Το markup μας είναι απλά ένα h1 με την κατηγορία bgClip:
Clip Text
Τώρα, ας προσθέσουμε τη μαγεία με το CSS ...
Θα προσθέσουμε υφή στο κείμενό μας με μια εικόνα του νυχτερινού ουρανού. Θα διασφαλίσουμε επίσης ότι το κείμενο αποδίδεται ομαλά χρησιμοποιώντας εξομοίωση γραμματοσειράς. Λάβετε υπόψη ότι για να λειτουργήσει αυτό το χρώμα κειμένου πρέπει να είναι διαφανές, γι 'αυτό και θα χρησιμοποιήσουμε το κείμενο fill-color: διαφανές.
.bgClip {background:url('../images/clouds.jpg');background-repeat:repeat-x;background-position:0 0;font-size:200px;text-transform:uppercase;text-align:center;font-family:'Luckiest Guy';color:transparent;-webkit-font-smoothing:antialiased;-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:0;Τώρα θέλουμε να προσθέσουμε λίγο animation για να κάνουμε το φόντο πιο δελεαστικό:
-webkit-animation:BackgroundAnimated 15s linear infinite;-moz-animation:BackgroundAnimated 15s linear infinite;-ms-animation:BackgroundAnimated 15s linear infinite;-o-animation:BackgroundAnimated 15s linear infinite;animation:BackgroundAnimated 15s linear infinite;}@keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}@-webkit-keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}@-ms-keyframes BackgroundAnimated {< from {background-position:0 0}to {background-position:100% 0}}@-moz-keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}Εδώ είναι το αποτέλεσμα:
Η τελευταία τεχνική που θα εξετάσουμε είναι η δημιουργία κειμένου με εικόνα μάσκας. Η βασική λειτουργικότητα αυτής της ιδιότητας είναι ότι θα αποσπάσει την περιοχή του κειμένου που είναι ορατή με βάση την αδιαφάνεια.
Το μόνο που χρειαζόμαστε είναι ένα στοιχείο h1 τυλιγμένο σε ένα div:
Mask Text
Για να αποκρύψετε την εικόνα με το κείμενο, θα χρησιμοποιήσουμε την εικόνα -webkit-mask για να καθορίσετε την εικόνα και θα προσθέσουμε επίσης μια ωραία σκιά κειμένου για καλή μέτρηση. Τέλος, θέλω να κάνω μερικά ομαλά εφέ κίνησης για να αποκαλύψω ολόκληρο το κείμενο σχετικά με το ποντίκι (μόνο και μόνο επειδή μπορούμε):
#maskText h1 {font-size: 200px;font-family: 'Lilita One', sans-serif;color: #ffe400;text-shadow: 7px 7px 0px #34495e;text-transform: uppercase;text-align: center;margin: 0;display: block;-webkit-mask-image: url('../images/texture.png');-webkit-transition:all 2s ease;-moz-transition:all 2s ease;-o-transition:all 2s ease;transition:all 2s ease;}#maskText h1:hover{-webkit-mask-image: url('../images/texture-hover.png');cursor: pointer;color: #ffe400;}Εδώ είναι το αποτέλεσμα: