Μεταβάσεις CSS3 Δημιουργία εφέ νύχτας Fade
Οι σχεδιαστές ιστοσελίδων είχαν επιθυμήσει από καιρό τον έλεγχο των σελίδων που δημιουργούσαν όταν το CSS3 έπληξε τη σκηνή. Τα νέα στυλ που εισήχθησαν στο CSS3 έδωσαν στους επαγγελματίες του διαδικτύου τη δυνατότητα να προσθέσουν εφέ που μοιάζουν με Photoshop στις σελίδες τους. Αυτό περιλάμβανε ιδιότητες όπως σκιές και λάμψη , στρογγυλεμένες γωνίες και πολλά άλλα. Το CSS3 εισήγαγε επίσης κινούμενα εφέ που μπορούν να χρησιμοποιηθούν για να δημιουργηθεί μια καλή διαδραστικότητα στις τοποθεσίες.
Ένα πολύ ωραίο οπτικό αποτέλεσμα που μπορείτε να προσθέσετε σε στοιχεία στον ιστότοπό σας χρησιμοποιώντας το CSS3 είναι να τα καταστήσετε ξεθωριασμένα μέσα και έξω χρησιμοποιώντας ένα συνδυασμό των ιδιοτήτων για αδιαφάνεια και μετάβαση. Αυτός είναι ένας εύκολος και καλά υποστηριζόμενος τρόπος για να κάνετε τις σελίδες σας πιο αλληλεπιδραστικές, δημιουργώντας ξεθωριασμένες περιοχές που έρχονται στο επίκεντρο όταν ένας επισκέπτης τοποθεσίας κάνει κάτι, σαν να αιωρείται πάνω από αυτό το στοιχείο.
Ας ρίξουμε μια ματιά στο πόσο εύκολο είναι να προσθέσετε αυτό το αλληλεπιδραστικό οπτικό εφέ σε διάφορα στοιχεία στις ιστοσελίδες σας.
Αφήστε να αλλάξετε αδιαφάνεια στο δείκτη του ποντικιού
Θα ξεκινήσουμε εξετάζοντας τον τρόπο αλλαγής της αδιαφάνειας μιας εικόνας όταν ο πελάτης αιωρείται πάνω σε αυτό το στοιχείο. Για αυτό το παράδειγμα (η HTML φαίνεται παρακάτω) Χρησιμοποιώ μια εικόνα με την ιδιότητα class του greydout.
Για να το κάνει γκρίζο, προσθέτουμε τους ακόλουθους κανόνες στυλ στο φύλλο στυλ CSS:
.greydout {
- αδιαφάνεια ιστού: 0,25.
-γλυκαντικό: 0,25;
αδιαφάνεια: 0,25;
}}
Αυτές οι ρυθμίσεις αδιαφάνειας μεταφράζονται στο 25%. Αυτό σημαίνει ότι η εικόνα θα εμφανίζεται ως το 1/4 της κανονικής διαφάνειας. Αδιαφανές, χωρίς διαφάνεια, θα ήταν 100%, ενώ το 0% θα ήταν απόλυτα διαφανές.
Στη συνέχεια, για να κάνετε την εικόνα ξεκάθαρη (ή ακριβέστερα, για να γίνει πλήρως αδιαφανής) όταν το ποντίκι είναι πάνω από αυτό, θα προσθέσετε την εξής: hover pseudo-class:
.greydout: hover {
-webkit-αδιαφάνεια: 1;
-η-αδιαφάνεια: 1;
αδιαφάνεια: 1;
}}
Θα παρατηρήσετε ότι, για αυτά τα παραδείγματα, χρησιμοποιώ τις εκδόσεις του κανόνα του πωλητή με πρόθεμα για να διασφαλίσω την συμβατότητα προς τα πίσω για παλαιότερες εκδόσεις αυτών των προγραμμάτων περιήγησης. Ενώ αυτή είναι μια καλή πρακτική, η πραγματικότητα είναι ότι ο κανόνας αδιαφάνειας υποστηρίζεται τώρα καλά από τους browsers και είναι αρκετά ασφαλές να ρίξουμε αυτές τις προρυθμισμένες γραμμές προμηθευτή. Ακόμα, δεν υπάρχει κανένας λόγος να μην συμπεριληφθούν αυτά τα προθέματα εάν θέλετε να εξασφαλίσετε υποστήριξη για παλιότερες εκδόσεις του προγράμματος περιήγησης. Απλά φροντίστε να ακολουθήσετε την αποδεκτή βέλτιστη πρακτική να τερματίσετε τη δήλωση με την κανονική, μη προ-διορθωμένη έκδοση του στυλ.
Αν αναπτύξατε αυτό σε έναν ιστότοπο, θα δείτε ότι αυτή η προσαρμογή αδιαφάνειας είναι μια πολύ απότομη αλλαγή. Πρώτα είναι γκρίζα και τότε δεν είναι, χωρίς μεταβατικές καταστάσεις μεταξύ αυτών των δύο. Είναι σαν ένα διακόπτη φωτισμού - on ή off. Αυτό μπορεί να είναι αυτό που θέλετε, αλλά μπορεί επίσης να θέλετε να πειραματιστείτε με μια αλλαγή που είναι πιο σταδιακή.
Για να προσθέσετε ένα πολύ ωραίο αποτέλεσμα και να καταστήσετε αυτό το ξεθώριασμα βαθμιαίο, θέλετε να προσθέσετε την ιδιότητα μετάβασης στην κατηγορία .greydout:
.greydout {
- αδιαφάνεια ιστού: 0,25.
-γλυκαντικό: 0,25;
αδιαφάνεια: 0,25;
-webkit-transition: όλα 3s ευκολία?
-moz-transition: όλα 3s ευκολία?
-ms-μετάβαση: όλα 3s ευκολία?
-ο-μετάβαση: όλα 3s ευκολία?
μετάβαση: όλα 3s ευκολία?
}}
Με αυτόν τον κώδικα, η αλλαγή θα ήταν σταδιακή μετάβαση αντί να αλλάζει απότομα.
Για άλλη μια φορά, χρησιμοποιούμε εδώ ορισμένους κανόνες προπληρωμένου προμηθευτή. Η μετάβαση δεν υποστηρίζεται τόσο καλά όσο η αδιαφάνεια, επομένως τα προθέματα αυτά έχουν νόημα.
Ένα πράγμα που πρέπει να θυμάστε καθώς σχεδιάζετε αυτές τις αλληλεπιδράσεις είναι ότι οι συσκευές οθόνης αφής δεν έχουν κατάσταση "αιωρήματος", επομένως αυτά τα αποτελέσματα χάνουν συχνά σε οποιονδήποτε χρησιμοποιεί συσκευή οθόνης αφής όπως κινητό τηλέφωνο. Η μετάβαση θα συμβεί συχνά, αλλά συμβαίνει τόσο γρήγορα που πραγματικά δεν μπορούν να τα δουν. Αυτό είναι καλό αν προσθέτετε αυτό ως ένα ωραίο επεισόδιο μπόνους, αλλά αποφύγετε τυχόν αλλαγές που ΠΡΕΠΕΙ να δει για να γίνει κατανοητό το περιεχόμενο.
Η εξασθένιση είναι πιθανή πάρα πολύ
Δεν χρειάζεται να ξεκινήσετε με μια ξεθωριασμένη εικόνα, μπορείτε να χρησιμοποιήσετε τις μεταβάσεις και την αδιαφάνεια για να ξεθωριάσετε από μια πλήρως αδιαφανή εικόνα. Χρησιμοποιώντας την ίδια εικόνα, μόνο με μια κλάση offadeout:
class = "withfadeout">
Όπως και πριν, αλλάζετε την αδιαφάνεια χρησιμοποιώντας τον επιλογέα: hover:
.withfadeout {
-webkit-transition: all 2s easy-in-out?
-moz-transition: όλα 2s easy-in-out?
-ms-transition: όλα 2s ease-in-out?
-ο-μετάβαση: όλα 2s ease-in-out?
μετάβαση: όλα 2s ease-in-out?
}}
.withfadeout: hover {
- αδιαφάνεια ιστού: 0,25.
-γλυκαντικό: 0,25;
αδιαφάνεια: 0,25;
}}
Σε αυτό το παράδειγμα, η εικόνα θα περνούσε από απόλυτα αδιαφανή σε κάπως διαφανή - το αντίστροφο του πρώτου μας παραδείγματος.
Πηγαίνοντας πέρα από εικόνες
Είναι εξαιρετικό που μπορείτε να εφαρμόσετε αυτές τις οπτικές μεταβάσεις και να εξασθενίσετε στις εικόνες, αλλά δεν περιορίζεστε απλώς στη χρήση εικόνων με αυτά τα εφέ CSS. Μπορείτε εύκολα να κάνετε κουμπιά με στυλ CSS που ξεθωριάζουν όταν κάνετε κλικ και κρατηθούν. Θα θέλατε απλώς την αδιαφάνεια χρησιμοποιώντας την ενεργή ψευδο-τάξη και βάζετε τη μετάβαση στην κλάση που ορίζει το κουμπί. Κάντε κλικ και κρατήστε πατημένο αυτό το κουμπί για να δείτε τι συμβαίνει.
Είναι δυνατόν να εξασθενεί ουσιαστικά οποιοδήποτε οπτικό στοιχείο εξασθενίζει όταν μετατοπίζεται ή κάνει κλικ. Σε αυτό το παράδειγμα αλλάζω την αδιαφάνεια του div και το χρώμα του κειμένου όταν το ποντίκι είναι πάνω από αυτό. Εδώ είναι το CSS:
#myDiv {
πλάτος: 280px;
φόντο-χρώμα: # 557A47;
χρώμα: #dfdfdf;
padding: 10px;
-webkit-transition: όλα τα 4s ease-out 0s?
-moz-transition: όλα 4s ease-out 0s?
-ms-transition: όλα τα 4s ease-out 0s?
-ο-μετάβαση: όλα τα 4s ease-out 0s?
μετάβαση: όλα 4s ease-out 0s?
}}
#myDiv: μετακινήστε {
- αδιαφάνεια ιστού: 0,25.
-γλυκαντικό: 0,25;
αδιαφάνεια: 0,25;
χρώμα: # 000;
}}
Τα μενού πλοήγησης μπορούν να επωφεληθούν από το ξεθώριασμα των χρωμάτων φόντου
Σε αυτό το απλό μενού πλοήγησης, το χρώμα φόντου εξασθενεί αργά και σιγά-σιγά καθώς πατάω το ποντίκι πάνω από τα στοιχεία του μενού. Εδώ είναι το HTML:
- Σπίτι
- CSS3 Tutorials
- Ιδιότητες CSS3
Και εδώ είναι το CSS:
ul # δείγμαNav {style-list: none; }}
ul # sampleNav li {
οθόνη: inline;
float: αριστερά.
padding: 5px 15px;
περιθώριο: 0 5px;
-webkit-transition: all 2s linear;
-moz-transition: όλα 2s γραμμικά?
-ms-transition: όλα 2s γραμμικά?
-ο-μετάβαση: όλα 2s γραμμικά?
μετάβαση: όλα 2s γραμμικά?
}}
ul # sampleNav li a {κείμενο-διακόσμηση: κανένας; }}
ul # δείγμαNav li: hover {
χρώμα φόντου: # DAF197;
}}
Υποστήριξη προγράμματος περιήγησης
Όπως έχω ήδη αγγίξει μερικές φορές ήδη, αυτά τα στυλ έχουν πολύ καλή υποστήριξη του προγράμματος περιήγησης, οπότε θα πρέπει να αισθάνεστε ελεύθεροι να τα χρησιμοποιήσετε χωρίς καμία ανησυχία. Η μόνη εξαίρεση σε αυτό είναι πολύ παλιότερες εκδόσεις του Internet Explorer, αλλά με την πρόσφατη απόφαση της Microsoft να τερματίσει την υποστήριξη για όλες τις εκδόσεις του IE κάτω των 11, αυτά τα παλαιότερα προγράμματα περιήγησης γίνονται όλο και λιγότερο θέμα - και ρεαλιστικά, δείτε αυτή τη μετάβαση, που δεν θα πρέπει να είναι ένα μεγάλο πρόβλημα. Όσο περιορίζετε αυτά τα είδη επιδράσεων στις ευχάριστες αλληλεπιδράσεις και δεν βασίζεστε σε αυτά για να οδηγείτε λειτουργικότητα ή να αποκαλύπτετε περιεχόμενο κλειδί, τότε τα παλαιότερα προγράμματα περιήγησης που δεν υποστηρίζουν τα αποτελέσματα θα έχουν μια λιγότερο ευχάριστη εμπειρία, αλλά οι χρήστες σε αυτά τα προγράμματα περιήγησης δεν θα γνωρίζετε τη διαφορά, ειδικά εάν μπορούν να χρησιμοποιήσουν τον ιστότοπο ως κανονικό και να λάβουν τις πληροφορίες που χρειάζονται.
Extra Fun: Ανταλλάξτε δύο εικόνες
Ακολουθεί ένα παράδειγμα του τρόπου μείωσης της εικόνας σε μια άλλη. Χρησιμοποιήστε το HTML:
Και το CSS καθιστά το ένα πλήρως διαφανές ενώ το άλλο είναι αδιαφανές και στη συνέχεια η μετάβαση αλλάζει τα δύο:
.swapMe img {-webkit-transition: όλα 1s easy-in-out? -moz-transition: όλα 1s ease-in-out? -ms-transition: όλα 1s easy-in-out? -ο-μετάβαση: όλα 1s ease-in-out? μετάβαση: όλα 1s easy-in-out? } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -η-αδιαφάνεια: 1; αδιαφάνεια: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -γλυκαντικό: 0; αδιαφάνεια: 0; }}