Το CSS3 εισήγαγε αμέτρητες δυνατότητες για τους σχεδιαστές της UX και το καλύτερο πράγμα για αυτούς είναι ότι τα πιο ωραία μέρη είναι πραγματικά απλά να υλοποιηθούν.
Μόνο μερικές γραμμές κώδικα θα σας δώσουν ένα φοβερό εφέ μετάβασης που θα σας ενθουσιάσει, θα αυξήσει την αφοσίωση και τελικά, όταν χρησιμοποιηθεί καλά, θα αυξήσει τις μετατροπές σας. Επιπλέον, αυτά τα αποτελέσματα είναι επιταχυνόμενα από το υλικό και μια προοδευτική βελτίωση που μπορείτε να χρησιμοποιήσετε αυτή τη στιγμή.
Εδώ είναι 8 πραγματικά απλά εφέ που θα προσθέσουν ζωή στο UI σας και θα χαμογελάσουν στα πρόσωπα των χρηστών σας.
Όλα αυτά τα αποτελέσματα (bar one) ελέγχονται με την ιδιότητα μετάβασης. Έτσι μπορούμε να δούμε αυτά τα αποτελέσματα να λειτουργούν, θα δημιουργήσουμε ένα div σε μια σελίδα HTML:
Έχοντας το πράξει, ορίστε το πλάτος και το ύψος του (ώστε να έχει διαστάσεις), το χρώμα του φόντου (έτσι μπορούμε να το δούμε) και την ιδιότητα μετάβασης του.
Η ιδιότητα μετάβασης έχει τρεις τιμές: τις ιδιότητες προς μετάβαση (στην περίπτωσή μας όλες) την ταχύτητα της μετάβασης (στην περίπτωσή μας 0,3 δευτερόλεπτα) και μια τρίτη τιμή που σας επιτρέπει να αλλάξετε τον τρόπο υπολογισμού της επιτάχυνσης και της επιβράδυνσης, θα κολλήσει με την προεπιλογή αφήνοντας αυτό κενό.
Τώρα το μόνο που χρειάζεται να κάνουμε είναι να αλλάξουμε τις ιδιότητες και θα ζωντανέψουν για εμάς ...
Αν θέλετε να ακολουθήσετε, μπορείτε κατεβάστε τα αρχεία επίδειξης εδώ.
Έχοντας τα πράγματα να ξεθωριάζουν είναι ένα αρκετά κοινό αίτημα από τους πελάτες. Είναι ένας πολύ καλός τρόπος για να τονίσουμε τη λειτουργικότητα ή να επιστήσουμε την προσοχή σε μια πρόσκληση για δράση.
Η εξασθένιση των αποτελεσμάτων κωδικοποιείται σε δύο βήματα: πρώτα, ρυθμίζετε την αρχική κατάσταση. στη συνέχεια, ρυθμίζετε την αλλαγή, για παράδειγμα στην επίσκεψη:
.fade{opacity:0.5;}.fade:hover{opacity:1;}(Βεβαιωθείτε ότι έχετε ρυθμίσει την τάξη του div σας για να "ξεθωριάσει" για να δείτε αυτό το έργο.)
Για να αναπτυχθεί ένα στοιχείο, έπρεπε να χρησιμοποιείτε το πλάτος και το ύψος του, ή την επένδυση. Αλλά τώρα μπορούμε να χρησιμοποιήσουμε το μετασχηματισμό του CSS3 για μεγέθυνση.
Ορίστε την τάξη του div να "αναπτυχθεί" και στη συνέχεια να προσθέσετε αυτόν τον κώδικα στο μπλοκ στυλ:
.grow:hover{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);transform: scale(1.3);}Οι μετασχηματισμοί CSS έχουν πολλές διαφορετικές χρήσεις και ένα από τα καλύτερα μετατρέπει την περιστροφή ενός στοιχείου. Δώστε το div σας στην κατηγορία "περιστρέψτε" και προσθέστε τα ακόλουθα στο CSS:
.rotate:hover{-webkit-transform: rotateZ(-30deg);-ms-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}Οι 3D σκιές χτυπήθηκαν για περίπου ένα χρόνο, επειδή δεν θεωρήθηκαν συμβατές με το επίπεδο σχέδιο, πράγμα που φυσικά είναι ανοησίες, λειτουργούν φανταστικά καλά για να δίνουν στους χρήστες μια ανατροφοδότηση σχετικά με τις αλληλεπιδράσεις τους και να δουλεύουν με επίπεδες ή ψεύτικες διεπαφές 3D .
Αυτό το αποτέλεσμα επιτυγχάνεται προσθέτοντας μια σκιά κιβωτίου και στη συνέχεια μετακινώντας το στοιχείο στον άξονα x χρησιμοποιώντας τις ιδιότητες μετασχηματισμού και μετάφρασης έτσι ώστε να φαίνεται ότι εξέρχεται από την οθόνη.
Δώστε το div σας στην τάξη "threed" και στη συνέχεια προσθέστε τον ακόλουθο κώδικα στο CSS:
.threed:hover{box-shadow:1px 1px #53a7ea,2px 2px #53a7ea,3px 3px #53a7ea;-webkit-transform: translateX(-3px);transform: translateX(-3px);}Ένα από τα πιο καυτά στυλ κουμπιών είναι τώρα το κουμπί φάντασμα? ένα κουμπί χωρίς φόντο και ένα βαρύ περίγραμμα. Μπορούμε βέβαια να προσθέσουμε απλά ένα περίγραμμα σε ένα στοιχείο, αλλά αυτό θα αλλάξει τη θέση του στοιχείου. Θα μπορούσαμε να διορθώσουμε αυτό το πρόβλημα χρησιμοποιώντας το μέγεθος του κιβωτίου, αλλά μια πολύ απλούστερη λύση είναι η μετάβαση σε ένα περίγραμμα χρησιμοποιώντας μια σκιά τοποθετημένου κουτιού.
Δώστε το div σας στην κατηγορία "border" και προσθέστε το ακόλουθο CSS στα στυλ σας:
.border:hover{box-shadow: inset 0 0 0 25px #53a7ea;}