Cool CSS Hover Effects που χρησιμοποιούν αποκοπή φόντου, μάσκες και 3D

Περπατήσαμε τώρα σε μια σειρά αναρτήσεων σχετικά με ενδιαφέρουσες προσεγγίσεις στα εφέ αιώρησης CSS. Ξεκινήσαμε με ένα δέσμη παραδειγμάτων που χρησιμοποιούν CSS background ιδιότητες, στη συνέχεια προχώρησε στο text-shadow ιδιοκτησία όπου τεχνικά δεν χρησιμοποιήσαμε σκιές. Τα συνδυάσαμε επίσης με μεταβλητές CSS και calc() για να βελτιστοποιήσετε τον κώδικα και να τον διευκολύνετε στη διαχείρισή του.

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

---

Εδώ είναι μόνο μια γεύση από αυτό που φτιάχνουμε:

Εφέ αιώρησης χρησιμοποιώντας background-clip

Ας μιλήσουμε σχετικά background-clip. Αυτή η ιδιότητα CSS δέχεται α text τιμή λέξης-κλειδιού που μας επιτρέπει να εφαρμόσουμε διαβαθμίσεις στο κείμενο ενός στοιχείου αντί του πραγματικού φόντο.

Έτσι, για παράδειγμα, μπορούμε να αλλάξουμε το χρώμα του κειμένου στον δείκτη του ποντικιού όπως θα κάναμε χρησιμοποιώντας το color ιδιότητα, αλλά με αυτόν τον τρόπο ζωντανεύουμε την αλλαγή χρώματος:

Το μόνο που έκανα ήταν να προσθέσω background-clip: text στο στοιχείο και transition ο background-position. Δεν χρειάζεται να είναι πιο περίπλοκο από αυτό!

Αλλά μπορούμε να τα καταφέρουμε καλύτερα αν συνδυάσουμε πολλαπλές διαβαθμίσεις με διαφορετικές τιμές αποκοπής φόντου.

Σε αυτό το παράδειγμα, χρησιμοποιώ δύο διαφορετικές διαβαθμίσεις και δύο τιμές με background-clip. Η πρώτη διαβάθμιση φόντου περικόπτεται στο κείμενο (χάρη στο text τιμή) για να ορίσετε το χρώμα στο δείκτη του ποντικιού, ενώ η δεύτερη διαβάθμιση φόντου δημιουργεί την κάτω υπογράμμιση (χάρη στο padding-box αξία). Όλα τα άλλα αντιγράφονται απευθείας από τη δουλειά που κάναμε στο πρώτο άρθρο της σειράς αυτής.

Τι θα λέγατε για ένα εφέ αιώρησης όπου η γραμμή ολισθαίνει από πάνω προς τα κάτω με τρόπο που μοιάζει σαν το κείμενο να σαρώνεται και μετά να χρωματίζεται:

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

Έχουμε ξύσει μόνο την επιφάνεια του τι μπορούμε να κάνουμε με το δικό μας background-clipδυνάμεις ping! Ωστόσο, αυτή η τεχνική είναι πιθανόν κάτι που θα θέλατε να αποφύγετε να χρησιμοποιήσετε στην παραγωγή, καθώς ο Firefox είναι γνωστό ότι έχει α πολλά αναφερόμενα σφάλματα που σχετίζονται με background-clip. Το Safari έχει επίσης προβλήματα υποστήριξης. Αυτό αφήνει μόνο το Chrome με σταθερή υποστήριξη για αυτό το υλικό, οπότε ίσως να το ανοίξετε καθώς συνεχίζουμε.

Ας προχωρήσουμε σε ένα άλλο εφέ αιώρησης χρησιμοποιώντας background-clip:

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

Αλλά είμαστε εδώ για να δούμε τα προηγμένα εφέ αιώρησης, σωστά; Ας το αλλάξουμε λίγο, ώστε η κίνηση να είναι διαφορετική όταν ο δρομέας του ποντικιού φεύγει από το στοιχείο. Ίδιο εφέ αιώρησης, αλλά διαφορετικό τέλος στο animation:

Cool σωστά; ας αναλύσουμε τον κώδικα:

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

Έχουμε τρία επίπεδα φόντου — δύο κλίσεις και το background-color ορίζεται χρησιμοποιώντας --_c μεταβλητή η οποία αρχικά έχει οριστεί σε διαφανές (#0000). Με το hover, αλλάζουμε το χρώμα σε λευκό και το --_c μεταβλητή στο κύριο χρώμα (--c).

Εδώ είναι τι συμβαίνει σε αυτό transition: Πρώτον, εφαρμόζουμε μια μετάβαση σε όλα αλλά καθυστερούμε το color και background-color by 0.5s για να δημιουργήσετε το εφέ ολίσθησης. Αμέσως μετά, αλλάζουμε το color και την background-color. Μπορεί να μην παρατηρήσετε οπτικές αλλαγές επειδή το κείμενο είναι ήδη λευκό (χάρη στην πρώτη διαβάθμιση) και το φόντο έχει ήδη οριστεί στο κύριο χρώμα (χάρη στη δεύτερη διαβάθμιση).

Στη συνέχεια, με το ποντίκι έξω, εφαρμόζουμε μια στιγμιαία αλλαγή σε όλα (προσέξτε το 0s καθυστέρηση), εκτός από την color και background-color που έχουν μετάβαση. Αυτό σημαίνει ότι επαναφέρουμε όλες τις διαβαθμίσεις στην αρχική τους κατάσταση. Και πάλι, πιθανότατα δεν θα δείτε οπτικές αλλαγές λόγω του κειμένου color και background-color έχει ήδη αλλάξει κατά την αιώρηση.

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

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

Ας μην ξεχνάμε την τεχνική μεταγωγής DRY που χρησιμοποιήσαμε στα προηγούμενα άρθρα αυτής της σειράς για να μειώσετε την ποσότητα του κώδικα χρησιμοποιώντας μόνο μία μεταβλητή για το διακόπτη:

.hover { --c: 16 149 193; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color calc(.5s - var(--_t)) var(--_t), background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover { --_i: 1;
}

Αν αναρωτιέστε γιατί έφτασα στη σύνταξη RGB για το κύριο χρώμα, είναι επειδή έπρεπε να παίξω με τη διαφάνεια άλφα. Χρησιμοποιώ επίσης τη μεταβλητή --_t για να μειώσει έναν περιττό υπολογισμό που χρησιμοποιείται στο transition ιδιοκτησία.

Πριν προχωρήσουμε στο επόμενο μέρος, υπάρχουν περισσότερα παραδείγματα εφέ αιώρησης που έκανα πριν από λίγο καιρό στα οποία βασίζομαι background-clip. Θα ήταν πολύ μεγάλο να περιγράψουμε λεπτομερώς το καθένα, αλλά με όσα μάθαμε μέχρι τώρα μπορείτε εύκολα να κατανοήσετε τον κώδικα. Μπορεί να είναι καλή έμπνευση να δοκιμάσετε μερικά από αυτά μόνοι σας χωρίς να κοιτάξετε τον κώδικα.

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

Τοποθετήστε εφέ με το δείκτη του ποντικιού χρησιμοποιώντας CSS mask

Μάντεψε? Το CSS mask Η ιδιοκτησία χρησιμοποιεί διαβαθμίσεις με τον ίδιο τρόπο background ιδιοκτησία κάνει, οπότε θα δείτε ότι αυτό που φτιάχνουμε στη συνέχεια είναι αρκετά απλό.

Ας ξεκινήσουμε δημιουργώντας μια φανταχτερή υπογράμμιση.

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

Εισαγάγετε CSS mask.

Ο κώδικας μπορεί να φαίνεται περίεργος, αλλά η λογική εξακολουθεί να είναι η ίδια όπως κάναμε με όλα τα προηγούμενα κινούμενα σχέδια φόντου. ο mask αποτελείται από δύο κλίσεις. Η πρώτη διαβάθμιση ορίζεται με ένα αδιαφανές χρώμα που καλύπτει την περιοχή περιεχομένου (χάρη στο content-box αξία). Αυτή η πρώτη διαβάθμιση κάνει το κείμενο ορατό και κρύβει το κάτω περίγραμμα ζιγκ-ζαγκ. content-box είναι το mask-clip τιμή που συμπεριφέρεται το ίδιο με background-clip

linear-gradient(#000 0 0) content-box

Η δεύτερη κλίση θα καλύψει ολόκληρη την περιοχή (χάρη σε padding-box). Αυτό έχει ένα πλάτος που ορίζεται χρησιμοποιώντας το --_p μεταβλητή και θα τοποθετηθεί στην αριστερή πλευρά του στοιχείου.

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

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

.hover:hover { --_p: 100%; color: var(--c);
}

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

Με ένα τέτοιο κόλπο, μπορούμε εύκολα να δημιουργήσουμε πολλές παραλλαγές χρησιμοποιώντας απλώς μια διαφορετική διαμόρφωση ντεγκραντέ με το mask ιδιοκτησία:

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

Ας αλλάξουμε τη διαμόρφωση του φόντου αντικαθιστώντας την υπογράμμιση ζιγκ-ζαγκ με μια κυματιστή υπογράμμιση:

Άλλη μια συλλογή από εφέ hover! Διατήρησα όλες τις διαμορφώσεις μάσκας και άλλαξα το φόντο για να δημιουργήσω ένα διαφορετικό σχήμα. Τώρα, μπορείτε να καταλάβετε πώς μπόρεσα για να φτάσετε τα 400 εφέ αιώρησης χωρίς ψευδοστοιχεία — και μπορούμε ακόμα να έχουμε περισσότερα!

Όπως, γιατί όχι κάτι σαν αυτό:

Εδώ είναι μια πρόκληση για εσάς: Το περίγραμμα σε αυτήν την τελευταία επίδειξη είναι μια διαβάθμιση που χρησιμοποιεί το mask ιδιοκτησία για να το αποκαλύψει. Μπορείτε να καταλάβετε τη λογική πίσω από το animation; Μπορεί να φαίνεται περίπλοκο με την πρώτη ματιά, αλλά είναι εξαιρετικά παρόμοιο με τη λογική που έχουμε εξετάσει για τα περισσότερα από τα άλλα εφέ αιώρησης που βασίζονται σε διαβαθμίσεις. Γράψτε την εξήγησή σας στα σχόλια!

Εφέ αιώρησης σε 3D

Μπορεί να πιστεύετε ότι είναι αδύνατο να δημιουργήσετε ένα εφέ 3D με ένα μόνο στοιχείο (και χωρίς να καταφύγετε σε ψευδοστοιχεία!) αλλά το CSS έχει έναν τρόπο να το πραγματοποιήσει.

Αυτό που βλέπετε εκεί δεν είναι ένα πραγματικό 3D εφέ, αλλά μάλλον μια τέλεια ψευδαίσθηση 3D στον 2D χώρο που συνδυάζει το CSS background, clip-path, να transform ιδιότητες.

Το πρώτο πράγμα που κάνουμε είναι να ορίσουμε τις μεταβλητές μας:

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

Στη συνέχεια δημιουργούμε ένα διαφανές περίγραμμα με πλάτη που χρησιμοποιούν τις παραπάνω μεταβλητές:

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

Η επάνω και η δεξιά πλευρά του στοιχείου πρέπει και οι δύο να είναι ίσες με το --b τιμή ενώ η κάτω και η αριστερή πλευρά πρέπει να ισούνται με το άθροισμα των --b και --d (Ποιο είναι το --_s μεταβλητός).

Για το δεύτερο μέρος του κόλπου, πρέπει να ορίσουμε μια κλίση που να καλύπτει όλες τις συνοριακές περιοχές που ορίσαμε προηγουμένως. ΕΝΑ conic-gradient θα λειτουργήσει για αυτό:

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

Προσθέτουμε άλλη μια κλίση για το τρίτο μέρος του κόλπου. Αυτό θα χρησιμοποιήσει δύο ημιδιαφανείς τιμές λευκού χρώματος που επικαλύπτουν την πρώτη προηγούμενη διαβάθμιση για να δημιουργήσει διαφορετικές αποχρώσεις του κύριου χρώματος, δίνοντάς μας την ψευδαίσθηση της σκίασης και του βάθους.

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

Το τελευταίο βήμα είναι να εφαρμόσετε α CSS clip-path για να κόψετε τις γωνίες για αυτή τη μεγάλη αίσθηση σκιάς:

clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%
)

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

Παρατηρήστε τις συντεταγμένες από το προηγούμενο σχήμα (που υποδεικνύεται με κόκκινο). Ας ενημερώσουμε αυτά για να δημιουργήσουμε την κινούμενη εικόνα:

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

Το κόλπο είναι να κρύψετε το κάτω και το αριστερό μέρος του στοιχείου, έτσι ώστε το μόνο που απομένει να είναι ένα ορθογώνιο στοιχείο χωρίς καθόλου βάθος.

Αυτό το στυλό απομονώνει το clip-path μέρος της κινούμενης εικόνας για να δείτε τι κάνει:

Η τελευταία πινελιά είναι να μετακινήσετε το στοιχείο προς την αντίθετη κατεύθυνση χρησιμοποιώντας translate — και η ψευδαίσθηση είναι τέλεια! Ακολουθεί το εφέ που χρησιμοποιεί διαφορετικές προσαρμοσμένες τιμές ιδιοτήτων για διαφορετικά βάθη:

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

Συνδυάζοντας εφέ!

Το φοβερό με όλα όσα έχουμε καλύψει είναι ότι όλα αλληλοσυμπληρώνονται. Εδώ είναι ένα παράδειγμα όπου προσθέτω ο text-shadow αποτέλεσμα από το δεύτερο άρθρο στη σειρά προς το background τεχνική animation από το πρώτο άρθρο ενώ χρησιμοποιούσαμε το τρισδιάστατο κόλπο που μόλις καλύψαμε:

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

Επιτρέψτε μου να ολοκληρώσω αυτό το άρθρο με ένα τελευταίο εφέ αιώρησης όπου συνδυάζω φόντο, διαδρομή κλιπ και μια παύλα perspective για να προσομοιώσετε ένα άλλο 3D εφέ:

Εφάρμοσα το ίδιο εφέ σε εικόνες και το αποτέλεσμα ήταν αρκετά καλό για την προσομοίωση 3D με ένα μόνο στοιχείο:

Θέλετε μια πιο προσεκτική ματιά στο πώς λειτουργεί αυτό το τελευταίο demo; Έγραψα κάτι πάνω του.

Ολοκληρώνοντας

Ουφ, τελειώσαμε! Ξέρω ότι είναι πολύ δύσκολο CSS, αλλά (1) είμαστε στον κατάλληλο ιστότοπο για κάτι τέτοιο και (2) ο στόχος είναι να προωθήσουμε την κατανόησή μας για τις διαφορετικές ιδιότητες CSS σε νέα επίπεδα, επιτρέποντάς τους να αλληλεπιδράσουν με ο ενας τον ΑΛΛΟΝ.

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

---

Cool CSS Hover Effects που χρησιμοποιούν αποκοπή φόντου, μάσκες και 3D δημοσιεύθηκε αρχικά στις CSS-Κόλπα. Θα έπρεπε λάβετε το ενημερωτικό δελτίο.

• Coinsmart. Το καλύτερο ανταλλακτήριο Bitcoin και Crypto στην Ευρώπη.
• Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. ΕΛΕΥΘΕΡΗ ΠΡΟΣΒΑΣΗ.
• CryptoHawk. Ραντάρ Altcoin. Δωρεάν δοκιμή.
• Πηγή: https://css-tricks.com/css-hover-effects-background-masks-3d/