Περιεχόμενο
- 01. Ταιριάξτε τις εικόνες με τους συνδυασμούς χρωμάτων του ιστότοπου
- 02. Ομοιόμορφη κοινή χρήση χώρου στην τελευταία σειρά του πλέγματος
- 03. Δημιουργήστε κινούμενα σχέδια σωματιδίων με σκιά κουτιού
- 04. Ζώστε την πολυέδρα με μετασχηματισμούς
- 05. Κύριος «υπολογισμός ()» για τοποθέτηση
- 06. Κάντε το μοντέλο κουτιού να είναι λογικό με το «box-sizing»
- 07. Κάθετα κέντρο με CSS
- 08. Στοχεύστε σε μια τράπεζα σχετικών αντικειμένων
- 09. Έλεγχος συλλαβισμού
- 10. Επωφεληθείτε από τη σύνταξη τρόπων
- 11. Χρησιμοποιήστε ντεγκραντέ με ασυνήθιστους τρόπους
- 12. Χρησιμοποιήστε το string-Matching σε συνδέσμους
- 13. Κάντε το FOUT να λειτουργεί για εσάς
- 14. Εξερευνήστε το SVG για υπόβαθρα
- 15. Εστίαση στους χρήστες με τρισδιάστατες μεταβάσεις
- 16. Δημιουργήστε κυκλικά μενού με CSS και μαθηματικά
- 17. Κινούμενοι σύνδεσμοι στο hover
- 18. Κάντε απλές κινούμενες εικόνες καρέ
- 19. Δημιουργήστε αιωρούμενα 3D εφέ με σκιές
- 20. Ενημέρωση eleMents σελίδας χρησιμοποιώντας το «: target»
- 21. Παρέχετε σχόλια με λεπτές κινούμενες εικόνες
- 22. Προετοιμαστείτε για το «will-animate»
- 23. Εξανθρωπιστικά πεδία εισαγωγής
- 24. Παύση και αναπαραγωγή κινούμενων εικόνων CSS
- 25. Μην χρησιμοποιείτε μεταβλητές CSS
Σε κάποιο σημείο με οποιαδήποτε τεχνολογία, υπάρχει η αίσθηση ότι έχει γίνει σχεδόν οτιδήποτε μπορεί να γίνει. Όταν κάτι δεν είναι πλέον τόσο νέο και λαμπερό, το ενδιαφέρον μειώνεται και εφιστάται η προσοχή στο επόμενο μεγάλο πράγμα. Αυτό συνέβη συχνά στη βιομηχανία του διαδικτύου, η οποία είναι επιρρεπής στο να ενθουσιάζεται τρομερά από μια συγκεκριμένη πτυχή της τεχνολογίας πριν, αργά ή γρήγορα, την υποβάλοντάς την στο σύνηθες.
Όταν εμφανίστηκε για πρώτη φορά το CSS, ήταν επαναστατικό και με την πάροδο του χρόνου εξελίχθηκε για να επιτρέψει στους σχεδιαστές να δημιουργήσουν ευέλικτες, αυστηρές και όμορφες διατάξεις ιστοσελίδας. Ωστόσο, αργά, υπήρξε η πρόταση από διάφορες πλευρές ότι το CSS είναι κουρασμένο και ίσως έχει περάσει η ώρα του στον ήλιο.
Θέλω να δείξω ότι εξακολουθεί να υπάρχει αρκετός ενθουσιασμός και ζωή στον κόσμο του CSS, είτε πρόκειται για πρωτοποριακές ιδιότητες που μπορεί να μην έχετε διερευνήσει ακόμη, είτε χρησιμοποιώντας μια πτυχή του CSS με έναν τρόπο που δεν είχατε εξετάσει προηγουμένως.
Ακολουθούν μερικές συμβουλές από μερικούς από τους κορυφαίους ειδικούς του κλάδου CSS.
(Σημείωση: Ορισμένες τεχνικές σε αυτήν τη λειτουργία είναι αιχμής και ενδέχεται να μην υποστηρίζονται πλήρως σε όλα τα προγράμματα περιήγησης. Ελέγξτε προσεκτικά και βεβαιωθείτε ότι υπάρχουν εναλλακτικά πριν από τη ζωντανή εργασία.)
01. Ταιριάξτε τις εικόνες με τους συνδυασμούς χρωμάτων του ιστότοπου
Christopher Schmitt, διοργανωτής συνεδρίων
Τα συνέδρια έχουν τους δικούς τους χρωματικούς συνδυασμούς και, με πολλά ηχεία, η ροή εργασίας για τη διαχείριση πορτρέτων μπορεί να είναι περίπλοκη. Η μη αυτόματη εφαρμογή φίλτρων δεν κλιμακώνεται και εξαρτάται από το ότι έχετε πρόσβαση, για παράδειγμα, σε μια συγκεκριμένη ενέργεια του Photoshop. Τώρα χρησιμοποιώ υψηλής ανάλυσης PNGs κλίμακας γκρι και προσθέτω τόνους χρησιμοποιώντας φίλτρα CSS. Αυτό μου δίνει τη δυνατότητα να ταιριάξω οποιοδήποτε πορτρέτο με το πρόγραμμα μιας εκδήλωσης και να χρησιμοποιήσω ξανά τις εικόνες σε πολλά θέματα. Χρειάζομαι απλώς έναν νέο κανόνα CSS για καθένα. Δείτε μια επίδειξη.
02. Ομοιόμορφη κοινή χρήση χώρου στην τελευταία σειρά του πλέγματος
Stephen Hay, σχεδιαστής και συγγραφέας
Εάν έχετε έναν άγνωστο αριθμό στοιχείων που θα εμφανίζονται σε ένα πλέγμα, μπορείτε να χρησιμοποιήσετε το Flexbox για να διαιρέσετε την τελευταία σειρά ομοιόμορφα. Έτσι, αν υπάρχει μόνο ένα στοιχείο, θα καταλάβει ολόκληρη τη σειρά. αν υπάρχουν δύο αντικείμενα, η σειρά θα χωριστεί στο μισό και ούτω καθεξής. Δείτε μια επίδειξη.
03. Δημιουργήστε κινούμενα σχέδια σωματιδίων με σκιά κουτιού
Ana Tudor, φανατικός κωδικοποιητής και μαθηματικά
Με ανάμιξη κουτί-σκιά Με ορισμένα μαθηματικά και Sass, μπορείτε να σχεδιάσετε καμπύλες 2D, να μιμηθείτε την τρισδιάστατη κίνηση και να δημιουργήσετε τρελά κινούμενα σχέδια σωματιδίων που όλοι κάνουν λάθος για αυτά που έχουν καμβά! Δείτε μια επίδειξη και μια άλλη.
04. Ζώστε την πολυέδρα με μετασχηματισμούς
Ana Tudor, φανατικός κωδικοποιητής και μαθηματικά
Ίσως έχετε δει καθαρά πολύγωνα CSS που δημιουργούνται με περιγράμματα, αλλά έχουμε ένα πολύ πιο ισχυρό εργαλείο στο μεταμορφώνω ιδιοκτησία. Η αλυσίδα και η εφαρμογή μετασχηματισμών σε ένθετα στοιχεία μας επιτρέπει να δημιουργήσουμε πολύπλοκα πολύγωνα με φόντο ή περίγραμμα εικόνας και διαφανείς εσωτερικούς χώρους. Χρησιμοποιώντας τρισδιάστατους μετασχηματισμούς, μπορούμε να συνδυάσουμε αυτά τα σχήματα 2D σε πολυέδρα και να κάνουμε τα στερεά να συγχωνευτούν, να ξεδιπλωθούν, να εκραγούν ή να ανασυνδυαστούν με τρόπο που εύκολα λάθος για το WebGL. Δείτε μια επίδειξη.
05. Κύριος «υπολογισμός ()» για τοποθέτηση
Ana Tudor, φανατικός κωδικοποιητής και μαθηματικά
αγάπησα υπολ. () από τη στιγμή που το ανακάλυψα. Είναι χρήσιμο για την εξουδετέρωση περιθωρίων, γεμίσματος ή διαστάσεων και μπορεί να είναι σωτήριο για χρήση όταν τοποθετείτε ή αλλάζετε μέγεθος φόντου, σε κλίσεις ή μετασχηματισμούς, και συνδυάζεται όχι μόνο με τις ίδιες παλιές μονάδες, αλλά και με τις νέες και δροσερές θύρες προβολής.
06. Κάντε το μοντέλο κουτιού να είναι λογικό με το «box-sizing»
Sawyer Hollenshead, σχεδιαστής και σχεδιαστής Oak Studios
Χρήση μέγεθος κουτιού για να σώσεις τη λογική σου. Χωρίς αυτό, ένα στοιχείο με καθορισμένο πλάτος 250 εικονοστοιχεία και 25 εικονοστοιχεία επένδυσης συνδυάζεται με πλάτος 300 εικονοστοιχεία, καθιστώντας δύσκολη την ανάμιξη των εικονοστοιχείων και των ποσοστών. Με μέγεθος κουτιού:περίγραμμα-κουτί Αντίθετα, τα περιγράμματα και οι επενδύσεις τοποθετούνται εντός του καθορισμένου πλάτους.
07. Κάθετα κέντρο με CSS
Trent Walton, ιδρυτής του Paravel
Ιστορικά, ήταν δύσκολο να κεντράρετε κάθετα κάτι με CSS, όπως εάν έχετε μια εικόνα με παρακείμενο κείμενο που θέλετε κάθετα στοίχιση. Αντί να πατάτε και να καταραστείτε, χρησιμοποιήστε το Flexbox για να αντιμετωπίσετε τα προβλήματα της ευθυγράμμισης. Δείτε μια επίδειξη.
08. Στοχεύστε σε μια τράπεζα σχετικών αντικειμένων
Jonathan Smiley, συνεργάτης του Zurb και επικεφαλής σχεδιασμού
Ξυρίστε το βάρος γραμμής CSS χρησιμοποιώντας κατά προσέγγιση επιλογείς χαρακτηριστικών σε ονόματα τάξεων, για να στοχεύσετε μια μεγάλη σειρά σχετικών αντικειμένων, αντί να επισυνάψετε κοινά χαρακτηριστικά σε κάθε κατηγορία. Για παράδειγμα ... [class * = "- block-grid-"] {} ... θα στοχεύσει τα εξής: .small-block-grid-3 .large-block-grid-5
09. Έλεγχος συλλαβισμού
Savid Storey, ανοιχτός δικηγόρος ιστού
Ο συλλαβισμός θεωρείται δεδομένος σε έντυπη μορφή και ορισμένοι προγραμματιστές χρησιμοποιούν το παύλες ιδιοκτησία στο διαδίκτυο, αλλά λίγοι γνωρίζουν άλλες ιδιότητες που παρέχουν καλύτερο έλεγχο. Εάν δεν είστε προσεκτικοί, λαμβάνετε σκάλες συλλαβισμού όπου οι παύλες χρησιμοποιούνται σε πολλές γραμμές. Ένας γενικός κανόνας δεν είναι περισσότερο από δύο στη σειρά, τους οποίους μπορείτε να ελέγξετε χρησιμοποιώντας ενωτικά-όρια-γραμμές. Επίσης, υποφατικό όριο-χαρακτήρες σας δίνει τη δυνατότητα να καθορίσετε το ελάχιστο μήκος μιας λέξης που θα είναι παύλα, μαζί με τον ελάχιστο αριθμό χαρακτήρων πριν και μετά το διάκενο.
10. Επωφεληθείτε από τη σύνταξη τρόπων
David Storey, ανοιχτός δικηγόρος ιστού
Οι λειτουργίες γραφής σάς επιτρέπουν να καθορίσετε την κατεύθυνση στην οποία ρέει το κείμενο. Κάποιο κείμενο της Ανατολικής Ασίας γράφεται κατακόρυφα, οι γραμμές αναπτύσσονται από δεξιά προς τα αριστερά, προσδιορίζονται με λειτουργία γραφής: κάθετη-rl (tb-rl σε IE). Το κάθετο κείμενο δεν χρησιμοποιείται πραγματικά στα ευρωπαϊκά συστήματα γραφής, αλλά μπορεί να είναι βολικό για επικεφαλίδες πίνακα όταν έχετε περιορισμένο οριζόντιο χώρο.
11. Χρησιμοποιήστε ντεγκραντέ με ασυνήθιστους τρόπους
Ruth John, σχεδιαστής
Οι κλίσεις στο παρασκήνιο μπορούν να φαίνονται υπέροχες όταν χρησιμοποιούνται με περιγράμματα και κουκκίδες. Χρησιμοποιώ και τα δύο στο blog μου και με έναν προεπεξεργαστή μπορώ να καλέσω ένα mixin με τον επαναχρησιμοποιημένο κωδικό, ώστε να μην το επαναλάβω χειροκίνητα. Μην πηγαίνετε υπερβολικά τρελοί επειδή οι κλίσεις μπορεί να είναι βαριές από τον επεξεργαστή. SCSS mixin για κουκκίδες λίστας:
@mixin gradedBullet ($ color) {background-image: linear-gradient (αριστερά, ελαφρύνει ($ χρώμα, 15%) 10px, $ color 11px, $ color 20px, darken ($ color, 15%) 21px, darken ($ color , 15%) 30px, διαφανές 31px); }
12. Χρησιμοποιήστε το string-Matching σε συνδέσμους
Ruth John, σχεδιαστής
Στο ιστολόγιό μου, έχω χρησιμοποιήσει επιλογείς χαρακτηριστικών CSS με αντιστοίχιση συμβολοσειρών σε στυλ κοινωνικών εικονιδίων. Αυτά εμφανίζονται σε ολόκληρο το ιστολόγιό μου, μερικές φορές με κείμενο και μερικές φορές χωρίς, αλλά πάντα με ένα εικονίδιο. Για να διαμορφώσω το σωστό σύνδεσμο με το σωστό εικονίδιο κοινωνικής δικτύωσης, χρησιμοποιώ μια αντιστοίχιση συμβολοσειράς στο href χαρακτηριστικό του στοιχείου αγκύρωσης. χρησιμοποιώ *= έτσι το href στο στοιχείο αγκύρωσης πρέπει να περιέχει μόνο τη συμβολοσειρά που καθορίζω.
/ * για όλους τους κοινωνικούς συνδέσμους * / .social a: before {display: inline-block; επένδυση δεξιά: 30 εικονοστοιχεία; font-family: «FontAwesome»;} / * Κάθε συγκεκριμένος σύνδεσμος * / .social a [href * = "twitter"]: πριν από το {content: " f099"; color: # 52ae9f;}. κοινωνικό a [href * = "github"]: πριν από το {content: " f09b"; color: # 5f2e44;}. κοινωνικό a [href * = "feed"]: πριν από το {content: " f09e"; χρώμα: # b47742;}
13. Κάντε το FOUT να λειτουργεί για εσάς
Ο Jason Pamental, κύριος στο σχέδιο H + W
Ο ιστός είναι βασισμένος στην προϋπόθεση ότι θα πρέπει να παρέχει περιεχόμενο, ακόμη και αν το πρόγραμμα περιήγησης δεν μπορεί να κάνει το bling. Οι αργές φόρμες γραμματοσειρών Ιστού μπορεί να είναι απογοητευτικές, το FOUT (Flash Of Unstyled Text) χαρακτηρίζεται ως πλοήγηση και αναδιατύπωση κειμένου κατά τη λήψη γραμματοσειρών. Το Google και το Typekit παρέχουν μια απάντηση: το web-font loader. Με την ένεση τάξεων σε μια σελίδα, με βάση την κατάσταση φόρτωσης των γραμματοσειρών, μπορείτε να σχεδιάσετε εναλλακτικά με αυτές τις τάξεις για να περιορίσετε την επαναφορά στο ελάχιστο, εξαλείφοντας επίσης το σύνδρομο του «αόρατου περιεχομένου» του WebKit. Δείτε μια επίδειξη.
14. Εξερευνήστε το SVG για υπόβαθρα
Emil Björklund, Χρησιμοποιήστε τον προγραμματιστή ιστού
Τα μόνα προγράμματα περιήγησης που τώρα δεν υποστηρίζουν SVG είναι το IE8 και κάτω και το Android 2 WebKit, και έτσι η χρήση του SVG για φόντα σε CSS είναι εφικτή, ειδικά μαζί με μια εναλλακτική λύση PNG, όπως το Grunticon. Το SVG μπορεί να διαμορφωθεί με CSS και υπάρχει ενδιαφέρουσα ιδιότητα CSS (φίλτρα!) Από το SVG με το οποίο μπορούμε να παίξουμε όπως εφαρμόζεται στο HTML.
15. Εστίαση στους χρήστες με τρισδιάστατες μεταβάσεις
Emil Björklund, Χρησιμοποιήστε τον προγραμματιστή ιστού
Χρήση τρισδιάστατων μετασχηματισμών και χρήση του διάσταση z στις διεπαφές χρήστη μπορεί να είναι πραγματικά χρήσιμη, ιδίως για απόκρυψη / εμφάνιση ή κατάρρευση / επέκταση περιεχομένου. Είναι επίσης πολύ εύκολο να υπάρχει εναλλακτική λύση σε 2D μετάβαση ή καθόλου μετάβαση σε αυτές τις καταστάσεις. Είναι ένας τομέας στον οποίο μια μικρή προοδευτική βελτίωση μπορεί να προχωρήσει πολύ.
16. Δημιουργήστε κυκλικά μενού με CSS και μαθηματικά
Sara Soueidan, προγραμματιστής frontend
Τα κυκλικά μενού είναι δημοφιλή σε εφαρμογές για κινητά και μπορείτε να χρησιμοποιήσετε μετασχηματισμούς και μεταβάσεις CSS για να δημιουργήσετε ένα απλό κυκλικό μενού. Αυτό το μενού μπορεί να τροποποιηθεί και να προσαρμοστεί για να δημιουργήσετε ένα μενού ανοίγματος προς τα πάνω ή προς τα κάτω. Δεν υπάρχει άμεσος τρόπος στο CSS να μεταφράσετε ένα στοιχείο διαγώνια, αλλά μπορείτε να χρησιμοποιήσετε την τιμή της ακτίνας του κύκλου στην οποία θέλετε να τοποθετήσετε τα στοιχεία και να εφαρμόσετε έναν απλό μαθηματικό κανόνα για τον υπολογισμό των οριζόντιων και κατακόρυφων μεταφραστικών τιμών για να περάσετε στο μετάφρασηX () και μετάφρασηY () λειτουργίες. Με αυτόν τον τρόπο, καταλήγετε με ένα διαγώνιος μετάφραση για να μετακινήσετε τα στοιχεία μενού στις σωστές θέσεις στον κύκλο. Το συμβάν κλικ που κλείνει / ανοίγει το μενού μπορεί να αντιμετωπιστεί χρησιμοποιώντας JavaScript ή μπορείτε να το κάνετε ένα βήμα παραπέρα και να έχετε ένα μενού μόνο για CSS, χρησιμοποιώντας ένα πλαίσιο ελέγχου CSS. Στην επίδειξη μου, χρησιμοποιώ το JavaScript και το HTML5 classList API, το οποίο δεν υποστηρίζεται σε όλα τα προγράμματα περιήγησης, οπότε θα πρέπει να προβάλετε την επίδειξη σε ένα σύγχρονο πρόγραμμα περιήγησης για να το λειτουργήσει ή να αποσυνδέσετε τον κώδικα jQuery αντί να χρησιμοποιήσω το API classList κώδικας.
Δείτε μια επίδειξη και ένα πλήρες σεμινάριο. Παράδειγμα εισβολής CSS Checkbox.
17. Κινούμενοι σύνδεσμοι στο hover
Paul Lloyd, σχεδιαστής αλληλεπίδρασης The Guardian
Οι καταστάσεις του Hover δεν πρέπει να βασίζονται στο να λειτουργήσει μια ενέργεια ή να παρέχουν σημαντικές πληροφορίες, αλλά μπορείτε ακόμα να βελτιώσετε τις διεπαφές για χρήστες με βάση το ποντίκι. Στο 24ways.org, αποκαλύπτουμε τίτλους άρθρων όταν τοποθετείτε το δείκτη του ποντικιού πάνω από συνδέσμους στην προηγούμενη / επόμενη πλοήγηση. Αυτό επιτεύχθηκε με τη δημιουργία ενός ::μετά ψευδο-στοιχείο που περιέχει δημιουργημένο περιεχόμενο που προέρχεται από την τιμή του a δεδομένα- χαρακτηριστικό, με μια μετάβαση CSS που εφαρμόζεται για να ολισθήσει στην προβολή κατά την κίνηση. Δείτε μια επίδειξη.
18. Κάντε απλές κινούμενες εικόνες καρέ
Paul Lloyd, σχεδιαστής αλληλεπίδρασης The Guardian
Στο 24ways.org, προσθέσαμε κινούμενα γωνιακά πτερύγια στις περιλήψεις, οι οποίες άνοιξαν στο hover. Αυτό έγινε συνδυάζοντας το @keyframes κυβερνήστε με την ιδιότητα κινούμενης εικόνας, αλλάζοντας τη θέση μιας εικόνας φόντου για να επιτύχετε κινούμενα σχέδια με βάση το sprite. Το κόλπο είναι να δηλώσετε τον αριθμό των καρέ που έχετε στο sprite animation με το βήματα () αξία. Δείτε μια επίδειξη.
19. Δημιουργήστε αιωρούμενα 3D εφέ με σκιές
Catherine Farman, προγραμματιστής Happy Cog
Ένα πρόσφατο έργο απαιτούσε μια φωτογραφία αιωρούμενου προϊόντος με στρογγυλή σκιά κάτω, δημιουργώντας ένα τρισδιάστατο εφέ από την εμφάνιση. Η σκιά χρησιμοποιεί πολλές δυνατότητες CSS3: ακτίνα περιγράμματος διαφάνεια άλφα και κουτί-σκιά. Λειτουργεί καλά για πλέγματα προϊόντων, προβολή εικόνων σε έναν ήρωα αρχικής σελίδας ή για οποιονδήποτε ιδιότροπο σχεδιασμό με σκεομορφική καμπύλη. Δείτε μια επίδειξη.
20. Ενημέρωση eleMents σελίδας χρησιμοποιώντας το «: target»
Simon Madine, ανώτερος προγραμματιστής ιστού HeRe
Το CSS δεν είναι μια γλώσσα προγραμματισμού με τη συνήθη έννοια, αλλά μπορείτε ακόμα να κάνετε έξυπνα πράγματα χωρίς να επιστρέψετε στο JavaScript. Για παράδειγμα, το :στόχος Το pseudo-class εφαρμόζεται σε στοιχεία που αποτελούν στόχο ενός συνδέσμου με κλικ.
Μπορείτε να το χρησιμοποιήσετε για να ορίσετε την κατάσταση μιας σελίδας, να στοχεύσετε έναν γονέα που περιέχει πολλά στοιχεία και οι σύνδεσμοι σας να γίνουν μέσα για τον έλεγχο της εμφάνισης και της διάταξης όλων των παιδιών με ένα μόνο κλικ. Δείτε μια επίδειξη.
21. Παρέχετε σχόλια με λεπτές κινούμενες εικόνες
Neil Renicker, σχεδιαστής και προγραμματιστής
Ψευδο-στοιχεία CSS ::πριν και ::μετά μαζί με τις μεταβάσεις CSS, μπορούν να επιτρέψουν ευχάριστα κινούμενα σχέδια που παρέχουν λεπτή ανατροφοδότηση σε χρήστες ποντικιών. Για παράδειγμα, δημιουργήστε ένα βέλος CSS μέσα σε ένα ψευδο-στοιχείο, εφαρμόστε μια μετάβαση στο ψευδο-στοιχείο (μετάβαση: όλα .15s ευκολία στην έξοδοκαι, στη συνέχεια, προσθέστε μια απλή αλλαγή διάταξης στο :φτερουγίζω ψευδο-τάξη (όπως τροποποίηση περιθώριο). Δείτε μια επίδειξη.
22. Προετοιμαστείτε για το «will-animate»
Paul Lewis, μέλος της ομάδας σχέσεων προγραμματιστών και προγραμματιστών Chrome
Εάν έχετε χρησιμοποιήσει -webkit-transform: translateZ (0) για να κάνετε μαγικά τις σελίδες σας πιο γρήγορες, το hack, το οποίο σε πολλά προγράμματα περιήγησης δημιουργεί απλά ένα νέο επίπεδο συνθέτη, αντικαθίσταται από το θα ζωντανεύει. Σύντομα, θα μπορείτε να πείτε στο πρόγραμμα περιήγησης τι σκοπεύετε να αλλάξετε σχετικά με ένα στοιχείο (θέση, μέγεθος, περιεχόμενο ή θέση κύλισης) και το πρόγραμμα περιήγησης θα εφαρμόσει τη σωστή βελτιστοποίηση κάτω από την κουκούλα. Περισσότερες πληροφορίες.
23. Εξανθρωπιστικά πεδία εισαγωγής
Yaron Schoen, ιδρυτής του Made For Human
Η προσθήκη γρήγορων κινούμενων εικόνων σε στοιχεία με τα οποία αλληλεπιδρούν οι χρήστες κάνει μια διεπαφή να αισθάνεται λιγότερο υπολογιστική. Με πεδία εισαγωγής, δοκιμάστε να βάλετε ένα κλήση μετάβασης μέσα, οπότε όποτε εστιάζετε ή εστιάζετε, υπάρχει μια ομαλή μετάβαση.
είσοδος, textarea {-moz-transission: όλα τα 0.2s easy-out; -o-μετάβαση: όλα τα 0,2 δευτερόλεπτα -webkit-μετάβαση: όλα τα 0.2s ευκολία -ms-μετάβαση: όλα τα 0,2s ευκολία μετάβαση: όλα τα 0,2s ευκολία
24. Παύση και αναπαραγωγή κινούμενων εικόνων CSS
Val Head, σχεδιαστής και σύμβουλος
Μπορείτε να "παύσετε" και να "παίξετε" κινούμενα σχέδια CSS αλλάζοντας το animation-play-state ιδιοκτησία. Η ρύθμιση σε "σε παύση" σταματά την κίνηση σας στη θέση της, μέχρι να την αλλάξετε animation-play-state προς την τρέξιμο, για παράδειγμα στο hover.
.animating_thing {animation: spin 10s γραμμικό άπειρο; animation-play-state: σε παύση; } animating_thing: hover {animation-play-state: εκτέλεση; }
25. Μην χρησιμοποιείτε μεταβλητές CSS
Dave Shea, σχεδιαστής και συγγραφέας
Λαμβάνουμε επιτέλους μεταβλητές CSS, για παράδειγμα να γράψουμε μια δεκαεξαδική τιμή χρώματος μία φορά και να την αναφέρουμε μέσω ενός φύλλου στυλ. Ωστόσο, η επίσημη προδιαγραφή είναι ρητή, προσθέτει συντακτική πολυπλοκότητα, προσφέρει συντριπτική λειτουργικότητα και σε μεγάλο βαθμό δεν υποστηρίζεται από τα περισσότερα προγράμματα περιήγησης. Σε μια εποχή όπου το Sass είναι ευρέως δημοφιλές και ξεπερνά τις μεταβλητές με ισχυρή λογική προγραμματισμού όπως προσαρμοσμένες λειτουργίες και αν / αλλιώς δηλώσεις, η επίσημη προδιαγραφή έρχεται πολύ σύντομη.
Ας ελπίσουμε ότι αυτές οι κορυφαίες συμβουλές έχουν ανανεώσει την άποψή σας για το CSS και τις δυνατότητες που αντιπροσωπεύει στην ανάπτυξη και το σχεδιασμό ιστοσελίδων. Μην ξεχάσετε να δοκιμάσετε οποιαδήποτε από αυτές τις τεχνικές για να ελέγξετε την υποστήριξη του προγράμματος περιήγησης πριν από τη ζωντανή εργασία.
Λόγια: Κρεγκ Γκράννελ Απεικόνιση: Μάικ Τσίπερφιλντ
Αυτό το άρθρο δημοσιεύτηκε αρχικά στο τεύχος του περιοδικού net 253.
