ο νέα στυλ που εισήχθησαν στο CSS3 έδωσε στους επαγγελματίες του διαδικτύου τη δυνατότητα να προσθέσουν εφέ όπως το Photoshop στις σελίδες τους. Ένα οπτικό εφέ που μπορείτε να προσθέσετε χρησιμοποιώντας CSS3 είναι να κάνουμε τις ιστοσελίδες διαδραστικές δημιουργώντας ξεθωριασμένες περιοχές που έρχονται στο επίκεντρο όταν ένας επισκέπτης ιστότοπου κάνει κάτι, όπως το να αιωρείται πάνω από αυτό το στοιχείο. Αυτό το εφέ χρησιμοποιεί έναν συνδυασμό αδιαφάνεια και μετάβαση.
Αλλαγή αδιαφάνειας στο Hover
Ένα διαδραστικό στοιχείο είναι να αλλάξετε την αδιαφάνεια μιας εικόνας όταν ένας πελάτης αιωρείται πάνω από αυτό το στοιχείο. Για αυτό το παράδειγμα (ο HTML εμφανίζεται παρακάτω), χρησιμοποιούμε μια εικόνα με το χαρακτηριστικό κλάσης του γκριζάουτ.
Για να το κάνετε γκρι, προσθέστε τους ακόλουθους κανόνες στυλ στο φύλλο στυλ CSS:
.greydout {
-webkit-αδιαφάνεια: 0,25;
-moz-αδιαφάνεια: 0,25
αδιαφάνεια: 0,25;
}
Αυτές οι ρυθμίσεις αδιαφάνειας μεταφράζονται σε 25 τοις εκατό. Αυτό σημαίνει ότι η εικόνα θα εμφανίζεται ως το 1/4 της κανονικής της διαφάνειας. Πλήρως αδιαφανές χωρίς διαφάνεια θα είναι 100 τοις εκατό, ενώ το 0 τοις εκατό θα είναι εντελώς διαφανές.
Στη συνέχεια, για να καταστεί η εικόνα σαφής (ή ακριβέστερα, για να γίνει πλήρως αδιαφανής) όταν το ποντίκι αιωρείται πάνω του, θα προσθέσετε τα ακόλουθα:
.greydout: αιωρηθείτε {
-webkit-αδιαφάνεια: 1;
-moz-αδιαφάνεια: 1;
αδιαφάνεια: 1;
}
Περισσότερες ρυθμίσεις αδιαφάνειας
Θα παρατηρήσετε ότι, για αυτά τα παραδείγματα, χρησιμοποιούμε τις προδιαγραφές προμηθευτή του κανόνα για να διασφαλίσουμε συμβατότητα με παλαιότερες εκδόσεις αυτών των προγραμμάτων περιήγησης. Ενώ αυτή είναι μια καλή πρακτική, ο κανόνας αδιαφάνειας υποστηρίζεται καλά από τα προγράμματα περιήγησηςκαι είναι ασφαλές να αποθέσετε αυτές τις προκαταρκτικές γραμμές προμηθευτή.
Ωστόσο, δεν υπάρχει λόγος να μην συμπεριλάβετε αυτά τα προθέματα εάν θέλετε να διασφαλίσετε υποστήριξη για παλαιότερες εκδόσεις προγράμματος περιήγησης. Απλώς φροντίστε να ακολουθήσετε την αποδεκτή βέλτιστη πρακτική τερματισμού της δήλωσης με την κανονική, μη προκαταρκτική έκδοση του στυλ.
Όταν αναπτύσσεται σε έναν ιστότοπο, αυτή η προσαρμογή αδιαφάνειας είναι μια απότομη αλλαγή. Πρώτον, είναι γκρι και μετά δεν είναι, χωρίς ενδιάμεσες καταστάσεις μεταξύ αυτών των δύο. Είναι σαν διακόπτης φωτός - ενεργοποίηση ή απενεργοποίηση. Αυτό μπορεί να είναι αυτό που θέλετε, αλλά μπορεί επίσης να θέλετε να πειραματιστείτε με μια πιο σταδιακή αλλαγή.
Για να προσθέσετε ένα ωραίο εφέ και να κάνετε αυτό το ξεθώριασμα σταδιακά, προσθέστε το μετάβαση ιδιοκτησία:
. γκρίζο
τάξη: .greydout {
-webkit-αδιαφάνεια: 0,25;
-moz-αδιαφάνεια: 0,25
αδιαφάνεια: 0,25;
-webkit-μετάβαση: όλα τα 3s ευκολία?
-moz-μετάβαση: και τα 3s ευκολία
-ms-μετάβαση: όλα τα 3s ευκολία?
-o-μετάβαση: όλα τα 3s ευκολία?
μετάβαση: όλα τα 3s ευκολία?
}