Οι σχεδιαστές ιστοσελίδων είχαν επιθυμήσει από καιρό τον έλεγχο των σελίδων που δημιουργούσαν όταν το CSS3 έπληξε τη σκηνή. Τα νέα στυλ που εισήχθησαν στο CSS3 έδωσαν στους επαγγελματίες του διαδικτύου τη δυνατότητα να προσθέσουν εφέ που μοιάζουν με Photoshop στις σελίδες τους. Αυτό περιλάμβανε ιδιότητες όπως σκιές και λάμψη, στρογγυλεμένες γωνίες και πολλά άλλα. Το CSS3 εισήγαγε επίσης κινούμενα εφέ που μπορούν να χρησιμοποιηθούν για να δημιουργηθεί μια καλή διαδραστικότητα στις τοποθεσίες.
Ένα πολύ ωραίο οπτικό αποτέλεσμα που μπορείτε να προσθέσετε σε στοιχεία στον ιστότοπό σας χρησιμοποιώντας το CSS3 είναι να τα καταστήσετε ξεθωριασμένα μέσα και έξω χρησιμοποιώντας ένα συνδυασμό των ιδιοτήτων για αδιαφάνεια και μετάβαση. Αυτός είναι ένας εύκολος και καλά υποστηριζόμενος τρόπος για να κάνετε τις σελίδες σας πιο αλληλεπιδραστικές, δημιουργώντας ξεθωριασμένες περιοχές που έρχονται στο προσκήνιο όταν ένας επισκέπτης τοποθεσίας κάνει κάτι, σαν να αιωρείται πάνω από αυτό το στοιχείο.
Ας ρίξουμε μια ματιά στο πόσο εύκολο είναι να προσθέσετε αυτό το αλληλεπιδραστικό οπτικό εφέ σε διάφορα στοιχεία στις ιστοσελίδες σας.
Αλλαγή αδιαφάνειας στην πλοήγηση
Θα ξεκινήσουμε εξετάζοντας τον τρόπο αλλαγής της αδιαφάνειας μιας εικόνας όταν ο πελάτης αιωρείται πάνω σε αυτό το στοιχείο. Για αυτό το παράδειγμα (η HTML φαίνεται παρακάτω) χρησιμοποιούμε μια εικόνα με το χαρακτηριστικό κλάσης του
greydout.
Για να το κάνει γκρίζο, προσθέτουμε τους ακόλουθους κανόνες στυλ στο φύλλο στυλ CSS: .greydout {- αδιαφάνεια ιστού: 0,25.-γλυκαντικό: 0,25;αδιαφάνεια: 0,25;}
Αυτές οι ρυθμίσεις αδιαφάνειας μεταφράζονται στο 25%. Αυτό σημαίνει ότι η εικόνα θα εμφανίζεται ως το 1/4 της κανονικής διαφάνειας. Αδιαφανές, χωρίς διαφάνεια, θα ήταν 100%, ενώ το 0% θα ήταν απόλυτα διαφανές. Στη συνέχεια, για να καταστεί σαφής η εικόνα (ή ακριβέστερα, για να γίνει πλήρως αδιαφανής) όταν το ποντίκι είναι πάνω από αυτό, θα προσθέσετε το :φτερουγίζωψευδο-τάξη: .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 ευκολία?}
